/* ============================================================================ MedGrid — Frappe Dashboard 3D Theming ---------------------------------------------------------------------------- Targets Frappe's native /app/dashboard-view/* pages + /app/query-report/*. All selectors scoped to Frappe Desk classes so we never break the rest of the workspace. Loaded via app_include_css + web_include_css. ---------------------------------------------------------------------------- The goal: make Frappe's built-in dashboards look like the MedGrid 3D preview WITHOUT touching Frappe's own templates or JS. Pure CSS uplift. ============================================================================ */ /* ── Page background ─────────────────────────────────────────────────────── */ body[data-route^="dashboard-view/MedGrid"], body[data-route^="query-report/MedGrid"] { background: radial-gradient(circle at 0% 0%, #eef3fb 0%, #f7f9fc 60%) !important; } /* ── Page header — bigger, more confident ───────────────────────────────── */ body[data-route^="dashboard-view/MedGrid"] .page-head .title-text, body[data-route^="dashboard-view/MedGrid"] .page-title .title-text { font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif !important; font-size: 28px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; background: linear-gradient(135deg, #0f172a 0%, #1e90ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Number Cards — KPI tiles ───────────────────────────────────────────── */ body[data-route^="dashboard-view/MedGrid"] .number-card { background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; border-radius: 16px !important; box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 10px 25px -10px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; padding: 20px !important; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1) !important; } body[data-route^="dashboard-view/MedGrid"] .number-card:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.10), 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important; } body[data-route^="dashboard-view/MedGrid"] .number-card .widget-head .widget-label { font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 10.5px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(15, 23, 42, 0.55) !important; font-weight: 600 !important; } body[data-route^="dashboard-view/MedGrid"] .number-card .widget-body .number { font-family: "Inter", -apple-system, sans-serif !important; font-size: clamp(28px, 3vw, 38px) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; color: #0f172a !important; margin-top: 8px !important; } body[data-route^="dashboard-view/MedGrid"] .number-card .widget-body .number-stats { font-family: "JetBrains Mono", monospace !important; font-size: 11.5px !important; font-weight: 600 !important; margin-top: 6px !important; } body[data-route^="dashboard-view/MedGrid"] .number-card .widget-body .number-stats.green { color: #047857 !important; } body[data-route^="dashboard-view/MedGrid"] .number-card .widget-body .number-stats.red { color: #b91c1c !important; } /* Per-persona accent stripe via color value on the card */ body[data-route="dashboard-view/MedGrid Vendor"] .number-card { border-top: 4px solid #10b981 !important; } body[data-route="dashboard-view/MedGrid Sales Rep"] .number-card { border-top: 4px solid #8b5cf6 !important; } body[data-route="dashboard-view/MedGrid Sales Manager"] .number-card { border-top: 4px solid #1e90ff !important; } /* Admin dashboard — crimson accent to signal oversight + cost-data context */ body[data-route="dashboard-view/MedGrid Admin"] .number-card { border-top: 4px solid #dc2626 !important; } body[data-route="dashboard-view/MedGrid Admin"] .page-head .title-text { background: linear-gradient(135deg, #0f172a 0%, #dc2626 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Subtle warning banner showing "Cost-data visible" on the admin route */ body[data-route="dashboard-view/MedGrid Admin"] .page-head::after { content: "🔒 Admin view — vendor cost, COGS, and margin data are visible. Sales Managers see a sanitized subset."; display: block; margin-top: 12px; padding: 10px 16px; background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.18); border-radius: 10px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.02em; color: #991b1b; } /* ── Dashboard Charts — graph cards ─────────────────────────────────────── */ body[data-route^="dashboard-view/MedGrid"] .chart-wrapper, body[data-route^="dashboard-view/MedGrid"] .dashboard-graph { background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; border-radius: 18px !important; box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 10px 25px -10px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; padding: 24px !important; transition: box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1) !important; } body[data-route^="dashboard-view/MedGrid"] .chart-wrapper:hover, body[data-route^="dashboard-view/MedGrid"] .dashboard-graph:hover { box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.10), 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important; } body[data-route^="dashboard-view/MedGrid"] .chart-wrapper .chart-title, body[data-route^="dashboard-view/MedGrid"] .dashboard-graph .chart-title, body[data-route^="dashboard-view/MedGrid"] .widget-title { font-family: "Inter", sans-serif !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; color: rgba(15, 23, 42, 0.85) !important; } /* Chart SVG — soften default Frappe colors */ body[data-route^="dashboard-view/MedGrid"] .chart-container .frappe-chart svg .line-graph-svg, body[data-route^="dashboard-view/MedGrid"] .chart-container .frappe-chart svg .bar-graph-svg { filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.10)); } /* Donut/pie center text */ body[data-route^="dashboard-view/MedGrid"] .frappe-chart .pie-text { font-family: "Inter", sans-serif !important; font-weight: 700 !important; } /* ── Layout / grid gaps ─────────────────────────────────────────────────── */ body[data-route^="dashboard-view/MedGrid"] .dashboard-graph-row, body[data-route^="dashboard-view/MedGrid"] .number-card-container { gap: 18px !important; } body[data-route^="dashboard-view/MedGrid"] .number-card-container { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; margin-bottom: 20px !important; } /* ── Period-selector pills (Frappe's timespan toggle) ───────────────────── */ body[data-route^="dashboard-view/MedGrid"] .timespan { font-family: "JetBrains Mono", monospace !important; font-size: 11px !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; } /* ── Query Report tables — pretty rows ──────────────────────────────────── */ body[data-route^="query-report/MedGrid"] .dt-cell { font-family: "Inter", sans-serif !important; font-size: 13.5px !important; } body[data-route^="query-report/MedGrid"] .dt-row-header .dt-cell { font-family: "JetBrains Mono", monospace !important; font-size: 10.5px !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; color: rgba(15, 23, 42, 0.55) !important; background: rgba(15, 23, 42, 0.025) !important; } body[data-route^="query-report/MedGrid"] .dt-row:hover { background: rgba(30, 144, 255, 0.04) !important; transition: background 200ms ease !important; } /* ── Filter row ─────────────────────────────────────────────────────────── */ body[data-route^="dashboard-view/MedGrid"] .filter-section, body[data-route^="query-report/MedGrid"] .filter-section { background: rgba(255, 255, 255, 0.7) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px !important; padding: 8px 16px !important; margin-bottom: 16px !important; } /* ── Buttons — primary CTAs ─────────────────────────────────────────────── */ body[data-route^="dashboard-view/MedGrid"] .btn-primary, body[data-route^="query-report/MedGrid"] .btn-primary { background: linear-gradient(135deg, #1e90ff 0%, #0b5fcc 100%) !important; border: none !important; box-shadow: 0 4px 10px -2px rgba(30, 144, 255, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; font-weight: 600 !important; letter-spacing: 0.01em !important; transition: transform 200ms ease, box-shadow 200ms ease !important; } body[data-route^="dashboard-view/MedGrid"] .btn-primary:hover, body[data-route^="query-report/MedGrid"] .btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 16px -3px rgba(30, 144, 255, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; } /* ── Dark mode awareness (Frappe respects this when desk dark mode is on) ─ */ [data-theme="dark"] body[data-route^="dashboard-view/MedGrid"] { background: radial-gradient(circle at 0% 0%, #131c33 0%, #0b1220 60%) !important; } [data-theme="dark"] body[data-route^="dashboard-view/MedGrid"] .number-card, [data-theme="dark"] body[data-route^="dashboard-view/MedGrid"] .chart-wrapper, [data-theme="dark"] body[data-route^="dashboard-view/MedGrid"] .dashboard-graph { background: #121a2e !important; border-color: rgba(255, 255, 255, 0.06) !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.40), 0 10px 25px -10px rgba(0, 0, 0, 0.70) !important; } [data-theme="dark"] body[data-route^="dashboard-view/MedGrid"] .number-card .widget-body .number { color: #e6edf6 !important; } /* ── Reduced motion respect ─────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body[data-route^="dashboard-view/MedGrid"] * { transition: none !important; animation: none !important; } } /* ── Print mode — strip shadows, keep structure ─────────────────────────── */ @media print { body[data-route^="dashboard-view/MedGrid"] * { box-shadow: none !important; } }