/* ───────────────────────────────────────────────────────────────────────────── GLASS The liquid-glass material, dashboard chips, utilities and shared components. Part 5 of 11, cut from the 5,142-line app.css. THE ORDER OF THESE FILES IS LOAD-BEARING — they are one cascade, split for navigation only, and index.php links them in this sequence. Moving one changes which rule wins. ───────────────────────────────────────────────────────────────────────────── */ /* ========================================================= LIQUID GLASS — ONE unified material for every surface (after iyinchao/liquid-glass-studio). Header pills, mobile drawer, content panels, modal, tooltip, dropdown, date filter and the sidebar toggle now share ONE recipe so the header reads as the same glass as everything else: • refractive backdrop → var(--glass-blur) = blur + saturate + brightness + url(#liquid-glass) (the SVG turbulence→displacement→RGB-split→screen chain that gives chromatic dispersion at the edges) • Fresnel top sheen → 155° light-entry gradient • specular streak → ::before • iridescent edge rim → ::after (1px conic, masked) • layered bevel + drop shadow Only the fill DENSITY differs — thin chrome (--bg-glass) vs thick panel (--bg-glass-panel) via --surface-fill, like thin vs thick glass. Every host keeps its own position/layout; this block only paints the material. NOTE: js/glass-tuner.js (?tune=1) still drives --glass-blur, --bg-glass / --bg-glass-panel and the #liquid-glass filter, so all of these stay live-tunable in one shot. ========================================================= */ .nav-group, .action-group, .glass-panel.nav-group, .glass-panel.action-group, .nav-drawer, .glass-panel.nav-drawer, .glass-panel, .modal-card, .dropdown-content, .date-filter-container, .sidebar-toggle-btn { /* FLAT — opaque surface, no glass material. The frame is a HAIRLINE plus a whisper of shadow, which is the reference system's card exactly: the 1px edge draws the boundary and --shadow-2 only implies where the light is. The two are a pair — this border went away once while the shadows were still heavy enough to carry the edge on their own; they no longer are. Revert by setting --hairline: transparent in base.css, not by editing here. (Internal document rules + control affordance borders are unaffected.) */ background: var(--bg-card); backdrop-filter: none; -webkit-backdrop-filter: none; border: var(--card-border); box-shadow: var(--shadow-2); } /* floating chrome + overlays sit higher off the page → stronger shadow (.glass-tooltip excluded — it now carries its own trend-style border + shadow) */ .nav-group, .action-group, .nav-drawer, .modal-card, .dropdown-content { box-shadow: var(--shadow-3); } /* (Outer frame borders are back as a HAIRLINE, not the old heavy frame — see --card-border above. Internal ledger rules (.cdoc-rule / .cdoc-foot / table headers) and control borders (buttons, inputs, toggles) keep their own.) */ /* flat: no glass specular streak */ .nav-group::before, .action-group::before, .nav-drawer::before, .glass-panel::before, .modal-card::before, .glass-tooltip::before, .dropdown-content::before, .date-filter-container::before, .sidebar-toggle-btn::before { content: none; } /* flat: no glass iridescent rim (the holographic rim on .client-doc is separate and keeps its own ::after) */ .nav-group::after, .action-group::after, .nav-drawer::after, .glass-panel:not(.client-doc)::after, .modal-card::after, .glass-tooltip::after, .dropdown-content::after, .date-filter-container::after, .sidebar-toggle-btn::after { content: none; } /* (light-theme glass shadow + rim overrides removed — flat uses the per-theme --shadow-2 / --shadow-3 tokens, which already adapt.) */ /* ========================================= DASHBOARD — Income vs Expense trend chips & tooltip (relocated from the inline