/* Shared top navigation across all CarlsonCorp apps. Loaded by every page; auto-injected by app-topnav.js. */ .app-topnav { display: flex; flex-direction: column; /* 2026-06-06: stack rows vertically (13/row × 2) */ align-items: stretch; background: #0f172a; border-bottom: 1px solid #1e293b; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; font-size: 12px; position: sticky; top: 0; z-index: 1000; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); margin: 0; /* 2026-06-14 · cap the topnav width so its rows (which contain non-shrinking brand + copy + reset + meta items) can't push the document past viewport width. width:100% (not 100vw) since vw includes the vertical scrollbar's width — using vw causes a 15px horizontal scrollbar on every scrolling page. */ width: 100%; max-width: 100%; overflow-x: hidden; /* Layout safety for the three host-body patterns we currently use: · normal block flow (dms.html, carlson.html, etc.): below props inert. · flex column with overflow:hidden (viewer.html): `flex: 0 0 auto` prevents the topnav from being stretched to fill the viewport height (would otherwise hit the body's main axis). · 2-column CSS grid like 'grid-template-columns: 240px 1fr' (filing_review.html): `grid-column: 1 / -1` makes the topnav span ALL columns, otherwise it lands in the 240px sidebar slot and renders as a narrow vertical column on the left edge of the page. */ flex: 0 0 auto; grid-column: 1 / -1; } /* Each row holds up to 13 tabs (plus brand + right controls on row 1). Items shrink to fit so all stay visible at typical desktop widths. Fixed row height keeps row 1 and row 2 visually identical regardless of which children land in row 1 (brand, copy, reset, meta). 2026-06-06 operator: '2 p smaller then they are now' → 28px → 26px. */ .app-topnav-row { display: flex; align-items: stretch; min-width: 0; height: 26px; /* 2026-06-14 · when total topnav items exceed viewport width (operator-flagged: page-wide horizontal scrollbar on email.html where extra items push the topnav to scrollWidth 1953 vs 1500 viewport), scroll the row horizontally inside itself instead of letting it push the document wider than the viewport. */ overflow-x: auto; overflow-y: hidden; /* 2026-06-17 · the operator-clicked phantom white line landed on directly · which means there's no element there · which means the line is THE SCROLLBAR rendered by overflow-x: auto. On macOS Safari the scrollbar can appear as a thin white/light strip when tabs overflow the viewport. Hide it visually for Firefox + WebKit while keeping the scroll behavior. */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge legacy */ } .app-topnav-row::-webkit-scrollbar { display: none; /* Safari/Chrome/WebKit */ width: 0; height: 0; } .app-topnav-row-2 { border-top: 1px solid #1e293b; } /* 2026-06-16 · hide empty row 2 entirely so we don't render a white/border-only horizontal line when the operator has hidden enough tabs to leave row 2 empty. Operator-flagged. */ .app-topnav-row-2:empty { display: none; border-top: none; } .app-topnav-row:empty { display: none; } .app-topnav .app-brand, .app-topnav .app-copy-btn, .app-topnav .app-reset-order, .app-topnav .app-meta { flex-shrink: 0; } .app-topnav .app-link { min-width: 0; flex: 1 1 auto; overflow: hidden; } .app-topnav .app-link .app-label { overflow: hidden; text-overflow: ellipsis; } /* Normalize vertical padding across every child so the fixed row height doesn't crop content (and so row 1 + row 2 line up). */ .app-topnav .app-brand, .app-topnav .app-link, .app-topnav .app-copy-btn, .app-topnav .app-reset-order, .app-topnav .app-meta { padding-top: 3px; padding-bottom: 3px; line-height: 18px; } /* The ↺ reset button was rendering at 14px font, blowing up row 1's visual height. Bring it down to match the other controls. */ .app-topnav .app-reset-order { font-size: 12px; } .app-topnav .app-brand { padding: 5px 12px; color: #94a3b8; font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; border-right: 1px solid #1e293b; display: flex; align-items: center; } .app-topnav .app-link { padding: 5px 11px; color: #cbd5e1; text-decoration: none; font-weight: 500; border-right: 1px solid #1e293b; display: flex; align-items: center; gap: 5px; transition: background-color 0.12s ease, color 0.12s ease, opacity 0.12s ease; white-space: nowrap; cursor: grab; -webkit-user-drag: element; } .app-topnav .app-link:active { cursor: grabbing; } .app-topnav .app-link-dragging { opacity: 0.4; background: #1e293b; } .app-topnav .app-link-drop-target { background: #2563eb; box-shadow: inset 3px 0 0 #fbbf24; } .app-topnav .app-link:hover { background: #1e293b; color: #ffffff; } .app-topnav .app-link.active { background: #2563eb; color: #ffffff; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.25); } .app-topnav .app-icon { font-size: 13px; line-height: 1; } .app-topnav .app-label { font-size: 12px; } /* Thin horizontal scrollbar — only shows if the primary row still overflows on a very narrow viewport (mobile, etc.). With the More ▾ dropdown most desktops won't see this. */ .app-topnav::-webkit-scrollbar { height: 4px; } .app-topnav::-webkit-scrollbar-track { background: #0f172a; } .app-topnav::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; } .app-topnav::-webkit-scrollbar-thumb:hover { background: #475569; } /* More ▾ button — pinned next to the last primary tab. */ .app-topnav .app-more-wrap { position: relative; display: flex; align-items: stretch; } .app-topnav .app-more-btn { padding: 5px 11px; background: transparent; border: 0; border-right: 1px solid #1e293b; color: #cbd5e1; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap; transition: background-color 0.12s ease, color 0.12s ease; } .app-topnav .app-more-btn:hover { background: #1e293b; color: #fff; } .app-topnav .app-more-btn[aria-expanded="true"] { background: #1e293b; color: #fff; } .app-topnav .app-more-count { background: #334155; color: #cbd5e1; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; } .app-topnav .app-more-btn[aria-expanded="true"] .app-more-count { background: #2563eb; color: #fff; } .app-topnav .app-more-arrow { font-size: 9px; opacity: 0.7; } /* Dropdown panel — slides down from the More button. */ .app-topnav .app-more-panel { position: absolute; top: 100%; left: 0; min-width: 260px; max-height: 70vh; overflow-y: auto; background: #0f172a; border: 1px solid #1e293b; border-top: 0; border-radius: 0 0 6px 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); padding: 4px 0; z-index: 1001; } .app-topnav .app-more-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; color: #cbd5e1; text-decoration: none; font-size: 12.5px; transition: background-color 0.1s ease, color 0.1s ease; white-space: nowrap; } .app-topnav .app-more-item:hover { background: #1e293b; color: #fff; } .app-topnav .app-more-item.active { background: #2563eb; color: #fff; box-shadow: inset 3px 0 0 #fbbf24; } .app-topnav .app-more-item .app-icon { font-size: 14px; min-width: 18px; } .app-topnav .app-more-item .app-label { font-size: 12.5px; } .app-topnav .spacer { flex: 1 1 auto; } .app-topnav .app-copy-btn { background: #16a34a; color: #ffffff; border: 0; border-left: 1px solid #1e293b; padding: 5px 12px; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: background-color 0.12s ease; } .app-topnav .app-copy-btn:hover { background: #15803d; } .app-topnav .app-copy-btn:active { background: #166534; } .app-topnav .app-reset-order { background: transparent; color: #94a3b8; border: 0; border-left: 1px solid #1e293b; padding: 5px 10px; font-family: inherit; font-size: 14px; cursor: pointer; transition: color 0.12s ease, background-color 0.12s ease; } .app-topnav .app-reset-order:hover { color: #ffffff; background: #1e293b; } .app-topnav .app-meta { padding: 5px 12px; color: #64748b; font-size: 10px; font-style: italic; align-self: center; border-left: 1px solid #1e293b; } /* Responsive collapse — keep labels visible by default; only collapse to icons-only when the screen really can't fit them. The .app-topnav has flex-wrap so it gracefully spills to a 2nd line above the cliff. */ @media (max-width: 1100px) { .app-topnav .app-meta { display: none; } } @media (max-width: 760px) { .app-topnav .app-brand { display: none; } .app-topnav .app-label { display: none; } .app-topnav .app-link { padding: 5px 9px; gap: 0; } }