/* PJN Dashboard Base — shared design system for every Azure dashboard. Mobile-first. Aligns with portal palette (slate-900 + sky accent). Self-contained; no external CSS deps. Themes are toggled by setting `data-theme="light"` or `data-theme="dark"` on . Default = dark (matches portal). dashboard-base.js handles persistence + the toggle widget. Per-dashboard CSS should consume these variable names instead of declaring its own palette. Layout-specific rules (grids, table column widths, etc.) stay in the dashboard's own stylesheet. */ :root, :root[data-theme="dark"] { /* Surface */ --bg: #0f172a; /* slate-900 — page background */ --bg-elev: #1f2937; /* slate-800 — header / card background */ --bg-tile: #111827; /* slate-900 elevated */ --bg-soft: #171a23; /* even subtler tile / row group */ --bg-hover: #222637; --bg-stripe: #131826; /* zebra striping for tables */ --bg-section: #181c2a; /* section / subtotal row */ --bg-subtotal: #20253a; /* Text */ --fg: #f1f5f9; /* slate-100 */ --fg-muted: #94a3b8; /* slate-400 */ --fg-strong: #ffffff; /* Lines */ --border: #1e293b; /* slate-800 */ --border-soft: #2d3348; /* Accents (semantic) */ --accent: #38bdf8; /* sky-400 */ --accent-strong:#0ea5e9; /* sky-500 */ --good: #22c55e; /* green-500 */ --good-bg: rgba(34, 197, 94, 0.14); --warn: #f59e0b; /* amber-500 */ --warn-bg: rgba(245, 158, 11, 0.14); --error: #ef4444; /* red-500 */ --error-bg: rgba(239, 68, 68, 0.14); /* Geometry */ --radius-sm: 8px; --radius: 12px; --radius-lg: 14px; --tap: 44px; /* min tap target */ --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25); /* Type */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; color-scheme: dark; } :root[data-theme="light"] { --bg: #f5f7fb; --bg-elev: #ffffff; --bg-tile: #ffffff; --bg-soft: #f0f3fa; --bg-hover: #e6ebf5; --bg-stripe: #f0f3fa; --bg-section: #eaeefa; --bg-subtotal: #dde3f3; --fg: #0f172a; --fg-muted: #5b6378; --fg-strong: #000000; --border: #d8dde8; --border-soft: #c2c8d8; --accent: #0284c7; /* sky-600 — better contrast on white */ --accent-strong:#0369a1; --good: #15803d; --good-bg: rgba(34, 197, 94, 0.16); --warn: #b45309; --warn-bg: rgba(245, 158, 11, 0.18); --error: #b91c1c; --error-bg: rgba(239, 68, 68, 0.14); --shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.08); color-scheme: light; } /* ── Resets / base type ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; background: var(--bg); color: var(--fg); min-height: 100dvh; /* Smooth theme switches without flicker */ transition: background-color .15s ease, color .15s ease; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } code { font-family: var(--font-mono); background: var(--bg-soft); border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; } /* ── Theme toggle widget ────────────────────────────────────────────── */ /* Positioned top-right by default, but if a dashboard places #pjn-theme-mount inline (in a header), it sits there instead. The widget itself is the same styling either way. */ #pjn-theme-mount { position: fixed; top: 12px; right: 12px; z-index: 9999; } /* If a dashboard puts the mount inline (e.g. inside its own header), drop the fixed positioning. Author opts in by adding the `inline` modifier. */ #pjn-theme-mount.inline, .pjn-theme-host #pjn-theme-mount { position: static; top: auto; right: auto; } .pjn-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; /* ≥44px tap area via padding fallback below */ min-width: var(--tap); min-height: var(--tap); padding: 0; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--fg); cursor: pointer; font-size: 18px; line-height: 1; box-shadow: var(--shadow); transition: background-color .15s ease, border-color .15s ease, transform .1s ease; -webkit-tap-highlight-color: transparent; } .pjn-theme-toggle:hover { background: var(--bg-hover); border-color: var(--accent); } .pjn-theme-toggle:active { transform: scale(0.96); } .pjn-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pjn-theme-toggle .pjn-theme-icon { display: block; } /* ── Tables — the primary data primitive ─────────────────────────────── */ /* Dashboards opt in by wrapping a with .pjn-table-wrap (or applying .pjn-table directly). Sticky header, alternating rows, tabular numerics, responsive column widths. */ .pjn-table-wrap { width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; -webkit-overflow-scrolling: touch; } .pjn-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .pjn-table thead th { position: sticky; top: 0; background: var(--bg-elev); color: var(--fg-muted); font-weight: 600; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; z-index: 5; } .pjn-table thead th:first-child { text-align: left; } .pjn-table tbody tr { border-bottom: 1px solid var(--border); } .pjn-table tbody tr:nth-child(odd) { background: var(--bg-stripe); } .pjn-table tbody tr:hover { background: var(--bg-hover); } .pjn-table tbody td { padding: 9px 12px; text-align: right; white-space: nowrap; } .pjn-table tbody td:first-child { text-align: left; font-weight: 600; } /* ── Cards / panels ─────────────────────────────────────────────────── */ .pjn-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .pjn-card-label { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; margin-bottom: 4px; } .pjn-card-value { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; } .pjn-card-sub { font-size: 12px; color: var(--fg-muted); margin-top: 4px; } .pjn-pos { color: var(--good); } .pjn-neg { color: var(--error); } .pjn-zero { color: var(--fg-muted); } /* ── Buttons (utility) ──────────────────────────────────────────────── */ .pjn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--bg-elev); color: var(--fg); font-size: 13px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, border-color .15s ease; } .pjn-btn:hover { background: var(--bg-hover); border-color: var(--accent); } .pjn-btn--accent { background: var(--accent); border-color: var(--accent); color: #ffffff; } .pjn-btn--accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #ffffff; } .pjn-btn:disabled { opacity: 0.55; cursor: not-allowed; } /* ── Mobile defaults ───────────────────────────────────────────────── We're mobile-first, so the rules above ARE the phone styles. These overrides fine-tune below the iPhone 14 (390px) breakpoint and ensure no horizontal overflow. */ @media (max-width: 480px) { body { font-size: 14px; } .pjn-card { padding: 12px; } .pjn-card-value { font-size: 22px; } .pjn-table { font-size: 12px; } .pjn-table thead th { padding: 8px 10px; } .pjn-table tbody td { padding: 8px 10px; } } /* ── Tablet ─────────────────────────────────────────────────────────── */ @media (min-width: 640px) { body { font-size: 14px; } } /* ── Desktop ────────────────────────────────────────────────────────── */ @media (min-width: 1024px) { body { font-size: 14px; } } /* ── Reduced motion ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body, .pjn-theme-toggle, .pjn-btn { transition: none; } .pjn-theme-toggle:active { transform: none; } }