/* Admin sidebar — companion styles to admin/public/js/admin-sidebar.js. * * Layout strategy: * -

is position:fixed at left:0, width:var(--admin-sidebar-w). * - body.has-admin-sidebar gets a matching padding-left so existing page * content (mode wrappers, page headers) doesn't need to know about the * sidebar. * - On /admin the old #mode-selector-outer-wrapper is hidden via a class * toggle in index.html; on cross-page admins, their

stays but * sits inside the content area. * * Visual refresh notes: * - Mining Hub dark navy (#192342) is the brand bg. * - Slightly warmer fonts (system stack falls back to Avenir/Century Gothic * used by other admin pages). * - 6px radii, 1.5px focus rings, badges retain the existing #ff8c1a pill. */ :root { --admin-sidebar-w: 232px; --admin-sidebar-bg: #1a2540; --admin-sidebar-bg-2: #14203a; --admin-sidebar-fg: #cfd6e4; --admin-sidebar-fg-dim: #8995ad; --admin-sidebar-fg-active: #ffffff; --admin-sidebar-accent: #30a5bf; --admin-sidebar-divider: rgba(255, 255, 255, 0.08); --admin-sidebar-hover: rgba(255, 255, 255, 0.05); --admin-sidebar-active: rgba(48, 165, 191, 0.18); --admin-sidebar-badge-bg: #ff8c1a; } /* Layout-critical rules are keyed off `html.has-admin-sidebar`, NOT a body * class. Each admin page sets the html class synchronously from an inline * script BEFORE the body parses — so the padding-left + hidden legacy * nav are applied at first paint, eliminating the content-shift flash that * would otherwise happen when JS belatedly added a body class after * DOMContentLoaded. The empty navy column shows up before the sidebar * contents finish injecting; that's fine — it's a visual placeholder, not a * layout shift. */ html.has-admin-sidebar body { padding-left: var(--admin-sidebar-w); margin: 0; /* Body itself never scrolls in the admin layout — each .mode-wrapper * owns its own scroll (overflow-y: auto on the base rule, or overflow: * hidden + internal flex scroll for the flex-viewport tabs). The actual * flex chain that sizes the selected mode-wrapper lives on `.page- * wrapper` (see style.css) because that's the DOM parent of all mode- * wrappers, not body. */ height: 100vh; overflow: hidden; } /* Hide the legacy top tab strip when the sidebar is in use. */ html.has-admin-sidebar #mode-selector-outer-wrapper { display: none !important; } /* Cross-page admins (cron, emails, library, ads, curated-3d, interviews) each * have a top

with the page title and an "← admin home" link. Both are * redundant once the sidebar is present (sidebar brand link doubles as home, * active sidebar item shows the location). Hide them so the content area gets * the full vertical space and we don't double up on dark navy strips. * NOTE: matches only top-level

children of , NOT nested headers * inside modals (e.g. .modal__header) which are unrelated. */ html.has-admin-sidebar body > header { display: none !important; } /* ────────────────────────────────────────────────────────────────────────── * Sidebar container * ────────────────────────────────────────────────────────────────────────── */ .admin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--admin-sidebar-w); background: var(--admin-sidebar-bg); color: var(--admin-sidebar-fg); font-family: 'Avenir', 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; display: flex; flex-direction: column; z-index: 1000; box-shadow: 1px 0 0 var(--admin-sidebar-divider); user-select: none; -webkit-font-smoothing: antialiased; } .admin-sidebar * { box-sizing: border-box; } /* ────────────────────────────────────────────────────────────────────────── * Header (brand + search trigger) * ────────────────────────────────────────────────────────────────────────── */ .admin-sidebar-header { padding: 14px 14px 12px; border-bottom: 1px solid var(--admin-sidebar-divider); flex-shrink: 0; } .admin-sidebar-brand { display: flex; align-items: center; text-decoration: none; margin-bottom: 14px; padding: 2px 0; } .admin-sidebar-brand-img { height: 28px; width: auto; max-width: 100%; display: block; } .admin-sidebar-search-trigger { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--admin-sidebar-bg-2); color: var(--admin-sidebar-fg-dim); border: 1px solid var(--admin-sidebar-divider); border-radius: 6px; font: inherit; font-size: 12px; cursor: pointer; transition: border-color 0.12s, color 0.12s; } .admin-sidebar-search-trigger:hover { border-color: rgba(255, 255, 255, 0.18); color: var(--admin-sidebar-fg); } .admin-sidebar-search-trigger svg { flex-shrink: 0; } .admin-sidebar-search-label { flex: 1; text-align: left; } .admin-sidebar-kbd { display: inline-flex; align-items: center; padding: 1px 6px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--admin-sidebar-divider); border-radius: 4px; font: 600 10px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--admin-sidebar-fg-dim); letter-spacing: 0.4px; } /* ────────────────────────────────────────────────────────────────────────── * Nav * ────────────────────────────────────────────────────────────────────────── */ .admin-sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .admin-sidebar-nav::-webkit-scrollbar { width: 6px; } .admin-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; } .admin-sidebar-group { padding: 6px 0; } .admin-sidebar-group-header { padding: 6px 16px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--admin-sidebar-fg-dim); display: flex; align-items: center; gap: 6px; background: none; border: none; width: 100%; text-align: left; font-family: inherit; } .admin-sidebar-group-header.admin-sidebar-group-toggle { cursor: pointer; user-select: none; } .admin-sidebar-group-icon { font-size: 12px; } .admin-sidebar-group-caret { display: inline-block; transition: transform 0.15s ease; font-size: 9px; width: 10px; text-align: center; } .admin-sidebar-group--collapsed .admin-sidebar-group-caret { transform: rotate(-90deg); } .admin-sidebar-group--collapsed .admin-sidebar-list { display: none; } .admin-sidebar-list { list-style: none; margin: 0; padding: 0; } .admin-sidebar-list li { margin: 0; } .admin-sidebar-link { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 22px; color: var(--admin-sidebar-fg); text-decoration: none; font-size: 13px; font-weight: 500; position: relative; border-left: 2px solid transparent; line-height: 1.4; } .admin-sidebar-link:hover { background: var(--admin-sidebar-hover); color: var(--admin-sidebar-fg-active); } .admin-sidebar-link.is-active { background: var(--admin-sidebar-active); color: var(--admin-sidebar-fg-active); border-left-color: var(--admin-sidebar-accent); font-weight: 600; } .admin-sidebar-link-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-sidebar-pin-icon { font-size: 10px; opacity: 0.6; } .admin-sidebar-pinned-empty { padding: 4px 16px 6px; font-size: 11px; color: var(--admin-sidebar-fg-dim); font-style: italic; line-height: 1.4; } /* ────────────────────────────────────────────────────────────────────────── * Badge (orange pill, mirrors the legacy .mode-tab-badge for compatibility * with admin-badges.js, which targets both .admin-sidebar-badge and the * legacy class) * ────────────────────────────────────────────────────────────────────────── */ .admin-sidebar-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 6px; background: var(--admin-sidebar-badge-bg); color: #fff; border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 1; flex-shrink: 0; } .admin-sidebar-badge[hidden] { display: none; } /* ────────────────────────────────────────────────────────────────────────── * Footer * ────────────────────────────────────────────────────────────────────────── */ .admin-sidebar-footer { flex-shrink: 0; padding: 8px 0 12px; border-top: 1px solid var(--admin-sidebar-divider); } .admin-sidebar-logout { display: flex; align-items: center; gap: 8px; width: calc(100% - 16px); margin: 4px 8px 0; padding: 6px 14px; background: none; border: 1px solid var(--admin-sidebar-divider); border-radius: 6px; color: var(--admin-sidebar-fg-dim); font: 500 12px/1.4 inherit; font-family: inherit; cursor: pointer; transition: background 0.1s, color 0.1s, border-color 0.1s; } .admin-sidebar-logout:hover { background: var(--admin-sidebar-hover); border-color: rgba(255, 255, 255, 0.2); color: var(--admin-sidebar-fg-active); } /* ────────────────────────────────────────────────────────────────────────── * Right-click context menu (pin/unpin) * ────────────────────────────────────────────────────────────────────────── */ .admin-sidebar-context-menu { position: fixed; z-index: 2000; background: #fff; border: 1px solid #d0d4db; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); padding: 4px; min-width: 180px; font: 13px/1.4 'Avenir', 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; } .admin-sidebar-context-menu button { display: block; width: 100%; padding: 7px 12px; background: none; border: none; border-radius: 4px; text-align: left; font: inherit; color: #192342; cursor: pointer; } .admin-sidebar-context-menu button:hover { background: #f0f3f7; } /* ────────────────────────────────────────────────────────────────────────── * Cmd+K command palette * ────────────────────────────────────────────────────────────────────────── */ .admin-palette-overlay { position: fixed; inset: 0; background: rgba(15, 22, 40, 0.55); z-index: 3000; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: admin-palette-fade-in 0.12s ease; } @keyframes admin-palette-fade-in { from { opacity: 0; } to { opacity: 1; } } .admin-palette { width: 560px; max-width: 92vw; background: #fff; border-radius: 10px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28); overflow: hidden; font: 13px/1.4 'Avenir', 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; display: flex; flex-direction: column; max-height: 70vh; } .admin-palette-input-wrapper { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #eef0f3; color: #6b7382; } .admin-palette-input { flex: 1; border: none; outline: none; font: 15px/1.4 inherit; color: #192342; background: transparent; } .admin-palette-input::placeholder { color: #b0b7c3; } .admin-palette-input-wrapper .admin-sidebar-kbd { background: #f0f3f7; border-color: #e2e6ec; color: #6b7382; } .admin-palette-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; flex: 1; } .admin-palette-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 14px; background: none; border: none; text-align: left; font: inherit; color: #192342; cursor: pointer; border-radius: 0; } .admin-palette-item:hover { background: #f6f7f9; } .admin-palette-item.is-selected { background: #eef6f8; color: #192342; } .admin-palette-item.is-selected .admin-palette-item-group { color: #1a7488; } .admin-palette-item-label { font-weight: 600; } .admin-palette-item-group { font-size: 11px; color: #8995ad; text-transform: uppercase; letter-spacing: 0.4px; } .admin-palette-empty { padding: 18px 14px; text-align: center; color: #8995ad; font-style: italic; } .admin-palette-footer { padding: 8px 14px; border-top: 1px solid #eef0f3; display: flex; gap: 18px; font-size: 11px; color: #8995ad; } .admin-palette-footer span { display: inline-flex; align-items: center; gap: 4px; } .admin-palette-footer kbd { display: inline-flex; align-items: center; padding: 1px 5px; background: #f0f3f7; border: 1px solid #e2e6ec; border-radius: 3px; font: 600 10px/1.4 ui-monospace, Menlo, Consolas, monospace; color: #6b7382; }