/* ════════════════════════════════════════════════════════════════════════ BBC Workplace EMP — Design System Premium energy-management SaaS · light + dark themes Theme is set via (see base.html bootstrap) ════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* ── Design tokens — dark (default) ─────────────────────────────────────── */ :root, [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg-main: #0e1014; --bg-mid: #12141a; --bg-sidebar: #0a0c10; --bg-card: rgba(255,255,255,0.03); --bg-card-hover: rgba(255,255,255,0.06); --bg-input: rgba(255,255,255,0.05); --bg-elevated: #181b22; /* Lines */ --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); --border-accent: rgba(91,140,255,0.45); /* Text */ --txt-primary: #e9ecf2; --txt-secondary: rgba(233,236,242,0.64); --txt-muted: rgba(233,236,242,0.40); /* Accent (single, restrained) */ --accent: #5b8cff; --accent-strong: #7da4ff; --accent-soft: rgba(91,140,255,0.14); /* Semantic status */ --success: #34d399; --success-soft: rgba(52,211,153,0.13); --warning: #fbbf24; --warning-soft: rgba(251,191,36,0.13); --danger: #f0716c; --danger-soft: rgba(240,113,108,0.13); --info: #38bdf8; --info-soft: rgba(56,189,248,0.13); /* Utility (fuel) identity */ --elec: #38bdf8; --elec-soft: rgba(56,189,248,0.13); --gas: #f59e0b; --gas-soft: rgba(245,158,11,0.13); /* Charts */ --chart-1: #5b8cff; --chart-2: #38bdf8; --chart-3: #f59e0b; --chart-4: #34d399; --chart-5: #a78bfa; --chart-6: #f472b6; --chart-text: rgba(233,236,242,0.62); --chart-grid: rgba(255,255,255,0.07); --chart-axis: rgba(233,236,242,0.35); --chart-tooltip-bg: #181b22; --chart-tooltip-border: rgba(255,255,255,0.14); /* Neutral surface tints (white-alpha in dark, black-alpha in light) — used by per-page styles in templates so both themes work */ --tint-02: rgba(255,255,255,0.02); --tint-03: rgba(255,255,255,0.03); --tint-04: rgba(255,255,255,0.04); --tint-05: rgba(255,255,255,0.05); --tint-06: rgba(255,255,255,0.06); --tint-07: rgba(255,255,255,0.07); --tint-08: rgba(255,255,255,0.08); --tint-10: rgba(255,255,255,0.10); --tint-12: rgba(255,255,255,0.12); --tint-15: rgba(255,255,255,0.15); --tint-20: rgba(255,255,255,0.20); /* Geometry & motion */ --sidebar-w: 230px; --header-h: 58px; --radius: 12px; --radius-sm: 7px; --shadow: 0 8px 28px rgba(0,0,0,0.45); --shadow-sm: 0 2px 10px rgba(0,0,0,0.30); --transition: 0.16s ease; /* ── Legacy aliases (older templates reference these names) ──────────── */ --accent-purple: var(--accent); --accent-cyan: var(--elec); --accent-orange: var(--gas); --accent-gold: var(--warning); --accent-green: var(--success); --accent-pink: #f472b6; } /* ── Design tokens — light ──────────────────────────────────────────────── */ [data-theme="light"] { color-scheme: light; --bg-main: #f3f4f6; --bg-mid: #eceef1; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-card-hover: rgba(22,24,29,0.045); --bg-input: #ffffff; --bg-elevated: #ffffff; --border: rgba(22,24,29,0.10); --border-strong: rgba(22,24,29,0.18); --border-accent: rgba(37,99,235,0.45); --txt-primary: #16181d; --txt-secondary: rgba(22,24,29,0.66); --txt-muted: rgba(22,24,29,0.44); --accent: #2563eb; --accent-strong: #1d4ed8; --accent-soft: rgba(37,99,235,0.10); --success: #059669; --success-soft: rgba(5,150,105,0.10); --warning: #b45309; --warning-soft: rgba(180,83,9,0.10); --danger: #dc2626; --danger-soft: rgba(220,38,38,0.09); --info: #0284c7; --info-soft: rgba(2,132,199,0.10); --elec: #0284c7; --elec-soft: rgba(2,132,199,0.10); --gas: #d97706; --gas-soft: rgba(217,119,6,0.11); --chart-1: #2563eb; --chart-2: #0284c7; --chart-3: #d97706; --chart-4: #059669; --chart-5: #7c3aed; --chart-6: #db2777; --chart-text: rgba(22,24,29,0.62); --chart-grid: rgba(22,24,29,0.08); --chart-axis: rgba(22,24,29,0.38); --chart-tooltip-bg: #ffffff; --chart-tooltip-border: rgba(22,24,29,0.14); --tint-02: rgba(22,24,29,0.03); --tint-03: rgba(22,24,29,0.035); --tint-04: rgba(22,24,29,0.045); --tint-05: rgba(22,24,29,0.05); --tint-06: rgba(22,24,29,0.06); --tint-07: rgba(22,24,29,0.065); --tint-08: rgba(22,24,29,0.08); --tint-10: rgba(22,24,29,0.10); --tint-12: rgba(22,24,29,0.12); --tint-15: rgba(22,24,29,0.15); --tint-20: rgba(22,24,29,0.18); --shadow: 0 8px 28px rgba(22,24,29,0.10); --shadow-sm: 0 1px 4px rgba(22,24,29,0.07); --accent-pink: #db2777; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-main); color: var(--txt-primary); font-size: 13.5px; line-height: 1.5; overflow-x: hidden; } /* ── Scrollbar ──────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--txt-muted); } /* ── Icons (inline SVG via _icons.html macro) ───────────────────────── */ .icon { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; } /* ── Layout ─────────────────────────────────────────────────────────── */ .app-layout { display: flex; height: 100vh; overflow: hidden; } /* ── Sidebar ─────────────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 100; flex-shrink: 0; } /* Brand block */ .sidebar-brand { padding: 20px 16px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .bbc-logo-box { background: var(--txt-primary); color: var(--bg-sidebar); font-weight: 800; font-size: 10px; letter-spacing: -0.3px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.1; } .sidebar-brand-top { font-size: 13px; font-weight: 700; color: var(--txt-primary); letter-spacing: 0.5px; } .sidebar-brand-sub { font-size: 9px; color: var(--txt-muted); letter-spacing: 1px; text-transform: uppercase; } /* Client switcher */ .client-switcher-wrap { padding: 8px 14px 10px; } .client-switcher { width: 100%; background: var(--bg-input); color: var(--txt-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 28px 6px 9px; font-size: 12px; cursor: pointer; } /* Nav */ .sidebar-nav { flex: 1; padding: 10px 10px; display: flex; flex-direction: column; gap: 2px; } .nav-section-label { font-size: 9.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--txt-muted); padding: 12px 10px 4px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--txt-secondary); text-decoration: none; font-size: 13px; font-weight: 450; transition: background var(--transition), color var(--transition); cursor: pointer; } .nav-item:hover { background: var(--bg-card-hover); color: var(--txt-primary); } .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 550; } .nav-item .nav-icon { width: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.85; } .nav-item.active .nav-icon { opacity: 1; } /* Modules still being built: a red hairline and a barrier mark, so nobody quotes from them as if they were finished. */ .nav-item.nav-wip { box-shadow: inset 0 0 0 1px var(--danger); margin: 2px 0; } .nav-item.nav-wip.active { background: var(--danger-soft); color: var(--txt-primary); } .nav-wip-mark { margin-left: auto; display: inline-flex; color: var(--danger); } .wip-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid var(--danger); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--txt-primary); font-size: 13px; } .wip-banner .icon { color: var(--danger); flex-shrink: 0; } /* ── Drill-down panels ────────────────────────────────────────────────── A panel that opens under a table or chart eases in rather than jumping. Short and small on purpose: it should read as the page settling, not as an effect. Pair with openDrill()/closeDrill() in main.js. */ @keyframes drill-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes drill-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } } /* No fill mode on the way in: if the browser does not run the animation (a background tab, a throttled pane) the panel is simply visible. */ .drill-panel.drill-open { animation: drill-in 220ms cubic-bezier(.2, .7, .2, 1); } .drill-panel.drill-closing { animation: drill-out 160ms ease-in forwards; pointer-events: none; } /* A table row picked for drill-down fades to its highlight. */ .data-table tbody tr td { transition: background-color 180ms ease; } @media (prefers-reduced-motion: reduce) { .drill-panel.drill-open, .drill-panel.drill-closing { animation: none; } .data-table tbody tr td { transition: none; } } .sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border); font-size: 10px; color: var(--txt-muted); } /* ── Main content area ───────────────────────────────────────────────── */ .main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-main); min-height: 0; } /* Header bar */ .topbar { height: var(--header-h); min-height: var(--header-h); background: color-mix(in srgb, var(--bg-main) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 16px; z-index: 50; } .topbar-title { font-size: 15px; font-weight: 600; color: var(--txt-primary); flex: 1; letter-spacing: -0.1px; } .topbar-subtitle { font-size: 11px; color: var(--txt-muted); } /* Theme toggle */ .theme-toggle { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--txt-secondary); cursor: pointer; transition: all var(--transition); flex-shrink: 0; } .theme-toggle:hover { color: var(--txt-primary); border-color: var(--border-strong); background: var(--bg-card-hover); } [data-theme="dark"] .theme-icon-dark { display: none; } [data-theme="light"] .theme-icon-light { display: none; } /* Signed-in user + sign out */ .topbar-user { display: flex; align-items: center; gap: 8px; margin: 0; flex-shrink: 0; } .topbar-user-name { font-size: 12px; color: var(--txt-secondary); text-decoration: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-user-name:hover { color: var(--txt-primary); } /* Content scrollable zone */ .page-content { flex: 1; overflow-y: auto; padding: 20px 24px; min-height: 0; } /* ── Cards ───────────────────────────────────────────────────────────── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color var(--transition); } .card:hover { border-color: var(--border-strong); } .card-title { font-size: 11.5px; font-weight: 600; color: var(--txt-secondary); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 14px; } /* ── KPI cards ───────────────────────────────────────────────────────── */ .kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; text-align: left; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } .kpi-card-label { font-size: 10.5px; font-weight: 600; color: var(--txt-muted); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 6px; } .kpi-card-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; } .kpi-card-sub { font-size: 10.5px; color: var(--txt-muted); margin-top: 4px; } .kpi-positive { color: var(--success); } .kpi-negative { color: var(--danger); } .kpi-neutral { color: var(--txt-primary); } /* Former glow variants → quiet accent top rail */ .kpi-card.glow-purple, .kpi-card.glow-cyan, .kpi-card.glow-orange { box-shadow: var(--shadow-sm); } .kpi-card.glow-purple::before, .kpi-card.glow-cyan::before, .kpi-card.glow-orange::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; } .kpi-card.glow-purple::before { background: var(--accent); } .kpi-card.glow-cyan::before { background: var(--elec); } .kpi-card.glow-orange::before { background: var(--gas); } /* ── Grid helpers ────────────────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .grid-auto { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 16px; } @media (max-width:1100px) { .grid-4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 800px) { .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } } /* ── Filter bar ──────────────────────────────────────────────────────── */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; box-shadow: var(--shadow-sm); } .filter-bar label { font-size: 11px; color: var(--txt-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-right: 4px; font-weight: 600; } /* ── Form controls ───────────────────────────────────────────────────── */ select, input[type=text], input[type=date], input[type=number], input[type=email], input[type=password], textarea { background: var(--bg-input); border: 1px solid var(--border); color: var(--txt-primary); border-radius: var(--radius-sm); padding: 7px 11px; font-size: 13px; font-family: inherit; outline: none; transition: border-color var(--transition), box-shadow var(--transition); -webkit-appearance: none; appearance: none; } select { cursor: pointer; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } select option { background: var(--bg-elevated); color: var(--txt-primary); } select:focus, input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input[type=checkbox], input[type=radio] { accent-color: var(--accent); } /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; border: none; cursor: pointer; transition: all var(--transition); text-decoration: none; font-family: inherit; line-height: 1.3; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-strong); } .btn-secondary { background: var(--bg-card-hover); color: var(--txt-primary); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--border-strong); } .btn-outline { background: transparent; color: var(--txt-secondary); border: 1px solid var(--border); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } .btn-ghost { background: transparent; color: var(--txt-secondary); border: 1px solid transparent; } .btn-ghost:hover { background: var(--bg-card-hover); color: var(--txt-primary); } .btn-danger { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .btn-danger:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); } .btn-sm { padding: 5px 11px; font-size: 12px; } .btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Badge ───────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; } .link-plain { color: inherit; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .link-plain:hover { color: var(--accent); } .link-plain svg { opacity: .4; } .link-plain:hover svg { opacity: .9; } /* Weather analysis expanded in place under its site row. */ .sw-chev { display: inline-flex; transition: transform .15s ease; } .sw-toggle.open .sw-chev { transform: rotate(90deg); } .sw-toggle.open svg { opacity: .9; } /* [hidden] alone loses to the table's own display rules, so be explicit. */ .sw-detail[hidden] { display: none; } .sw-detail > td { background: var(--tint-1); padding: 0; } .sw-panel { padding: 16px 14px 18px; border-left: 2px solid var(--accent); } .badge-cyan { background: var(--elec-soft); color: var(--elec); } .badge-purple { background: var(--accent-soft); color: var(--accent); } .badge-orange { background: var(--gas-soft); color: var(--gas); } .badge-green { background: var(--success-soft); color: var(--success); } .badge-pink { background: rgba(244,114,182,0.13); color: var(--accent-pink); } .badge-gold { background: var(--warning-soft); color: var(--warning); } /* ── Table ───────────────────────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .data-table th { background: var(--bg-card-hover); color: var(--txt-secondary); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; } .data-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--txt-primary); } .data-table tr:hover td { background: var(--bg-card-hover); } .data-table .num { text-align: right; font-variant-numeric: tabular-nums; } .pos { color: var(--success); } .neg { color: var(--danger); } /* ── Chart container ─────────────────────────────────────────────────── */ .chart-container { width: 100%; min-height: 300px; position: relative; } .chart-loading { display: flex; align-items: center; justify-content: center; min-height: 280px; color: var(--txt-muted); font-size: 13px; flex-direction: column; gap: 10px; } /* ── Tabs ────────────────────────────────────────────────────────────── */ .tab-bar { display: flex; gap: 2px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; margin-bottom: 16px; } .tab-btn { flex: 1; text-align: center; padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--txt-muted); transition: all var(--transition); border: none; background: transparent; font-family: inherit; } .tab-btn:hover { color: var(--txt-primary); background: var(--bg-card-hover); } .tab-btn.active { background: var(--accent-soft); color: var(--accent); } /* ── Module sub-navigation (Bill Validation et al.) ──────────────────── */ .sub-nav { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; } .sub-nav a { padding: 6px 14px; border-radius: 18px; font-size: 12px; font-weight: 500; background: transparent; color: var(--txt-secondary); text-decoration: none; border: 1px solid var(--border); transition: all var(--transition); } .sub-nav a:hover { background: var(--bg-card-hover); color: var(--txt-primary); border-color: var(--border-strong); } .sub-nav a.active, .sub-nav a.dash-active { background: var(--accent-soft); color: var(--accent); border-color: var(--border-accent); font-weight: 600; } /* ── Utility selector (Electricity / Gas toggle) ─────────────────────── */ .utility-toggle { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .utility-toggle .ut-btn { flex: 1; padding: 7px 16px; background: transparent; border: none; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--txt-muted); transition: all var(--transition); font-family: inherit; display: inline-flex; align-items: center; gap: 6px; justify-content: center; } .utility-toggle .ut-btn.active-elec { background: var(--elec-soft); color: var(--elec); font-weight: 600; } .utility-toggle .ut-btn.active-gas { background: var(--gas-soft); color: var(--gas); font-weight: 600; } .utility-toggle .ut-btn:hover { color: var(--txt-primary); } /* ── Modal ───────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .modal-overlay.open, .modal-overlay.active { opacity: 1; pointer-events: all; } .modal { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 14px; padding: 28px; width: min(520px, 94vw); max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow); } /* Default for the .modal-box variant used across bill-validation pages. Per-template overrides (same specificity, later in cascade) still win. */ .modal-box { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 14px; padding: 24px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); } .modal-title { font-size: 16px; font-weight: 700; margin-bottom: 18px; color: var(--txt-primary); letter-spacing: -0.2px; } .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 11px; font-weight: 600; color: var(--txt-secondary); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; } .form-group select, .form-group input, .form-group textarea { width: 100%; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* ── Progress / log (terminal aesthetic — fixed colours both themes) ──── */ .log-box { background: #0c0e12; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; font-family: 'SF Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace; font-size: 12px; color: #4ade80; min-height: 120px; max-height: 300px; overflow-y: auto; line-height: 1.6; } /* ── Spinner ─────────────────────────────────────────────────────────── */ .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Toast ───────────────────────────────────────────────────────────── */ .toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .toast { padding: 12px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: #fff; box-shadow: var(--shadow); animation: slideIn 0.25s ease; max-width: 340px; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .toast-success { background: #047857; } .toast-error { background: #b91c1c; } .toast-info { background: #1e40af; } /* ── AI Chat ─────────────────────────────────────────────────────────── */ .chat-window { display: flex; flex-direction: column; height: calc(100vh - var(--header-h) - 180px); min-height: 400px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .chat-msg { max-width: 85%; padding: 12px 16px; border-radius: 12px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; } .chat-msg.user { background: var(--accent-soft); border: 1px solid var(--border-accent); align-self: flex-end; color: var(--txt-primary); } .chat-msg.assistant { background: var(--bg-card-hover); border: 1px solid var(--border); align-self: flex-start; color: var(--txt-primary); } .chat-msg.error { background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); align-self: flex-start; } .chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--bg-card-hover); } .chat-input-row textarea { flex: 1; resize: none; height: 42px; padding: 10px 12px; border-radius: var(--radius-sm); } /* ── Status dots ─────────────────────────────────────────────────────── */ .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot-green { background: var(--success); } .dot-orange { background: var(--warning); } .dot-red { background: var(--danger); } /* ── Section headers ─────────────────────────────────────────────────── */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .section-title { font-size: 13px; font-weight: 600; color: var(--txt-primary); } /* ── Empty state ─────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 40px 20px; color: var(--txt-muted); } .empty-state .empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.45; display: flex; justify-content: center; } .empty-state .empty-icon .icon { width: 40px; height: 40px; } .empty-state p { font-size: 13px; } /* ── Divider ─────────────────────────────────────────────────────────── */ .divider { height: 1px; background: var(--border); margin: 16px 0; } /* ── Semantic text utilities ─────────────────────────────────────────── */ .text-elec { color: var(--elec); } .text-gas { color: var(--gas); } .text-green { color: var(--success); } .text-red { color: var(--danger); } .text-muted { color: var(--txt-muted); } .text-purple { color: var(--accent); } /* ── Utilities ───────────────────────────────────────────────────────── */ .mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .gap-8 { gap: 8px; } .flex { display: flex; align-items: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .w-full { width: 100%; } .hidden { display: none; } /* ══════════════════════════════════════════════════════════════════════════ PRINT / PDF STYLES ══════════════════════════════════════════════════════════════════════════ */ @media print { /* Force white background and black text for readability */ :root, [data-theme="dark"], [data-theme="light"] { --bg-main: #ffffff; --bg-card: #f5f5f5; --txt-primary: #111111; --txt-muted: #555555; } /* Hide chrome that doesn't belong in a PDF */ .sidebar, .topbar, .filter-bar, .utility-toggle, .theme-toggle, #btn-refresh-cache, button[onclick="printDashboard()"], button[onclick="exportKpiData()"], .modebar, .toast-container { display: none !important; } /* Full-width content, no sidebar offset */ .app-layout { display: block !important; } .main-area { margin-left: 0 !important; padding: 16px !important; width: 100% !important; background: #ffffff !important; } .main-content{ padding: 0 !important; } /* Page setup */ html, body { background: #ffffff !important; color: #111 !important; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Cards — light background, visible border */ .card { background: #f8f8f8 !important; border: 1px solid #cccccc !important; box-shadow: none !important; break-inside: avoid; margin-bottom: 16px !important; } /* KPI cards — keep grid, use light colours */ .kpi-card { background: #eeeeee !important; border: 1px solid #cccccc !important; box-shadow: none !important; } .kpi-card-value { color: #111111 !important; } .kpi-card-label, .kpi-card-sub { color: #444444 !important; } .kpi-positive { color: #1a7a3a !important; } .kpi-negative { color: #c0392b !important; } /* Charts — allow page breaks between them */ .chart-container { break-inside: avoid; min-height: 200px !important; } /* Grid layouts stay as-is on wide paper (landscape recommended) */ @page { margin: 15mm; size: A4 landscape; } /* Section titles */ .section-title, .card-title { color: #111 !important; } /* Temperature chart card */ #temp-chart-card { break-before: page; } }