/* App launcher ("waffle" menu) — shared by the admin sidebar header and the member dash-header. Dropdown behavior mirrors vv-notifications.css. */ .vv-waffle-wrap { position: relative; } .vv-waffle-btn { width: 36px; height: 36px; border: none; background: transparent; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .vv-waffle-btn:hover { background: rgba(128, 128, 128, 0.15); } .vv-waffle-dots { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; } .vv-waffle-dots span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: block; } /* Trigger color per surface — member header is a light glass app bar, admin sidebar header stays dark navy. */ .vv-waffle-member .vv-waffle-btn { color: #0A2540; } .vv-waffle-member .vv-waffle-btn:hover { background: rgba(10, 37, 64, 0.08); } .vv-waffle-admin .vv-waffle-btn { color: rgba(255, 255, 255, 0.75); } .vv-waffle-admin .vv-waffle-btn:hover { color: #fff; } .vv-waffle-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-width: calc(100vw - 2rem); max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 18px 40px rgba(10, 37, 64, 0.18); padding: 0.9rem; z-index: 300; } /* The admin trigger sits in the left sidebar — open to the right instead. */ .vv-waffle-admin .vv-waffle-dropdown { right: auto; left: 0; } .vv-waffle-dropdown.hidden { display: none; } .vv-waffle-head { font-weight: 700; font-size: 0.85rem; color: #0A2540; padding: 0 0.25rem 0.5rem; border-bottom: 1px solid #f1f5f9; margin-bottom: 0.5rem; } .vv-waffle-group-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; padding: 0.5rem 0.25rem 0.25rem; margin: 0; } .vv-waffle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .vv-waffle-tile { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.6rem 0.25rem; border-radius: 12px; text-decoration: none; text-align: center; } .vv-waffle-tile:hover { background: #f1f5f9; } .vv-waffle-tile-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-tint, rgba(193, 68, 14, .09)); color: #C1440E; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; } .vv-waffle-tile-label { font-size: 0.66rem; font-weight: 600; color: #334155; line-height: 1.25; } /* Day/night toggle dark theme (member-dashboard.html only — gated by the [data-theme="dark"] attribute that page's toggle sets on ). */ :root[data-theme="dark"] .vv-waffle-member .vv-waffle-btn { color: #eef2f7; } :root[data-theme="dark"] .vv-waffle-member .vv-waffle-btn:hover { background: rgba(255, 255, 255, .1); } :root[data-theme="dark"] .vv-waffle-dropdown { background: #131c2c; border-color: #263248; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); } :root[data-theme="dark"] .vv-waffle-head { color: #eef2f7; border-bottom-color: #263248; } :root[data-theme="dark"] .vv-waffle-tile:hover { background: #1b2537; } :root[data-theme="dark"] .vv-waffle-tile-label { color: #dce3ee; } /* Monoline glyphs in member tiles (locked 2026-08-11 icon set) — deeper light-mode orange since the chip stays light in both themes. */ .vv-waffle-tile-icon svg { width: 19px; height: 19px; fill: none; stroke: #C45A1A; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .vv-waffle-tile-icon svg .dot { fill: #C45A1A; stroke: none; } /* Dark mode: the chip itself flips to the raised dark surface (a light chip in a dark panel is a bright rectangle), and the glyph takes the dark accent. Selector carries :root[data-theme] + two classes so it outranks vv-member-dashboard.css's gray sidebar-rail rule for .vv-mono-ic, which otherwise washes these out. */ :root[data-theme="dark"] .vv-waffle-tile-icon { background: #1b2537; } :root[data-theme="dark"] .vv-waffle-tile-icon svg.vv-mono-ic { stroke: #E87A2E; } :root[data-theme="dark"] .vv-waffle-tile-icon svg.vv-mono-ic .dot { fill: #E87A2E; } /* Mobile: the dropdown anchors to the trigger's right edge, which on a narrow screen pushed the 320px panel off the left side of the viewport (invisible). Pin it to the viewport instead — a full-width sheet under the header with room to the bottom of the screen. */ @media (max-width: 640px) { .vv-waffle-dropdown, .vv-waffle-admin .vv-waffle-dropdown { position: fixed; top: calc(var(--dash-header-h, 3.5rem) + 8px); left: .6rem; right: .6rem; width: auto; max-width: none; max-height: calc(100vh - var(--dash-header-h, 3.5rem) - 1.5rem); max-height: calc(100dvh - var(--dash-header-h, 3.5rem) - 1.5rem); } }