/* * FURNEX Compact Mode * --------------------------------------------------------------------------- * Loaded after the main inline styles. Active only when carries * data-design="minimal" (set by the early-paint script in each HTML head). * * SCOPE: content density only. The warm paper palette, red accent, and all * existing colors (green/blue/yellow/teal) stay exactly as designed. * What changes is how MUCH info appears per screen by default. * * Principle: every section is still ONE TAP AWAY. Nothing is deleted. * The dashboard just defaults to showing 3 stat cards instead of 5+, hides * the leaderboard and quick-jump grid behind toggles, and trims secondary * subtitles. Everything reappears with the toggles in the topbar. * * To revert: fxToggleDesign() in console, or click the topbar toggle. */ /* =========================================================================== STRUCTURAL DECLUTTER — dashboard (HOME page) --------------------------------------------------------------------------- Real IDs in use (verified live via DOM inspection): #dashSocialProof — "📡 5 furnaces tracked · 3 active campaigns · …" #dashStats — 5 big stat cards (ACTIVE FURNACES / TOTAL HEATS / …) #dashCritical — empty until something critical happens #dashAlerts — "19 notifications" banner #dashShiftAndProd — shift handover + today's production #dashActionItems — empty until there are actions #dashLeaderboard — LEADERBOARD · LAST 30 DAYS #dashLauncher — JUMP TO grid with 6 .launch-card tiles #dashFurnaceMini — Furnace Status mini-cards =========================================================================== */ /* Compact stat density: hide cards 4+ in the top stats row. */ :root[data-design="minimal"][data-stat-density="compact"] #dashStats > *:nth-child(n+4) { display: none !important; } /* Hide the social-proof strip ("5 furnaces tracked · 3 active campaigns · …"). The same numbers live in #dashStats right below. */ :root[data-design="minimal"] #dashSocialProof { display: none !important; } /* Hide the JUMP TO launcher grid. Every link there is reachable from the top nav. Also hide the "Jump to" heading label immediately before it (uses :has() — modern Chromium ≥105). */ :root[data-design="minimal"] #dashLauncher, :root[data-design="minimal"] #greetingDash > div:has(+ #dashLauncher) { display: none !important; } /* Hide the duplicate Furnace Status mini-strip — Command Center is one click away. */ :root[data-design="minimal"] #dashFurnaceMini { display: none !important; } /* Leaderboard: hidden by default in minimal; users can toggle via fxToggleLeaderboard(). */ :root[data-design="minimal"][data-show-leaderboard="0"] #dashLeaderboard { display: none !important; } /* Tighten the notifications banner so it doesn't dominate the fold. The bell icon in the topbar surfaces the full feed on click. */ :root[data-design="minimal"] #dashAlerts { margin-bottom: 10px; } :root[data-design="minimal"] #dashAlerts > * > * { padding-top: 8px; padding-bottom: 8px; } /* =========================================================================== STRUCTURAL DECLUTTER — mobile dashboard (furnacelog.html #mGreetingDash) Mobile uses its own ids (m-prefixed). Mirror the desktop intent: in compact, hide the social-proof strip, the "Jump to" launcher (reachable from bottom nav), and the duplicate furnace mini-strip. Stat cards stay (already a tight 2×2 grid). The home toggle flips this on/off. =========================================================================== */ :root[data-design="minimal"] #mDashSocial, :root[data-design="minimal"] #mDashLauncher, :root[data-design="minimal"] #mGreetingDash > div:has(+ #mDashLauncher), :root[data-design="minimal"] #mDashFurnaceMini { display: none !important; } /* =========================================================================== STRUCTURAL DECLUTTER — global =========================================================================== */ /* Section spacing: tighten vertical rhythm everywhere so more fits without feeling cramped. */ :root[data-design="minimal"] .fsec, :root[data-design="minimal"] .panel, :root[data-design="minimal"] .section { margin-bottom: 18px; } /* Reduce noisy uppercase + letter-spacing on small section labels — keeps the warm-paper feel but lowers visual weight. */ :root[data-design="minimal"] .fsec-ttl, :root[data-design="minimal"] .section-title, :root[data-design="minimal"] .stat-label, :root[data-design="minimal"] .ovw-label, :root[data-design="minimal"] .fl { letter-spacing: 0.02em; } /* Hide secondary "subtitle" elements on page headers (e.g., "Saturday, 23 May 2026 · Evening Shift · 18:13 IST" under "Good evening, Rahul"). */ :root[data-design="minimal"] .page-subtitle, :root[data-design="minimal"] .home-sub, :root[data-design="minimal"] .greeting-sub { display: none !important; } /* On the log-heat form, hide the verbose section-tip / helper text by default. */ :root[data-design="minimal"] .fsec-tip, :root[data-design="minimal"] .field-hint, :root[data-design="minimal"] .helper-text, :root[data-design="minimal"] .form-tip { display: none !important; } /* In tables, hide the "tertiary" columns marked as secondary (the app already uses .col-secondary in some places). */ :root[data-design="minimal"] td.col-secondary, :root[data-design="minimal"] th.col-secondary, :root[data-design="minimal"] .col-tertiary { display: none !important; } /* =========================================================================== DESIGN TOGGLE BUTTON (injected by minimal.js into the topbar) Styled to fit the existing warm-paper aesthetic — uses the app's own --s2/--b2/--t2 vars so no theme mismatch. =========================================================================== */ .fx-design-toggle { background: var(--s2); border: 1px solid var(--b2); border-radius: var(--r, 6px); color: var(--t2); font-size: 11px; font-weight: 500; padding: 5px 10px; cursor: pointer; font-family: var(--mono); letter-spacing: 0.02em; transition: background .15s ease, color .15s ease, border-color .15s ease; } .fx-design-toggle:hover { background: var(--s3); color: var(--t1); border-color: var(--b3); } :root[data-design="minimal"] .fx-design-toggle { background: var(--adim); color: var(--red); border-color: var(--red); }