/* Extracted from docs/pro/dashboard.html (Rock 4 Phase 2e, 2026-07-04).
Universal nav bar + print/page CSS that sat inline in . Load
position preserved: the replaces the block in the same slot,
after theme-bridge.css and before the nav markup. */
/* ── NAV CONFIG DEFAULTS ─────────────────────────────────────── */
:root {
--nbd-nav-h: 52px;
--nbd-nav-bg: #0f1d42;
--nbd-nav-border: color-mix(in srgb, var(--orange) 25%, transparent);
--nbd-nav-orange: var(--orange);
--nbd-nav-cyan: #00d4ff;
--nbd-nav-text: #8b9bb4;
--nbd-nav-white: #f0f6fc;
}
/* ── HIDE TOP NAV on dashboard — sidebar + header handle all navigation ── */
#nbd-pro-nav, #nbd-nav-drawer { display: none !important; }
#nbd-pro-nav {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: var(--nbd-nav-h);
background: rgba(15,29,66,0.97);
-webkit-backdrop-filter:blur(20px);backdrop-filter: blur(12px);
border-bottom: 1px solid var(--nbd-nav-border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
gap: 12px;
font-family: 'DM Mono', 'Barlow', monospace;
}
/* Logo */
#nbd-pro-nav .nnav-logo {
display: flex;
align-items: center;
gap: 9px;
text-decoration: none;
flex-shrink: 0;
}
#nbd-pro-nav .nnav-mark {
width: 32px; height: 32px;
background: var(--nbd-nav-orange);
border-radius: 5px;
display: flex; align-items: center; justify-content: center;
font-family: 'Barlow Condensed', sans-serif;
font-size: 16px; color:var(--t); letter-spacing: 1px;
flex-shrink: 0;
}
#nbd-pro-nav .nnav-wordmark {
font-family: 'Barlow Condensed', sans-serif;
font-size: 16px; letter-spacing: 2px;
color: var(--nbd-nav-white); line-height: 1;
}
#nbd-pro-nav .nnav-wordmark span { color: var(--nbd-nav-orange); }
#nbd-pro-nav .nnav-sub {
font-family: 'DM Mono', monospace;
font-size: 8px; color: var(--nbd-nav-text);
letter-spacing: 2px; text-transform: uppercase; margin-top: 1px;
}
/* Links */
#nbd-pro-nav .nnav-links {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
justify-content: center;
overflow-x: auto;
scrollbar-width: none;
}
#nbd-pro-nav .nnav-links::-webkit-scrollbar { display: none; }
#nbd-pro-nav .nnav-link {
display: flex; align-items: center; gap: 5px;
padding: 5px 9px;
border-radius: 5px;
text-decoration: none;
font-size: 10px; font-weight: 600;
letter-spacing: .5px; text-transform: uppercase;
color: var(--nbd-nav-text);
white-space: nowrap;
transition: all .15s;
border: 1px solid transparent;
}
#nbd-pro-nav .nnav-link:hover {
color: var(--nbd-nav-white);
background: rgba(255,255,255,.06);
}
#nbd-pro-nav .nnav-link.active {
color: var(--nbd-nav-orange);
background: color-mix(in srgb, var(--orange) 10%, transparent);
border-color: color-mix(in srgb, var(--orange) 20%, transparent);
}
#nbd-pro-nav .nnav-link.demo-link {
color: var(--nbd-nav-cyan);
}
#nbd-pro-nav .nnav-link.demo-link:hover {
background: rgba(0,212,255,.08);
border-color: rgba(0,212,255,.2);
}
#nbd-pro-nav .nnav-icon { font-size: 12px; line-height: 1; display:inline-flex; align-items:center; justify-content:center; }
#nbd-pro-nav .nnav-icon svg { width:14px; height:14px; }
/* Right side */
#nbd-pro-nav .nnav-right {
display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
#nbd-pro-nav .nnav-login-btn {
padding: 6px 14px;
background: var(--nbd-nav-orange);
color:var(--t); border: none; border-radius: 4px;
font-family: 'DM Mono', monospace;
font-size: 9px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; cursor: pointer;
text-decoration: none;
transition: .15s;
white-space: nowrap;
}
#nbd-pro-nav .nnav-login-btn:hover { background: #c45e08; }
#nbd-pro-nav .nnav-login-btn.logout {
background: transparent;
border: 1px solid rgba(255,255,255,.15);
color: var(--nbd-nav-text);
}
#nbd-pro-nav .nnav-login-btn.logout:hover {
border-color: var(--nbd-nav-orange);
color: var(--nbd-nav-orange);
}
#nbd-pro-nav .nnav-user {
font-size: 9px; color: var(--nbd-nav-text);
letter-spacing: .5px; max-width: 120px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Hamburger */
#nbd-pro-nav .nnav-burger {
display: none;
flex-direction: column; gap: 4px;
background: none; border: none; cursor: pointer;
padding: 6px; flex-shrink: 0;
}
#nbd-pro-nav .nnav-burger span {
display: block; width: 20px; height: 2px;
background: var(--nbd-nav-white); border-radius: 2px;
transition: .25s;
}
/* Mobile drawer */
#nbd-nav-drawer {
display: none;
position: fixed;
top: var(--nbd-nav-h);
left: 0; right: 0; bottom: 0;
z-index: 999;
background: rgba(8,12,24,.97);
-webkit-backdrop-filter:blur(20px);backdrop-filter: blur(16px);
flex-direction: column;
overflow-y: auto;
}
#nbd-nav-drawer.open { display: flex; }
.nnav-drawer-links {
flex: 1;
display: flex; flex-direction: column;
padding: 16px;
gap: 4px;
}
.nnav-drawer-link {
display: flex; align-items: center; gap: 12px;
padding: 13px 16px;
border-radius: 8px;
text-decoration: none;
font-family: 'DM Mono', monospace;
font-size: 12px; font-weight: 600; letter-spacing: .5px;
text-transform: uppercase;
color: var(--nbd-nav-text);
border: 1px solid transparent;
transition: .15s;
}
.nnav-drawer-link:hover {
background: rgba(255,255,255,.06);
color: var(--nbd-nav-white);
}
.nnav-drawer-link.active {
background: color-mix(in srgb, var(--orange) 10%, transparent);
border-color: color-mix(in srgb, var(--orange) 20%, transparent);
color: var(--nbd-nav-orange);
}
.nnav-drawer-link.demo-link { color: var(--nbd-nav-cyan); }
.nnav-drawer-link .nnav-icon { font-size: 18px; width: 24px; text-align: center; }
.nnav-drawer-footer {
padding: 16px;
border-top: 1px solid rgba(255,255,255,.06);
display: flex; flex-direction: column; gap: 8px;
}
.nnav-drawer-footer .nnav-login-btn {
display: block; width: 100%; text-align: center;
padding: 14px; font-size: 11px;
}
/* Responsive */
@media (max-width: 768px) {
#nbd-pro-nav .nnav-links { display: none; }
#nbd-pro-nav .nnav-right .nnav-login-btn { display: none; }
#nbd-pro-nav .nnav-right .nnav-user { display: none; }
#nbd-pro-nav .nnav-burger { display: flex; }
#nbd-nav-drawer .nnav-drawer-link { padding: 15px 16px; font-size: 13px; min-height: 48px; }
}
@media (max-width: 400px) {
#nbd-pro-nav { padding: 0 12px; --nbd-nav-h: 48px; }
#nbd-pro-nav .nnav-mark { font-size: 11px; width: 32px; height: 32px; }
#nbd-pro-nav .nnav-wordmark { font-size: 13px; }
#nbd-nav-drawer { top: 48px; }
}
/* Position variants */
#nbd-pro-nav.pos-bottom {
position: fixed;
top: auto; bottom: 0;
border-top: 1px solid var(--nbd-nav-border);
border-bottom: none;
}
#nbd-pro-nav.pos-dock {
position: fixed;
top: auto; bottom: 16px;
left: 50%; right: auto;
transform: translateX(-50%);
width: auto; max-width: 92vw;
border-radius: 40px;
border: 1px solid var(--nbd-nav-border);
padding: 0 20px;
box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
#nbd-pro-nav.pos-dock .nnav-wordmark,
#nbd-pro-nav.pos-dock .nnav-sub { display: none; }
/* ══ TALK TANK ══ */
.tt-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.tt-title{font-size:26px;font-weight:800;color:var(--t);letter-spacing:-0.5px;display:flex;align-items:center;gap:10px;}
.tt-tagline{font-size:13px;color:var(--st);margin-top:4px;}
.tt-rec-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:0;border-radius:999px;padding:10px 18px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 4px 14px rgba(220,38,38,.32);transition:transform .12s ease, box-shadow .12s ease;}
.tt-rec-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(220,38,38,.42);}
.tt-rec-btn:active{transform:translateY(0);}
.tt-rec-dot{width:10px;height:10px;border-radius:50%;background:#fff;animation:tt-pulse 1.4s ease-in-out infinite;}
@keyframes tt-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tt-controls{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.tt-search{flex:1;min-width:200px;max-width:380px;background:var(--bg2);border:1px solid var(--br);border-radius:10px;padding:9px 12px;color:var(--t);font-size:13px;}
.tt-search:focus{outline:0;border-color:var(--fg-orange);}
.tt-chips{display:flex;gap:6px;flex-wrap:wrap;}
.tt-chip{background:var(--bg2);border:1px solid var(--br);color:var(--st);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .12s ease, color .12s ease, border-color .12s ease;}
.tt-chip:hover{color:var(--t);border-color:var(--st);}
.tt-chip-active{background:var(--fg-orange);color:#fff;border-color:var(--fg-orange);}
.tt-chip-count{background:rgba(255,255,255,.18);padding:1px 7px;border-radius:999px;font-size:11px;}
.tt-chip-active .tt-chip-count{background:rgba(0,0,0,.18);}
.tt-list{display:flex;flex-direction:column;gap:8px;}
.tt-row{background:var(--bg2);border:1px solid var(--br);border-radius:12px;overflow:hidden;transition:border-color .12s ease;}
.tt-row:hover{border-color:var(--st);}
.tt-row-head{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;}
.tt-row-icon{width:36px;height:36px;border-radius:50%;background:rgba(255,140,40,.14);color:var(--fg-orange);display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.tt-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.tt-row-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--st);flex-wrap:wrap;}
.tt-row-preview{font-size:13.5px;color:var(--t);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.tt-row-when{font-size:11px;color:var(--st);white-space:nowrap;}
.tt-row-caret{color:var(--st);font-size:14px;transition:transform .15s ease;}
.tt-row-expanded .tt-row-caret{transform:rotate(180deg);}
.tt-ctx{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;}
.tt-ctx-linked{background:rgba(34,197,94,.14);color:#22c55e;}
.tt-ctx-standalone{background:rgba(148,163,184,.14);color:var(--st);}
.tt-tasks{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--fg-orange);}
.tt-detail{padding:0 14px 14px 62px;border-top:1px solid var(--br);background:rgba(0,0,0,.08);}
.tt-detail-block{padding-top:10px;}
.tt-detail-label{font-size:11px;font-weight:700;color:var(--st);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;}
.tt-detail-text{font-size:13px;color:var(--t);line-height:1.5;white-space:pre-wrap;}
.tt-detail-transcript{font-size:12.5px;color:var(--st);line-height:1.5;white-space:pre-wrap;max-height:220px;overflow-y:auto;padding:8px 10px;background:var(--bg);border:1px solid var(--br);border-radius:8px;}
.tt-action-list{margin:6px 0 0;padding-left:20px;font-size:12.5px;color:var(--t);}
.tt-action-list li{margin-bottom:2px;}
.tt-detail-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.tt-detail-btn{background:var(--bg);border:1px solid var(--br);color:var(--t);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:background .12s ease, border-color .12s ease;}
.tt-detail-btn:hover{border-color:var(--fg-orange);}
.tt-detail-btn-danger{color:#ef4444;border-color:rgba(239,68,68,.4);}
.tt-detail-btn-danger:hover{background:rgba(239,68,68,.1);border-color:#ef4444;}
.tt-empty{text-align:center;padding:50px 20px;color:var(--st);}
.tt-empty-icon{font-size:46px;margin-bottom:12px;opacity:.7;}
.tt-empty-msg{font-size:15px;font-weight:600;color:var(--t);margin-bottom:6px;}
.tt-empty-sub{font-size:13px;}
@media (max-width:640px){
.tt-detail{padding-left:14px;}
.tt-search{max-width:none;}
}
/* ══════════════════════════════════════════════════════════════════════
CSP-safe hover effects (replaces stripped inline onmouseover/out).
The strict CSP at firebase.json:44 (`script-src-attr 'none'`) blocked
the inline `this.style.transform='scale(...)'` handlers across
notif-bell, global-search, activity-feed, smart-followup, decision-
engine, and a few others — they were dead. These rules give the same
visual feedback via the CSS engine, which is unaffected by CSP.
══════════════════════════════════════════════════════════════════════ */
.notif-action:hover,
.af-action:hover,
.cmd-action:hover,
.gs-action:hover,
.sfp-action:hover,
[data-nb-action]:hover,
[data-af-action]:hover,
[data-gs-action]:hover {
transform: scale(1.08);
transition: transform .12s ease;
}
.gs-action:hover,
[data-gs-action]:hover,
.cmd-action:hover { transform: scale(1.10); }
.notif-item:hover { background: var(--s2, #1a1f2a); transition: background .12s ease; }
/* ── PRINT STYLESHEET ─────────────────────────────── */
@media print {
/* Hide navigation, toolbars, modals, FAB */
#nbd-pro-nav, .crm-secondary-toolbar, .fab-container,
.modal-bg, .toast-container, .mobile-more-menu,
.cmd-palette-overlay, .nav-bottom-mobile,
button, .btn, .upload-zone { display: none !important; }
/* Full width content */
body { background: #fff !important; color: #000 !important; }
.app-body { margin: 0 !important; padding: 0 !important; }
.view { padding: 10px !important; }
.view.active { display: block !important; }
/* Clean up panels */
.panel { border: 1px solid #ccc !important; box-shadow: none !important;
background: #fff !important; color: #000 !important; break-inside: avoid; }
.panel-title { color: #000 !important; }
.panel-label { color: #666 !important; }
/* Kanban cards print as list */
.k-col { display: block !important; width: 100% !important; float: none !important; }
.k-card { border: 1px solid #ddd !important; margin-bottom: 8px !important;
background: #fff !important; color: #000 !important; break-inside: avoid; }
/* Links show URL */
a[href]:after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
a[href^="#"]:after, a[href^="javascript"]:after { content: ""; }
/* Page breaks */
h1, h2, h3 { page-break-after: avoid; }
.panel, .k-card { page-break-inside: avoid; }
/* Footer */
@page { margin: 0.75in; }
}