/* ========================================================================== Energy Dashboard — HTML + CSS UI kit -------------------------------------------------------------------------- Theming • Light is the default. Dark is applied with . • assets/js/theme.js sets data-theme before first paint (saved choice → OS preference) and wires every [data-theme-toggle] / [data-theme-set]. • Without JS the OS preference is still honoured via prefers-color-scheme. Interactive patterns used across the app, all CSS-only: • Modals ............ :target () • Toasts ............ :target () • Pagination ........ radio + :has() (.paged > .pg-input[value=N]) • Tabs / wizard ..... radio + :has() (.tabs > .tab-input[value=N]) • Sub-meter tree .... checkbox + :has() (tbody.device .tree-toggle) • Dropdowns .........

• Mobile sidebar .... checkbox hack (#nav-toggle) ========================================================================== */ @property --n { syntax: ""; inherits: false; initial-value: 0; } /* ---------- Theme tokens: light (default) ---------- */ :root { --bg: #f3f4fa; --surface: #ffffff; --surface-2: #f7f8fc; --surface-3: #eef0f8; --surface-sunk: #f1f2f9; --overlay: rgba(24, 27, 52, 0.42); --line: #e7e9f3; --line-strong: #d6daea; --text: #1c2040; --text-2: #4b516f; --muted: #858aa5; --primary: #5b4ff0; --primary-2: #7a6cff; --primary-ink: #4b3fdc; --on-primary: #ffffff; --primary-soft: #efedff; --green: #12a36b; --cyan: #0b9ec2; --blue: #3b7cf6; --violet: #8b5cf6; --amber: #e08a00; --orange: #f06a1d; --rose: #e5486a; --red: #dc2e55; --slate: #64748b; --grad: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); --grad-warm: linear-gradient(135deg, #ffb547 0%, #ff7a8a 100%); --grad-violet: linear-gradient(135deg, #8b7bff 0%, #5fb6ff 100%); --grad-rose: linear-gradient(135deg, #f0607e 0%, #dc2e55 100%); --grad-hero: linear-gradient(150deg, #5b4ff0 0%, #7a5cf7 55%, #9b7bff 100%); --radius: 18px; --radius-sm: 12px; --radius-xs: 10px; --shadow-sm: 0 1px 2px rgba(22, 26, 60, 0.05); --shadow: 0 1px 2px rgba(22, 26, 60, 0.04), 0 10px 28px -16px rgba(22, 26, 60, 0.16); --shadow-lg: 0 30px 70px -24px rgba(22, 26, 60, 0.35); --ring: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); --sidebar-w: 264px; --topbar-h: 72px; --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; color-scheme: light; } /* ---------- Theme tokens: dark ---------- */ :root[data-theme="dark"] { --bg: #0e1120; --surface: #161a2d; --surface-2: #1b2036; --surface-3: #242a44; --surface-sunk: #11152a; --overlay: rgba(4, 6, 16, 0.66); --line: rgba(255, 255, 255, 0.07); --line-strong: rgba(255, 255, 255, 0.13); --text: #eceefb; --text-2: #b5bad6; --muted: #8087a8; --primary: #8577ff; --primary-2: #a495ff; --primary-ink: #b3a8ff; --on-primary: #ffffff; --primary-soft: rgba(133, 119, 255, 0.14); --green: #34d399; --cyan: #22d3ee; --blue: #60a5fa; --violet: #a78bfa; --amber: #fbbf24; --orange: #fb923c; --rose: #fb7185; --red: #f43f5e; --slate: #94a3b8; --grad-hero: linear-gradient(150deg, #3b31b8 0%, #5a3fd6 55%, #7458e8 100%); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 14px 32px -18px rgba(0, 0, 0, 0.7); --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.85); color-scheme: dark; } /* No-JS fallback: follow the OS unless the page was explicitly set to light */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0e1120; --surface: #161a2d; --surface-2: #1b2036; --surface-3: #242a44; --surface-sunk: #11152a; --overlay: rgba(4, 6, 16, 0.66); --line: rgba(255, 255, 255, 0.07); --line-strong: rgba(255, 255, 255, 0.13); --text: #eceefb; --text-2: #b5bad6; --muted: #8087a8; --primary: #8577ff; --primary-2: #a495ff; --primary-ink: #b3a8ff; --primary-soft: rgba(133, 119, 255, 0.14); --green: #34d399; --cyan: #22d3ee; --blue: #60a5fa; --violet: #a78bfa; --amber: #fbbf24; --orange: #fb923c; --rose: #fb7185; --red: #f43f5e; --slate: #94a3b8; --grad-hero: linear-gradient(150deg, #3b31b8 0%, #5a3fd6 55%, #7458e8 100%); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 14px 32px -18px rgba(0, 0, 0, 0.7); --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.85); color-scheme: dark; } } /* ---------- Themes ---------- Three named themes, set by app.js as : daylight — plain light (default light) · aurora — colourful light · midnight — dark Aurora additionally gets (see VIBRANT LIGHT THEME below). */ :root[data-vivid] { --grad-hero: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #c026d3 115%); } /* Daylight = the plain light tokens: white sidebar, topbar and cards, indigo accent */ :root[data-palette="daylight"] { --bg: #f6f7fb; } :root[data-palette="daylight"] body::before { display: none; } :root[data-palette="daylight"] .auth-visual { color: var(--text); background: linear-gradient(160deg, #f1efff 0%, #e9f1ff 100%); border: 1px solid var(--line); } :root[data-palette="daylight"] .auth-visual::before { background-image: radial-gradient(color-mix(in srgb, var(--primary) 22%, transparent) 1px, transparent 1px); } :root[data-palette="daylight"] .auth-visual .brand__logo { background: var(--grad); color: #fff; } :root[data-palette="daylight"] .auth-visual .brand__tag, :root[data-palette="daylight"] .auth-hero p, :root[data-palette="daylight"] .auth-points div { color: var(--text-2); } :root[data-palette="daylight"] .auth-points .ic { color: var(--primary); } :root[data-palette="daylight"] .auth-visual .gradient-text { color: var(--primary); } :root[data-palette="daylight"] .energy-core .ring { border-color: color-mix(in srgb, var(--primary) 25%, transparent); } :root[data-palette="daylight"] .energy-core__center { background: var(--grad); color: #fff; box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary) 10%, transparent), 0 20px 40px -14px color-mix(in srgb, var(--primary) 60%, transparent); } :root[data-palette="daylight"] .float-chip { box-shadow: var(--shadow-lg); border: 1px solid var(--line); } :root[data-palette="daylight"] .auth-wave .w1 { stroke: color-mix(in srgb, var(--primary) 45%, transparent); } :root[data-palette="daylight"] .auth-wave .w2 { stroke: color-mix(in srgb, var(--violet) 40%, transparent); } /* Midnight = the default dark tokens (indigo on deep navy) */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--font); font-size: 14.5px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Smooth colour change when the theme is switched (class added by theme.js for one frame burst) */ html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease !important; } h1, h2, h3, h4, p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; } :focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--primary) 25%, transparent); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 35%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--muted) 55%, transparent); } ::-webkit-scrollbar-track { background: transparent; } .sr-only, .pg-input, .tab-input, .nav-toggle, .tree-toggle { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; pointer-events: none; } /* ---------- Ambient background ---------- */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 520px at 100% -10%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 65%), radial-gradient(700px 480px at -10% 110%, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 65%); } /* ---------- Icons (CSS masks, colour = currentColor) ---------- */ .ic { display: inline-block; flex: none; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -0.2em; } .i-grid { --i: url("data:image/svg+xml,"); } .i-gauge { --i: url("data:image/svg+xml,"); } .i-chart { --i: url("data:image/svg+xml,"); } .i-bell { --i: url("data:image/svg+xml,"); } .i-clock { --i: url("data:image/svg+xml,"); } .i-users { --i: url("data:image/svg+xml,"); } .i-user { --i: url("data:image/svg+xml,"); } .i-user-plus{ --i: url("data:image/svg+xml,"); } .i-shield { --i: url("data:image/svg+xml,"); } .i-settings { --i: url("data:image/svg+xml,"); } .i-bolt { --i: url("data:image/svg+xml,"); } .i-bolt-fill{ --i: url("data:image/svg+xml,"); } .i-battery { --i: url("data:image/svg+xml,"); } .i-rupee { --i: url("data:image/svg+xml,"); } .i-leaf { --i: url("data:image/svg+xml,"); } .i-search { --i: url("data:image/svg+xml,"); } .i-plus { --i: url("data:image/svg+xml,"); } .i-edit { --i: url("data:image/svg+xml,"); } .i-trash { --i: url("data:image/svg+xml,"); } .i-eye { --i: url("data:image/svg+xml,"); } .i-chev-down { --i: url("data:image/svg+xml,"); } .i-chev-left { --i: url("data:image/svg+xml,"); } .i-chev-right { --i: url("data:image/svg+xml,"); } .i-x { --i: url("data:image/svg+xml,"); } .i-logout { --i: url("data:image/svg+xml,"); } .i-building { --i: url("data:image/svg+xml,"); } .i-mail { --i: url("data:image/svg+xml,"); } .i-lock { --i: url("data:image/svg+xml,"); } .i-key { --i: url("data:image/svg+xml,"); } .i-phone { --i: url("data:image/svg+xml,"); } .i-globe { --i: url("data:image/svg+xml,"); } .i-check { --i: url("data:image/svg+xml,"); } .i-filter { --i: url("data:image/svg+xml,"); } .i-download { --i: url("data:image/svg+xml,"); } .i-upload { --i: url("data:image/svg+xml,"); } .i-calendar { --i: url("data:image/svg+xml,"); } .i-alert { --i: url("data:image/svg+xml,"); } .i-menu { --i: url("data:image/svg+xml,"); } .i-cpu { --i: url("data:image/svg+xml,"); } .i-layers { --i: url("data:image/svg+xml,"); } .i-refresh { --i: url("data:image/svg+xml,"); } .i-dots { --i: url("data:image/svg+xml,"); } .i-trend-up { --i: url("data:image/svg+xml,"); } .i-trend-down { --i: url("data:image/svg+xml,"); } .i-activity { --i: url("data:image/svg+xml,"); } .i-thermo { --i: url("data:image/svg+xml,"); } .i-pin { --i: url("data:image/svg+xml,"); } .i-copy { --i: url("data:image/svg+xml,"); } .i-spark { --i: url("data:image/svg+xml,"); } .i-send { --i: url("data:image/svg+xml,"); } .i-plug { --i: url("data:image/svg+xml,"); } .i-wifi { --i: url("data:image/svg+xml,"); } .i-swap { --i: url("data:image/svg+xml,"); } .i-sun { --i: url("data:image/svg+xml,"); } .i-moon { --i: url("data:image/svg+xml,"); } .i-sunset { --i: url("data:image/svg+xml,"); } .i-file { --i: url("data:image/svg+xml,"); } .i-sliders { --i: url("data:image/svg+xml,"); } .i-card { --i: url("data:image/svg+xml,"); } .i-arrow-right { --i: url("data:image/svg+xml,"); } .i-arrow-left { --i: url("data:image/svg+xml,"); } .i-monitor { --i: url("data:image/svg+xml,"); } .i-palette { --i: url("data:image/svg+xml,"); } /* ---------- Typography helpers ---------- */ .gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .mono { font-family: var(--mono); letter-spacing: -0.01em; } .muted { color: var(--muted); } .text-2 { color: var(--text-2); } .tc-green { color: var(--green); } .tc-cyan { color: var(--cyan); } .tc-amber { color: var(--amber); } .tc-rose { color: var(--rose); } .tc-violet { color: var(--violet); } .tc-blue { color: var(--blue); } .tc-primary { color: var(--primary); } .nowrap { white-space: nowrap; } .small { font-size: 12.5px; } .eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } /* ========================================================================== APP SHELL ========================================================================== */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; } /* ---------- Sidebar ---------- */ .sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 16px; padding: 20px 14px 16px; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; z-index: 40; } .brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 6px; } .brand__logo { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--grad); color: var(--on-primary); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--primary) 70%, transparent); } .brand__logo .ic { width: 21px; height: 21px; } .brand__name { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; line-height: 1.15; } .brand__tag { font-size: 11px; color: var(--muted); letter-spacing: 0.02em; } .tenant-switch { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); transition: border-color .2s, background .2s; } .tenant-switch:hover { border-color: var(--line-strong); background: var(--surface-3); } .tenant-switch__logo { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 12px; background: var(--grad-violet); color: #fff; } .tenant-switch__meta { flex: 1; min-width: 0; line-height: 1.25; } .tenant-switch__meta strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tenant-switch__meta span { font-size: 11px; color: var(--muted); font-family: var(--mono); } .nav { display: flex; flex-direction: column; gap: 2px; } .nav__section { margin: 14px 12px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); opacity: .8; } .nav__link { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; color: var(--text-2); font-weight: 600; font-size: 14px; transition: color .2s, background .2s; } .nav__link .ic { width: 19px; height: 19px; opacity: .85; } .nav__link:hover { color: var(--text); background: var(--surface-2); } .nav__link.is-active { color: var(--primary-ink); background: var(--primary-soft); } .nav__link.is-active .ic { opacity: 1; color: var(--primary); } .nav__link.is-active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 6px 6px 0; background: var(--primary); } .nav__badge { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 99px; font-style: normal; font-size: 11px; font-weight: 700; text-align: center; background: color-mix(in srgb, var(--rose) 14%, transparent); color: var(--rose); } .nav__badge--green { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); } .sidebar__live { position: relative; margin-top: auto; overflow: hidden; isolation: isolate; padding: 16px; border-radius: 16px; background: var(--grad-hero); color: #fff; box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--primary) 80%, transparent); } .sidebar__live::after { content: ""; position: absolute; right: -40px; top: -40px; z-index: -1; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, .12); } .sidebar__live .eyebrow { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); } .sidebar__live .muted { color: rgba(255,255,255,.72); } .sidebar__live-value { margin: 6px 0 2px; font-size: 26px; font-weight: 800; font-family: var(--mono); letter-spacing: -0.03em; } .sidebar__live-value small { font-size: 13px; color: rgba(255,255,255,.75); font-weight: 600; } .eq { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: 10px; } .eq span { flex: 1; border-radius: 3px 3px 1px 1px; background: rgba(255,255,255,.75); animation: eq 1.4s ease-in-out infinite alternate; transform-origin: bottom; } .eq span:nth-child(2n) { animation-duration: 1.1s; background: rgba(255,255,255,.5); } .eq span:nth-child(3n) { animation-duration: 1.7s; } .eq span:nth-child(4n+1) { animation-delay: -.6s; } .eq span:nth-child(5n) { animation-delay: -.3s; } @keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } } .sidebar__foot { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 0; font-size: 11.5px; color: var(--muted); } /* ---------- Main + topbar ---------- */ .main { min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: var(--topbar-h); padding: 0 28px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); } .burger { display: none; } .topbar__crumbs { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .topbar__crumbs small { color: var(--muted); font-size: 12px; white-space: nowrap; } .topbar__crumbs strong { font-size: 16px; white-space: nowrap; } .search { position: relative; flex: 1; max-width: 400px; margin-left: auto; min-width: 0; } .search .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); } .search input { width: 100%; height: 42px; padding: 0 64px 0 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; } .search input::placeholder { color: var(--muted); } .search input:focus { border-color: color-mix(in srgb, var(--primary) 55%, transparent); box-shadow: var(--ring); background: var(--surface); } .search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 2px 7px; border-radius: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line-strong); background: var(--surface); } .topbar__actions { display: flex; align-items: center; gap: 10px; } .live-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); } .icon-btn { position: relative; display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); cursor: pointer; list-style: none; transition: color .2s, border-color .2s, background .2s; } .icon-btn::-webkit-details-marker { display: none; } .icon-btn:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, transparent); background: var(--primary-soft); } .icon-btn .ic { width: 19px; height: 19px; } .icon-btn .ping { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 2px var(--surface); } .icon-btn .ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rose); animation: ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; } @keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } } /* Theme toggle — shows the moon in light mode, the sun in dark mode */ .theme-toggle .ic { transition: transform .5s cubic-bezier(.3,1.4,.5,1); } .theme-toggle:hover .ic { transform: rotate(-25deg); } .theme-toggle .i-sun { display: none; } :root[data-theme="dark"] .theme-toggle .i-sun { display: inline-block; } :root[data-theme="dark"] .theme-toggle .i-moon { display: none; } .theme-toggle--float { position: fixed; top: 20px; right: 20px; z-index: 50; box-shadow: var(--shadow); } /* Dropdown (details) */ .dropdown { position: relative; } .dropdown > summary { list-style: none; cursor: pointer; } .dropdown > summary::-webkit-details-marker { display: none; } .dropdown__panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 300px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); animation: pop .18s ease-out; transform-origin: top right; } .dropdown__panel--wide { width: 360px; } .dropdown__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 8px; } .dropdown__head strong { font-size: 14px; } .dropdown__item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; font-size: 13.5px; color: var(--text-2); transition: background .15s, color .15s; } .dropdown__item:hover { background: var(--surface-2); color: var(--text); } .dropdown__item .ic { width: 17px; height: 17px; } .dropdown__item--danger { color: var(--rose); } .dropdown__item--danger:hover { color: var(--rose); background: color-mix(in srgb, var(--rose) 8%, transparent); } .dropdown__sep { height: 1px; margin: 6px 4px; background: var(--line); } @keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } } .user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, background .2s; } .user-chip:hover { border-color: var(--line-strong); background: var(--surface-2); } .user-chip__meta { line-height: 1.2; } .user-chip__meta strong { display: block; font-size: 13px; } .user-chip__meta small { font-size: 11.5px; color: var(--muted); } .user-chip .ic { width: 14px; height: 14px; color: var(--muted); } .notif { display: flex; gap: 12px; padding: 10px; border-radius: 10px; transition: background .15s; } .notif:hover { background: var(--surface-2); } .notif__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; } .notif__icon .ic { width: 17px; height: 17px; } .notif p { font-size: 13px; color: var(--text); line-height: 1.4; } .notif small { font-size: 11.5px; color: var(--muted); } /* ---------- Page ---------- */ .page { flex: 1; padding: 26px 28px; display: flex; flex-direction: column; gap: 22px; } .page > * { animation: rise .55s cubic-bezier(.2, .8, .2, 1) both; } .page > *:nth-child(2) { animation-delay: .05s; } .page > *:nth-child(3) { animation-delay: .1s; } .page > *:nth-child(4) { animation-delay: .15s; } .page > *:nth-child(5) { animation-delay: .2s; } .page > *:nth-child(n+6) { animation-delay: .25s; } @keyframes rise { from { opacity: 0; transform: translateY(12px); } } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .page-title { font-size: clamp(22px, 2.3vw, 28px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; } .page-sub { margin-top: 6px; color: var(--muted); } .page-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .footer { padding: 18px 28px 26px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* ---------- Grid ---------- */ .grid { display: grid; gap: 20px; } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grid-main-r { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .span-2 { grid-column: span 2; } .stack { display: flex; flex-direction: column; gap: 20px; } .row { display: flex; align-items: center; gap: 10px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .wrap { flex-wrap: wrap; } /* ========================================================================== COMPONENTS ========================================================================== */ /* ---------- Card ---------- */ .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 0; flex-wrap: wrap; } .card__title { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; } .card__title .ic { color: var(--primary); } .card__sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .card__body { padding: 18px 22px 22px; } .card__body--flush { padding: 14px 0 0; } .card__foot { padding: 14px 22px; border-top: 1px solid var(--line); } /* ---------- KPI (pastel stat tiles) ---------- */ .kpi { --c: var(--primary); position: relative; isolation: isolate; overflow: hidden; padding: 18px 20px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--c) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 16%, var(--line)); box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; } .kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .kpi--green { --c: var(--green); } .kpi--cyan { --c: var(--cyan); } .kpi--amber { --c: var(--amber); } .kpi--violet { --c: var(--violet); } .kpi--rose { --c: var(--rose); } .kpi--blue { --c: var(--blue); } .kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kpi__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--surface)); } .kpi__icon .ic { width: 20px; height: 20px; } .kpi__label { margin-top: 14px; color: var(--text-2); font-size: 13px; font-weight: 600; } .kpi__value { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; font-family: var(--mono); font-size: 28px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.15; } .kpi__value small { font-family: var(--font); font-size: 13.5px; color: var(--muted); font-weight: 600; letter-spacing: 0; } .kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); } .kpi__spark { position: absolute; right: 0; top: 56px; width: 46%; height: 48px; opacity: .9; pointer-events: none; z-index: -1; } .kpi__spark path { fill: none; stroke: var(--c); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s .4s ease forwards; } .kpi__spark path.fill { stroke: none; fill: color-mix(in srgb, var(--c) 12%, transparent); stroke-dasharray: none; animation: fade-in 1.4s .8s both; } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fade-in { from { opacity: 0; } } .count { animation: count 2s cubic-bezier(.2,.8,.2,1) forwards; counter-reset: n var(--n); } .count::after { content: counter(n); } @keyframes count { from { --n: 0; } to { --n: var(--to); } } .trend { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-weight: 700; font-size: 11.5px; } .trend .ic { width: 13px; height: 13px; } .trend--up { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); } .trend--down { color: var(--rose); background: color-mix(in srgb, var(--rose) 12%, transparent); } .trend--flat { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); } /* mini stat (inline small KPI) */ .stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; } .stat__icon { --c: var(--primary); display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); } .stat__icon .ic { width: 20px; height: 20px; } .stat strong { display: block; font-family: var(--mono); font-size: 22px; letter-spacing: -0.03em; line-height: 1.2; } .stat span { font-size: 12.5px; color: var(--muted); } /* ---------- Buttons ---------- */ .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 700; font-size: 13.5px; white-space: nowrap; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); cursor: pointer; transition: transform .2s, box-shadow .25s, background .2s, border-color .2s, color .2s, filter .2s; } .btn .ic { width: 17px; height: 17px; } .btn:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--primary) 30%, var(--line-strong)); } .btn:active { transform: scale(.98); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn--primary { color: var(--on-primary); border: 0; background: var(--grad); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--primary) 85%, transparent); } .btn--primary:hover { background: var(--grad); filter: brightness(1.07); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--primary) 90%, transparent); } .btn--danger { color: #fff; border: 0; background: var(--grad-rose); box-shadow: 0 8px 20px -12px var(--rose); } .btn--danger:hover { background: var(--grad-rose); filter: brightness(1.06); } .btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); } .btn--ghost:hover { background: var(--surface-2); border-color: var(--line); color: var(--text); } .btn--soft { color: var(--primary-ink); background: var(--primary-soft); border-color: transparent; } .btn--soft:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); border-color: transparent; } .btn--sm { height: 36px; padding: 0 13px; font-size: 12.5px; border-radius: 10px; } .btn--lg { height: 50px; padding: 0 24px; font-size: 15px; border-radius: 13px; } .btn--block { width: 100%; } .btn--icon { width: 42px; padding: 0; } /* ---------- Badges / chips ---------- */ .badge { --c: var(--muted); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); } .badge--success { --c: var(--green); } .badge--warn { --c: var(--amber); } .badge--danger { --c: var(--rose); } .badge--info { --c: var(--cyan); } .badge--violet { --c: var(--violet); } .badge--blue { --c: var(--blue); } .badge--orange { --c: var(--orange); } .badge--primary { --c: var(--primary); } .badge .ic { width: 13px; height: 13px; } .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c, currentColor); flex: none; } .dot--live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; } .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); cursor: pointer; white-space: nowrap; transition: all .2s; } .chip:hover { color: var(--text); border-color: var(--line-strong); } .chip.is-active { color: var(--on-primary); background: var(--primary); border-color: transparent; } .chip .ic { width: 14px; height: 14px; } .chip small { font-family: var(--mono); opacity: .75; } .tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; font-family: var(--mono); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); } /* ---------- Avatars ---------- */ .avatar { --g: var(--grad); display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-weight: 800; font-size: 12.5px; color: #fff; background: var(--g); } .avatar--lg { width: 64px; height: 64px; font-size: 20px; } .avatar--sm { width: 28px; height: 28px; font-size: 10.5px; } .av-1 { --g: linear-gradient(135deg, #6d5dfc, #9b7bff); } .av-2 { --g: linear-gradient(135deg, #3b7cf6, #22b8e0); } .av-3 { --g: linear-gradient(135deg, #f7a531, #f0607e); } .av-4 { --g: linear-gradient(135deg, #14b8a6, #3b7cf6); } .av-5 { --g: linear-gradient(135deg, #ec5f9b, #a364f5); } .av-6 { --g: linear-gradient(135deg, #22b573, #14b8a6); } .avatar-stack { display: flex; } .avatar-stack .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); } .avatar-stack .avatar:first-child { margin-left: 0; } .avatar-stack .more { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border-radius: 50%; font-size: 10.5px; font-weight: 700; background: var(--surface-3); color: var(--text-2); box-shadow: 0 0 0 2px var(--surface); } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; } .form-grid .full { grid-column: 1 / -1; } .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .field > label, .label { font-size: 12.5px; font-weight: 700; color: var(--text-2); letter-spacing: .01em; } .field > label .req, .req { color: var(--rose); } .label-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .label-row a { font-size: 12.5px; font-weight: 600; color: var(--primary); } .input { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; } .input::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); } .input:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--line-strong)); } .input:focus { border-color: var(--primary); box-shadow: var(--ring); } .input[readonly] { background: var(--surface-2); } .input:user-invalid { border-color: var(--rose); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rose) 14%, transparent); } /* Browser autofill: keep the theme surface instead of Chrome's yellow/blue */ .input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: 0 0 0 1000px var(--surface-2) inset; transition: background-color 99999s ease-out 0s; } .input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--surface-2) inset, var(--ring); } textarea.input { height: auto; min-height: 92px; padding: 12px 14px; resize: vertical; } select.input { appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; } select.input option { background: var(--surface); color: var(--text); } .input--sm { height: 38px; font-size: 13px; border-radius: 10px; } .input-icon { position: relative; } .input-icon > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; transition: color .2s; } .input-icon > .input { padding-left: 44px; } .input-icon:focus-within > .ic { color: var(--primary); } .input-icon > .suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); font-family: var(--mono); } .input-group { display: flex; } .input-group .input { border-radius: 12px 0 0 12px; min-width: 0; } .input-group .addon { display: grid; place-items: center; padding: 0 14px; border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 12px 12px 0; background: var(--surface-2); color: var(--muted); font-size: 13px; font-family: var(--mono); white-space: nowrap; } .hint { font-size: 12px; color: var(--muted); } .hint--ok { color: var(--green); } /* Checkbox + radio */ .check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--text-2); user-select: none; } .check input { appearance: none; flex: none; width: 19px; height: 19px; margin: 0; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; transition: all .2s; } .check input::after { content: ""; width: 11px; height: 11px; background: #fff; transform: scale(0); transition: transform .2s cubic-bezier(.3,1.6,.6,1); -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; } .check input:checked { background: var(--primary); border-color: transparent; } .check input:checked::after { transform: scale(1); } .check input:focus-visible { box-shadow: var(--ring); } .check input[type="radio"] { border-radius: 50%; } .check input[type="radio"]::after { -webkit-mask: none; mask: none; border-radius: 50%; width: 8px; height: 8px; } .check a { color: var(--primary); font-weight: 600; } /* Switch */ .switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-size: 13.5px; color: var(--text-2); } .switch input { appearance: none; flex: none; position: relative; width: 44px; height: 24px; margin: 0; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--line-strong); cursor: pointer; transition: background .25s, box-shadow .25s; } .switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .3s cubic-bezier(.3,1.4,.6,1); } .switch input:checked { background: var(--primary); border-color: transparent; } .switch input:checked::after { transform: translateX(20px); } .switch input:focus-visible { box-shadow: var(--ring); } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px dashed var(--line); } .setting-row:last-child { border-bottom: 0; } .setting-row strong { display: block; font-size: 14px; } .setting-row span { font-size: 12.5px; color: var(--muted); } /* Radio card (plans, roles, theme…) */ .radio-cards { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .radio-card { position: relative; cursor: pointer; } .radio-card input { position: absolute; opacity: 0; pointer-events: none; } .radio-card__body { display: block; height: 100%; padding: 18px; border-radius: var(--radius-sm); background: var(--surface); border: 1.5px solid var(--line); transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; } .radio-card:hover .radio-card__body { border-color: var(--line-strong); transform: translateY(-2px); } .radio-card input:checked + .radio-card__body { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); box-shadow: var(--ring); } .radio-card input:focus-visible + .radio-card__body { box-shadow: var(--ring); } .radio-card__body .tick { float: right; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: transparent; transition: all .2s; } .radio-card__body .tick .ic { width: 12px; height: 12px; } .radio-card input:checked + .radio-card__body .tick { background: var(--primary); border-color: transparent; color: #fff; } .radio-card h4 { font-size: 15px; } .radio-card .price { margin: 10px 0 4px; font-family: var(--mono); font-size: 24px; font-weight: 600; letter-spacing: -.03em; } .radio-card .price small { font-family: var(--font); font-size: 12px; color: var(--muted); } .radio-card ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 12.5px; color: var(--text-2); } .radio-card li::before { content: "✓"; margin-right: 8px; color: var(--green); font-weight: 800; } .ribbon { position: absolute; top: -10px; right: 14px; padding: 2px 10px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--grad-warm); color: #fff; } /* Theme preview (Settings → Appearance): mini page with sidebar + card, coloured by .pal-* vars */ .theme-swatch { display: grid; grid-template-columns: 28% 1fr; height: 86px; margin-bottom: 12px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--s-bg); } .theme-swatch i { display: block; } .theme-swatch i:first-child { background: var(--s-side); } .theme-swatch i:last-child { margin: 12px; border-radius: 6px; background: var(--s-card); box-shadow: inset 0 16px 0 var(--s-accent); } /* Upload */ .dropzone { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--radius-sm); border: 1.5px dashed var(--line-strong); background: var(--surface-2); cursor: pointer; transition: border-color .2s, background-color .2s; } .dropzone:hover { border-color: var(--primary); background-color: var(--primary-soft); } .dropzone input { display: none; } /* ---------- Toolbar ---------- */ .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 18px 22px 0; } .toolbar .search { margin-left: 0; max-width: 300px; flex: 1 1 220px; } .toolbar .search input { height: 38px; font-size: 13px; padding-right: 14px; } .toolbar .spacer { flex: 1; } .toolbar select.input { width: auto; min-width: 140px; } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; margin-top: 14px; -webkit-overflow-scrolling: touch; } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } .table th { padding: 11px 16px; text-align: left; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .table th:first-child, .table td:first-child { padding-left: 22px; } .table th:last-child, .table td:last-child { padding-right: 22px; } .table td { padding: 13px 16px; white-space: nowrap; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text-2); } .table tbody tr { transition: background .2s; } .table tbody tr:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); } .table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); } .table td strong { color: var(--text); font-weight: 700; } .table .num { font-family: var(--mono); text-align: right; white-space: nowrap; color: var(--text); } .table th.num { text-align: right; font-family: var(--font); } .table .center { text-align: center; } .table .check-col { width: 44px; } .table [data-page] tr, .table tr[data-page] { animation: row-in .45s cubic-bezier(.2,.8,.2,1) both; } .table td small { white-space: normal; } @keyframes row-in { from { opacity: 0; transform: translateX(-6px); } } .cell-user { display: flex; align-items: center; gap: 12px; min-width: 200px; } .cell-user strong { display: block; font-size: 13.5px; line-height: 1.3; } .cell-user small { display: block; font-size: 12px; color: var(--muted); } .actions { display: inline-flex; align-items: center; gap: 6px; } .act { --c: var(--text-2); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); transition: all .2s; } .act .ic { width: 15px; height: 15px; } .act:hover { color: #fff; background: var(--c); box-shadow: 0 6px 14px -6px var(--c); } .act--edit { --c: var(--blue); } .act--del { --c: var(--rose); } .act--view { --c: var(--primary); } .act--ok { --c: var(--green); } .bar { position: relative; height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; min-width: 80px; } .bar > span { --c: var(--primary); position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); border-radius: inherit; background: var(--c); animation: grow-x 1.2s cubic-bezier(.2,.8,.2,1) both; transform-origin: left; } .bar--amber > span { --c: var(--amber); } .bar--rose > span { --c: var(--rose); } .bar--cyan > span { --c: var(--cyan); } .bar--violet > span { --c: var(--violet); } .bar--green > span { --c: var(--green); } @keyframes grow-x { from { transform: scaleX(0); } } .bar-cell { display: flex; align-items: center; gap: 10px; } .bar-cell .bar { flex: 1; } .bar-cell small { font-family: var(--mono); font-size: 12px; color: var(--muted); min-width: 34px; text-align: right; } /* ---------- CSS-only pagination ---------- */ .paged:has(> .pg-input[value="1"]:checked) [data-page]:not([data-page="1"]), .paged:has(> .pg-input[value="2"]:checked) [data-page]:not([data-page="2"]), .paged:has(> .pg-input[value="3"]:checked) [data-page]:not([data-page="3"]), .paged:has(> .pg-input[value="4"]:checked) [data-page]:not([data-page="4"]), .paged:has(> .pg-input[value="5"]:checked) [data-page]:not([data-page="5"]) { display: none; } .pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 22px 18px; font-size: 13px; color: var(--muted); } .pager__info strong { color: var(--text); font-family: var(--mono); font-weight: 600; } .pager__size { display: flex; align-items: center; gap: 8px; } .pager__size select.input { height: 34px; width: auto; padding: 0 34px 0 12px; font-size: 12.5px; border-radius: 9px; background-position: right 10px center; } .pager__nav { display: flex; align-items: center; gap: 6px; } .pager__nav label, .pager__nav .pg-btn { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-weight: 700; font-family: var(--mono); font-size: 12.5px; cursor: pointer; transition: all .2s; } .pager__nav label:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); } .pager__nav .pg-btn.is-disabled, .pager__nav .pg-btn:disabled { opacity: .4; cursor: not-allowed; } .pager__nav button.pg-btn:not(:disabled):hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); } .pager__nav .pg-btn.is-current { color: var(--on-primary); background: var(--primary); border-color: transparent; } /* Disabled actions (e.g. admin-only for non-admins) and copy feedback */ .is-disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: auto; filter: grayscale(.4); } .btn--icon.is-copied { color: var(--green); border-color: var(--green); } /* "Demo mode" note on the login page */ .demo-note { margin-top: 22px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--primary) 40%, var(--line)); background: color-mix(in srgb, var(--primary) 4%, transparent); font-size: 13px; color: var(--text-2); } .demo-note summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-weight: 700; color: var(--primary-ink); list-style: none; } .demo-note summary::-webkit-details-marker { display: none; } .demo-note p { padding: 0 14px 12px; line-height: 1.7; } .demo-note a { color: var(--primary); font-weight: 700; } .demo-note + .auth-foot { margin-top: 18px; } /* Demo credentials + Autofill (login / admin sign-in) */ .demo-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding: 12px 14px; border-radius: 12px; background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); font-size: 13px; color: var(--text-2); } .demo-hint .ic { color: var(--primary); } .demo-hint + .demo-note { margin-top: 10px; } /* Show / hide password button inside .input-icon */ .input-icon > .input--pw { padding-right: 70px; } .pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--primary); cursor: pointer; } .pw-toggle:hover { background: var(--primary-soft); } /* Awaiting approval */ .org-ref { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 22px; padding: 6px 14px; border-radius: 99px; font-size: 13px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); } .org-ref .ic { color: var(--primary); } .progress-steps { display: flex; justify-content: center; gap: 0; margin: 4px 0 24px; padding: 0; list-style: none; } .progress-steps li { position: relative; flex: 1; max-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); } .progress-steps li + li::before { content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px; background: var(--line-strong); z-index: 0; } .progress-steps li.is-done + li::before, .progress-steps li.is-done + li.is-done::before, .progress-steps li.is-done + li.is-current::before { background: var(--green); } .progress-steps li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-family: var(--mono); background: var(--surface); border: 2px solid var(--line-strong); color: var(--muted); } .progress-steps li > span .ic { width: 16px; height: 16px; } .progress-steps li.is-done { color: var(--text); } .progress-steps li.is-done > span { background: var(--green); border-color: var(--green); color: #fff; } .progress-steps li.is-current { color: var(--amber); } .progress-steps li.is-current > span { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber) 15%, transparent); } /* ---------- Sign-in pages: register, verify email, approval, reset ---------- */ .field-error { display: none; font-size: 12px; font-weight: 600; color: var(--rose); } .field-error.is-shown { display: block; } .input.is-error, .otp input.is-error { border-color: var(--rose); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rose) 12%, transparent); } .input-icon:has(.input.is-error) > .ic { color: var(--rose); } .strength--scored span { background: var(--surface-3); } .strength--scored[data-strength="1"] span:nth-child(-n+1) { background: var(--rose); } .strength--scored[data-strength="2"] span:nth-child(-n+2) { background: var(--amber); } .strength--scored[data-strength="3"] span:nth-child(-n+3) { background: var(--blue); } .strength--scored[data-strength="4"] span { background: var(--green); } .strength-label { font-size: 11.5px; font-weight: 700; color: var(--muted); min-height: 1em; } .auth-icon { width: 56px; height: 56px; border-radius: 18px; margin-bottom: 18px; } .auth-icon .ic { width: 26px; height: 26px; } .auth-icon--round { border-radius: 50%; margin-left: auto; margin-right: auto; width: 64px; height: 64px; } .org-id-box { display: grid; justify-items: center; gap: 10px; margin: 4px 0 18px; padding: 20px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--primary) 40%, transparent); background: var(--primary-soft); } .org-id-box__value { font-size: 22px; font-weight: 800; letter-spacing: .12em; color: var(--primary-ink); word-break: break-all; } .org-id-box__value:not(.mono) { font-size: 17px; letter-spacing: 0; } .resend-row { margin: 0 0 20px; text-align: center; font-size: 13px; color: var(--muted); } .resend-row button { font-weight: 700; color: var(--primary); cursor: pointer; } .resend-row button:hover { text-decoration: underline; } .resend-row button:disabled { opacity: .6; cursor: default; text-decoration: none; } .preview-badge { display: flex; width: max-content; align-items: center; gap: 6px; margin: 0 0 14px; padding: 4px 12px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); } .preview-badge .ic { width: 13px; height: 13px; } .auth-feature-list { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; } .auth-feature-list li { display: flex; align-items: center; gap: 10px; } .auth-feature-list .ic { width: 18px; height: 18px; color: #ffd98a; } :root[data-palette="daylight"] .auth-feature-list li { color: var(--text-2); } :root[data-palette="daylight"] .auth-feature-list .ic { color: var(--green); } .next-steps { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; } .org-summary { margin: 0 0 18px; padding: 16px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); text-align: left; font-size: 13px; } .auth-card > .demo-hint { margin-top: 18px; } /* Control Center */ .empty { display: grid; place-items: center; gap: 8px; padding: 36px 16px; color: var(--muted); text-align: center; } .empty .ic { width: 28px; height: 28px; color: var(--green); } .table tr.is-muted td { opacity: .65; } .btn.tc-rose { color: var(--rose); } .btn.tc-rose:hover { background: color-mix(in srgb, var(--rose) 8%, transparent); } .pager__nav .ic { width: 15px; height: 15px; } .pager [data-when] { display: none !important; } .paged:has(> .pg-input[value="1"]:checked) .pager [data-when="1"], .paged:has(> .pg-input[value="2"]:checked) .pager [data-when="2"], .paged:has(> .pg-input[value="3"]:checked) .pager [data-when="3"], .paged:has(> .pg-input[value="4"]:checked) .pager [data-when="4"], .paged:has(> .pg-input[value="5"]:checked) .pager [data-when="5"] { display: inline-grid !important; } .paged:has(> .pg-input[value="1"]:checked) .pager__nav label[data-p="1"], .paged:has(> .pg-input[value="2"]:checked) .pager__nav label[data-p="2"], .paged:has(> .pg-input[value="3"]:checked) .pager__nav label[data-p="3"], .paged:has(> .pg-input[value="4"]:checked) .pager__nav label[data-p="4"], .paged:has(> .pg-input[value="5"]:checked) .pager__nav label[data-p="5"] { color: var(--on-primary); background: var(--primary); border-color: transparent; } .paged:has(> .pg-input:focus-visible) .pager__nav { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 4px; border-radius: 12px; } /* ---------- CSS-only tabs ---------- */ .tabs:has(> .tab-input[value="1"]:checked) > .tab-panel:not([data-tab="1"]), .tabs:has(> .tab-input[value="2"]:checked) > .tab-panel:not([data-tab="2"]), .tabs:has(> .tab-input[value="3"]:checked) > .tab-panel:not([data-tab="3"]), .tabs:has(> .tab-input[value="4"]:checked) > .tab-panel:not([data-tab="4"]), .tabs:has(> .tab-input[value="5"]:checked) > .tab-panel:not([data-tab="5"]), .tabs:has(> .tab-input[value="6"]:checked) > .tab-panel:not([data-tab="6"]), .tabs:has(> .tab-input[value="7"]:checked) > .tab-panel:not([data-tab="7"]), .tabs:has(> .tab-input[value="8"]:checked) > .tab-panel:not([data-tab="8"]) { display: none; } .tab-panel { animation: rise .45s cubic-bezier(.2,.8,.2,1) both; } .tab-list { display: inline-flex; gap: 4px; padding: 5px; border-radius: 13px; background: var(--surface-sunk); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; } .tab-list::-webkit-scrollbar { display: none; } .tab-list label { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; transition: all .25s; } .tab-list label .ic { width: 16px; height: 16px; } .tab-list label:hover { color: var(--text); } .tabs:has(> .tab-input[value="1"]:checked) > .tab-list label[data-t="1"], .tabs:has(> .tab-input[value="2"]:checked) > .tab-list label[data-t="2"], .tabs:has(> .tab-input[value="3"]:checked) > .tab-list label[data-t="3"], .tabs:has(> .tab-input[value="4"]:checked) > .tab-list label[data-t="4"], .tabs:has(> .tab-input[value="5"]:checked) > .tab-list label[data-t="5"], .tabs:has(> .tab-input[value="6"]:checked) > .tab-list label[data-t="6"], .tabs:has(> .tab-input[value="7"]:checked) > .tab-list label[data-t="7"], .tabs:has(> .tab-input[value="8"]:checked) > .tab-list label[data-t="8"] { color: var(--primary-ink); background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); } .tab-list--block { display: flex; width: 100%; } .tab-list--block label { flex: 1; justify-content: center; } .tabs:has(> .tab-input:focus-visible) > .tab-list { box-shadow: var(--ring); } /* Vertical tab list (settings) */ .tabs--side { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; } .tabs--side > .tab-list { flex-direction: column; position: sticky; top: calc(var(--topbar-h) + 20px); padding: 8px; background: var(--surface); } .tabs--side > .tab-list label { height: 44px; justify-content: flex-start; } .tabs--side:has(> .tab-input[value="1"]:checked) > .tab-list label[data-t="1"], .tabs--side:has(> .tab-input[value="2"]:checked) > .tab-list label[data-t="2"], .tabs--side:has(> .tab-input[value="3"]:checked) > .tab-list label[data-t="3"], .tabs--side:has(> .tab-input[value="4"]:checked) > .tab-list label[data-t="4"], .tabs--side:has(> .tab-input[value="5"]:checked) > .tab-list label[data-t="5"], .tabs--side:has(> .tab-input[value="6"]:checked) > .tab-list label[data-t="6"], .tabs--side:has(> .tab-input[value="7"]:checked) > .tab-list label[data-t="7"], .tabs--side:has(> .tab-input[value="8"]:checked) > .tab-list label[data-t="8"] { background: var(--primary-soft); box-shadow: none; } /* ---------- Modals (:target) ---------- */ .modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s ease, visibility .3s; } .modal:target { visibility: visible; opacity: 1; pointer-events: auto; } .modal__backdrop { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: default; } .modal__dialog { position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); transform: translateY(24px) scale(.97); transition: transform .4s cubic-bezier(.2,1.2,.3,1); overflow: hidden; } .modal:target .modal__dialog { transform: none; } .modal__dialog--lg { width: min(820px, 100%); } .modal__dialog--xl { width: min(1000px, 100%); } .modal__dialog--sm { width: min(440px, 100%); } .modal__head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); } .modal__head h3 { font-size: 18px; letter-spacing: -.02em; } .modal__head p { font-size: 13px; color: var(--muted); margin-top: 2px; } .modal__icon { --c: var(--primary); display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); } .modal__icon .ic { width: 21px; height: 21px; } .modal__icon--rose { --c: var(--rose); } .modal__icon--cyan { --c: var(--cyan); } .modal__icon--violet { --c: var(--violet); } .modal__icon--amber { --c: var(--amber); } .modal__close { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); border: 1px solid var(--line); transition: all .2s; flex: none; } .modal__close:hover { color: var(--text); transform: rotate(90deg); border-color: var(--line-strong); } .modal__body { padding: 20px 24px; overflow-y: auto; } .modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; } .modal__foot .left { margin-right: auto; } .confirm { text-align: center; padding: 30px 28px 10px; } .confirm .modal__icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; } .confirm .modal__icon .ic { width: 28px; height: 28px; } .confirm h3 { font-size: 19px; } .confirm p { margin-top: 8px; color: var(--muted); font-size: 13.5px; } .form-section { margin: 4px 0 12px; padding-top: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; } .form-section::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ---------- Toasts (:target, or .is-shown from theme.js) ---------- */ .toast { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: flex; align-items: center; gap: 12px; min-width: 300px; max-width: calc(100vw - 48px); padding: 14px 16px 16px; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateY(160%); opacity: 0; pointer-events: none; } .toast:target, .toast.is-shown { animation: toast 4s cubic-bezier(.2,.9,.3,1.1) forwards; } .toast__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); flex: none; } .toast--danger .toast__icon { background: color-mix(in srgb, var(--rose) 14%, transparent); color: var(--rose); } .toast strong { display: block; font-size: 14px; } .toast span { font-size: 12.5px; color: var(--muted); } .toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--green); transform-origin: left; } .toast--danger::after { background: var(--rose); } .toast:target::after, .toast.is-shown::after { animation: shrink 3.4s .3s linear forwards; } @keyframes toast { 0% { transform: translateY(160%); opacity: 0; } 8%, 88% { transform: none; opacity: 1; pointer-events: auto; } 100% { transform: translateY(160%); opacity: 0; } } @keyframes shrink { to { transform: scaleX(0); } } /* ---------- Charts ---------- */ .legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--text-2); } .legend span { display: inline-flex; align-items: center; gap: 8px; } .legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); } .legend i.line { height: 3px; width: 16px; border-radius: 2px; } .legend i.dash { height: 0; width: 16px; border-top: 2px dashed var(--c); background: none; border-radius: 0; } .area-chart { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; } .area-chart__y { display: flex; flex-direction: column; justify-content: space-between; height: 260px; font-size: 11px; color: var(--muted); font-family: var(--mono); text-align: right; transform: translateY(-6px); } .area-chart__plot { position: relative; height: 260px; } .area-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .area-chart__x { grid-column: 2; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-family: var(--mono); padding-top: 8px; } .gridlines line { stroke: var(--line-strong); stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; } .series-line { fill: none; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.2s cubic-bezier(.4,0,.2,1) forwards; } .series-line--ghost { stroke-width: 1.8; stroke-dasharray: 5 6; stroke-dashoffset: 0; animation: fade-in 1.6s .8s both; opacity: .75; } .series-area { animation: fade-in 1.6s .6s both; } .series-glow { filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--primary) 35%, transparent)); } /* Theme-aware SVG paint helpers */ .stop-primary { stop-color: var(--primary); } .stop-primary-2 { stop-color: var(--primary-2); } .stop-violet { stop-color: var(--violet); } .stop-cyan { stop-color: var(--cyan); } .stroke-violet { stroke: var(--violet); } .stroke-rose { stroke: var(--rose); } .stroke-cyan { stroke: var(--cyan); } .stroke-primary { stroke: var(--primary); } .hotspots { position: absolute; inset: 0 calc(-100% / 24); display: grid; grid-template-columns: repeat(13, 1fr); } .hotspot { position: relative; cursor: crosshair; } .hotspot::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--primary) 55%, transparent), transparent); opacity: 0; transition: opacity .2s; } .hotspot i { position: absolute; left: 50%; top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 18%, transparent); opacity: 0; transform: scale(.4); transition: all .2s; } .hotspot .tip { position: absolute; left: 50%; top: calc(var(--y) - 14px); transform: translate(-50%, -100%) translateY(6px); padding: 8px 12px; border-radius: 10px; white-space: nowrap; pointer-events: none; z-index: 3; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: 12px; color: var(--muted); opacity: 0; transition: all .2s; } .hotspot .tip b { display: block; font-family: var(--mono); color: var(--text); font-size: 14px; } .hotspot:hover::before, .hotspot:hover i, .hotspot:hover .tip { opacity: 1; } .hotspot:hover i { transform: none; } .hotspot:hover .tip { transform: translate(-50%, -100%); } .now-marker { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent); pointer-events: none; } .now-marker::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--primary); animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite; } .now-label { position: absolute; transform: translate(-50%, -150%); padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; background: var(--primary); color: var(--on-primary); white-space: nowrap; pointer-events: none; } /* Column chart */ .columns { display: flex; align-items: flex-end; gap: 12px; height: 240px; padding-top: 24px; border-bottom: 1px solid var(--line); } .columns__col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; position: relative; min-width: 0; } .columns__bar { --c: var(--primary); position: relative; width: min(22px, 42%); height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 55%, transparent)); transform-origin: bottom; animation: grow-y 1.1s cubic-bezier(.2,.8,.2,1) both; transition: filter .2s; } .columns__bar--2 { --c: var(--violet); } .columns__bar--dim { --c: color-mix(in srgb, var(--muted) 55%, transparent); } .columns__col:nth-child(2) .columns__bar { animation-delay: .05s; } .columns__col:nth-child(3) .columns__bar { animation-delay: .1s; } .columns__col:nth-child(4) .columns__bar { animation-delay: .15s; } .columns__col:nth-child(5) .columns__bar { animation-delay: .2s; } .columns__col:nth-child(6) .columns__bar { animation-delay: .25s; } .columns__col:nth-child(7) .columns__bar { animation-delay: .3s; } .columns__col:nth-child(n+8) .columns__bar { animation-delay: .35s; } .columns__col:hover .columns__bar { filter: brightness(1.12); } .columns__col .tip { position: absolute; bottom: calc(var(--th, 80%) + 10px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 6px 10px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: 11.5px; white-space: nowrap; opacity: 0; transition: all .2s; pointer-events: none; z-index: 2; } .columns__col .tip b { font-family: var(--mono); } .columns__col:hover .tip { opacity: 1; transform: translateX(-50%); } .columns-x { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--muted); font-family: var(--mono); } .columns-x span { flex: 1; text-align: center; min-width: 0; } @keyframes grow-y { from { transform: scaleY(0); } } /* Donut */ .donut-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; } .donut { --size: 190px; position: relative; width: var(--size); height: var(--size); border-radius: 50%; flex: none; background: conic-gradient(var(--segments)); -webkit-mask: radial-gradient(farthest-side, transparent 66%, #000 67%); mask: radial-gradient(farthest-side, transparent 66%, #000 67%); animation: donut-in 1.4s cubic-bezier(.2,.8,.2,1) both; } @keyframes donut-in { from { transform: rotate(-120deg) scale(.7); opacity: 0; } } .donut-holder { position: relative; } .donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .donut-center strong { font-family: var(--mono); font-size: 26px; letter-spacing: -.04em; } .donut-center span { font-size: 12px; color: var(--muted); } .donut-legend { display: grid; gap: 10px; min-width: 180px; flex: 1; } .donut-legend div { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); } .donut-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); } .donut-legend b { font-family: var(--mono); font-weight: 600; color: var(--text); } /* Radial gauge */ .gauge { --v: 72; --c: var(--primary); position: relative; width: 150px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from -135deg, var(--c) calc(var(--v) * 2.7deg), var(--surface-3) 0 270deg, transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent 76%, #000 77%); mask: radial-gradient(farthest-side, transparent 76%, #000 77%); } .gauge-holder { position: relative; width: 150px; margin: 0 auto; } .gauge-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .gauge-center strong { font-family: var(--mono); font-size: 28px; letter-spacing: -.04em; } .gauge-center span { font-size: 11.5px; color: var(--muted); } /* Heatmap */ .heatmap { display: grid; grid-template-columns: 40px repeat(12, minmax(0, 1fr)); gap: 5px; font-size: 11px; color: var(--muted); font-family: var(--mono); } .heatmap .h { aspect-ratio: 1.6; border-radius: 6px; background: color-mix(in srgb, var(--primary) calc(var(--o, .1) * 100%), var(--surface-2)); transition: transform .2s, box-shadow .2s; } .heatmap .h:hover { transform: scale(1.18); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--primary) 60%, transparent); position: relative; z-index: 1; } .heatmap .lbl { display: flex; align-items: center; } .heatmap .xl { text-align: center; } .l1 { --o: .08; } .l2 { --o: .22; } .l3 { --o: .4; } .l4 { --o: .62; } .l5 { --o: .9; } .heat-scale { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); } .heat-scale .h { width: 18px; height: 12px; border-radius: 4px; background: color-mix(in srgb, var(--primary) calc(var(--o) * 100%), var(--surface-2)); } /* Lists */ .list { display: flex; flex-direction: column; } .list__item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); } .list__item:last-child { border-bottom: 0; } .list__item .grow { flex: 1; min-width: 0; } .list__item strong { display: block; font-size: 13.5px; } .list__item small { font-size: 12px; color: var(--muted); } .icon-tile { --c: var(--primary); display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); } .icon-tile .ic { width: 19px; height: 19px; } .icon-tile--amber { --c: var(--amber); } .icon-tile--rose { --c: var(--rose); } .icon-tile--cyan { --c: var(--cyan); } .icon-tile--violet { --c: var(--violet); } .icon-tile--blue { --c: var(--blue); } .icon-tile--green { --c: var(--green); } /* Timeline */ .timeline { position: relative; display: flex; flex-direction: column; gap: 18px; padding-left: 22px; } .timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line-strong); border-radius: 2px; } .timeline__item { position: relative; } .timeline__item::before { content: ""; position: absolute; left: -22px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--c, var(--primary)); } .timeline__item strong { display: block; font-size: 13.5px; } .timeline__item p { font-size: 12.5px; color: var(--muted); } .timeline__item time { font-size: 11.5px; color: var(--muted); font-family: var(--mono); } /* ---------- Device / sub-meter tree table ---------- */ .table--tree tbody.device .sub-row { display: none; } .table--tree tbody.device:has(.tree-toggle:checked) .sub-row { display: table-row; animation: row-in .35s cubic-bezier(.2,.8,.2,1) both; } .table--tree tbody.device:has(.tree-toggle:checked) .device-row { background: color-mix(in srgb, var(--primary) 5%, transparent); } .table--tree tbody.device:has(.tree-toggle:checked) .device-row td { border-bottom-color: transparent; } .expander { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; cursor: pointer; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); transition: all .25s; } .expander:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); } .expander .ic { width: 15px; height: 15px; transition: transform .3s cubic-bezier(.3,1.4,.6,1); } tbody.device:has(.tree-toggle:checked) .expander { color: var(--on-primary); background: var(--primary); border-color: transparent; } tbody.device:has(.tree-toggle:checked) .expander .ic { transform: rotate(90deg); } tbody.device:has(.tree-toggle:focus-visible) .expander { box-shadow: var(--ring); } .cell-device { display: flex; align-items: center; gap: 12px; min-width: 220px; } .cell-device strong { display: block; color: var(--text); } .cell-device small { display: block; font-size: 12px; color: var(--muted); font-family: var(--mono); } .dev-icon { --c: var(--primary); position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); } .dev-icon .ic { width: 19px; height: 19px; } .sub-row td { background: var(--surface-2); border-bottom-color: var(--line); } .sub-row .cell-device { position: relative; padding-left: 26px; min-width: 220px; } .sub-row .cell-device::before { content: ""; position: absolute; left: 6px; top: -26px; bottom: 50%; width: 16px; border-left: 2px solid color-mix(in srgb, var(--primary) 30%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--primary) 30%, transparent); border-bottom-left-radius: 10px; } .sub-row .dev-icon { width: 32px; height: 32px; border-radius: 10px; --c: var(--violet); } .sub-row .dev-icon .ic { width: 16px; height: 16px; } .sub-row--add td { padding-top: 10px; padding-bottom: 14px; } .link-add { display: inline-flex; align-items: center; gap: 8px; margin-left: 26px; padding: 6px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--primary); border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent); transition: all .2s; } .link-add:hover { background: var(--primary-soft); border-style: solid; } .link-add .ic { width: 14px; height: 14px; } .count-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); white-space: nowrap; } .count-pill .ic { width: 13px; height: 13px; } /* Sub-meter editor inside device modal */ .sub-editor { display: grid; gap: 10px; } .sub-editor__row { display: grid; grid-template-columns: 26px 1.4fr 1fr 0.9fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); } .sub-editor__row .n { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: center; } /* ---------- Permission matrix ---------- */ .perm-matrix th, .perm-matrix td { text-align: center; } .perm-matrix th:first-child, .perm-matrix td:first-child { text-align: left; } .perm-matrix .check { justify-content: center; } .perm-module { display: flex; align-items: center; gap: 10px; } .perm-module .icon-tile { width: 32px; height: 32px; border-radius: 10px; } .perm-module .icon-tile .ic { width: 16px; height: 16px; } .perm-module strong { display: block; } .perm-module small { font-size: 11.5px; color: var(--muted); } .role-card { position: relative; overflow: hidden; padding: 20px; transition: transform .3s, box-shadow .3s; } .role-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .role-card__glow { position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: var(--c); opacity: .09; } .role-card h4 { font-size: 16px; margin-top: 14px; } .role-card p { font-size: 12.5px; color: var(--muted); margin-top: 4px; min-height: 38px; } .role-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; } /* ---------- Shifts ---------- */ .shift-pill { --c: var(--amber); display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); } .shift-pill .ic { width: 13px; height: 13px; } .shift--a { --c: var(--amber); } .shift--b { --c: var(--orange); } .shift--c { --c: var(--violet); } .shift--g { --c: var(--cyan); } .shift--off { --c: var(--slate); } .day-dots { display: flex; gap: 4px; } .day-dots span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 10.5px; font-weight: 800; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); } .day-dots span.on { color: var(--on-primary); background: var(--primary); border-color: transparent; } .timeline-24 { position: relative; padding: 8px 0 0; overflow-x: auto; } .timeline-24__track { position: relative; min-width: 560px; height: 150px; border-radius: 14px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 24)), var(--surface-2); border: 1px solid var(--line); overflow: hidden; } .timeline-24__lane { position: absolute; left: 0; right: 0; height: 34px; } .timeline-24__block { --c: var(--amber); position: absolute; top: 0; bottom: 0; left: var(--s); width: var(--w); display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; background: var(--c); animation: grow-x 1s cubic-bezier(.2,.8,.2,1) both; transform-origin: left; } .timeline-24__block small { font-weight: 600; opacity: .85; font-family: var(--mono); } .timeline-24__now { position: absolute; top: 0; bottom: 0; left: var(--at); width: 2px; background: var(--rose); z-index: 2; } .timeline-24__now::before { content: "NOW"; position: absolute; bottom: 6px; left: 6px; font-size: 10px; font-weight: 800; color: var(--rose); letter-spacing: .1em; } .timeline-24__scale { display: flex; justify-content: space-between; min-width: 560px; margin-top: 8px; font-size: 11px; color: var(--muted); font-family: var(--mono); } .roster td { text-align: center; } .roster td:nth-child(1), .roster th:nth-child(1) { text-align: left; } /* ---------- Misc ---------- */ .divider { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .callout { --c: var(--blue); display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--c) 7%, transparent); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); font-size: 13px; color: var(--text-2); } .callout .ic { color: var(--c); margin-top: 2px; flex: none; } .callout a { color: var(--primary); font-weight: 700; } .callout--warn { --c: var(--amber); } .callout--danger { --c: var(--rose); } .callout--success { --c: var(--green); } .kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: 13.5px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; overflow-wrap: anywhere; } .org-id { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: .06em; color: var(--primary-ink); background: var(--primary-soft); border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent); } .org-id .ic { width: 15px; height: 15px; color: var(--muted); } .progress-ring { --v: 60; --c: var(--primary); position: relative; width: 58px; height: 58px; border-radius: 50%; flex: none; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--surface-3) 0); -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 73%); mask: radial-gradient(farthest-side, transparent 72%, #000 73%); } @keyframes pulse-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes orbit { to { transform: rotate(360deg); } } /* ========================================================================== AUTH PAGES ========================================================================== */ .auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; min-height: 100dvh; padding: 16px; gap: 16px; } .auth-visual { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; padding: 40px 48px; border-radius: 24px; background: var(--grad-hero); color: #fff; } .auth-visual::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 60% 45%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 60% 45%, #000, transparent 70%); } .auth-visual .brand__logo { background: #fff; color: var(--primary); box-shadow: none; } .auth-visual .brand__tag { color: rgba(255,255,255,.7); } .auth-visual .gradient-text { background: none; color: #ffd98a; -webkit-text-fill-color: currentColor; } .auth-hero h1 { font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; max-width: 13ch; } .auth-hero p { margin-top: 14px; max-width: 44ch; color: rgba(255,255,255,.8); font-size: 15px; } .auth-points { display: flex; gap: 12px 22px; flex-wrap: wrap; margin-top: 24px; } .auth-points div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.9); font-weight: 600; } .auth-points .ic { color: #fff; } .energy-core { position: relative; width: min(320px, 72%); aspect-ratio: 1; margin: 0 auto; } .energy-core .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); } .energy-core .ring:nth-child(2) { inset: 12%; border-style: dashed; animation: orbit 40s linear infinite reverse; } .energy-core .ring:nth-child(3) { inset: 26%; border-color: rgba(255,255,255,.35); } .energy-core .ring--spin { animation: orbit 14s linear infinite; } .energy-core .ring--spin::before, .energy-core .ring--spin::after { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #ffd98a; box-shadow: 0 0 14px 3px rgba(255,217,138,.6); } .energy-core .ring--spin::after { top: auto; bottom: -5px; width: 9px; height: 9px; background: #fff; box-shadow: 0 0 12px 3px rgba(255,255,255,.6); } .energy-core__center { position: absolute; inset: 36%; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--primary); box-shadow: 0 0 0 10px rgba(255,255,255,.12), 0 20px 40px -10px rgba(0,0,0,.35); animation: breathe 3.2s ease-in-out infinite; } .energy-core__center .ic { width: 42%; height: 42%; } @keyframes breathe { 50% { transform: scale(1.05); box-shadow: 0 0 0 18px rgba(255,255,255,.08), 0 20px 40px -10px rgba(0,0,0,.35); } } .float-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--surface); color: var(--muted); box-shadow: 0 18px 40px -16px rgba(0,0,0,.45); font-size: 12px; white-space: nowrap; animation: float 6s ease-in-out infinite; } .float-chip strong { display: block; color: var(--text); font-family: var(--mono); font-size: 15px; } .float-chip .icon-tile { width: 34px; height: 34px; border-radius: 10px; } .float-chip .icon-tile .ic { width: 16px; height: 16px; } .float-chip--1 { top: 6%; left: -10%; } .float-chip--2 { top: 44%; right: -14%; animation-delay: -2s; } .float-chip--3 { bottom: 2%; left: 0; animation-delay: -4s; } .auth-wave { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1; opacity: .6; } .auth-wave path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; } .auth-wave .w1 { stroke: rgba(255,255,255,.5); stroke-dasharray: 8 10; animation: dash 3s linear infinite; } .auth-wave .w2 { stroke: rgba(255,217,138,.5); stroke-dasharray: 4 12; animation: dash 5s linear infinite reverse; } @keyframes dash { to { stroke-dashoffset: -72; } } .auth-legal { font-size: 12px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; } .auth-legal a:hover { color: var(--text); } .auth-panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 24px 32px; } .auth-card { width: min(460px, 100%); animation: rise .6s cubic-bezier(.2,.8,.2,1) both; } .auth-card--wide { width: min(640px, 100%); } .auth-card .brand { padding: 0 0 26px; } .auth-mobile-brand { display: none; } .auth-title { font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; } .auth-sub { margin: 8px 0 26px; color: var(--muted); } .auth-sub b { color: var(--text); } .auth-form { display: flex; flex-direction: column; gap: 18px; } .auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; } .auth-row a { color: var(--primary); font-weight: 600; } .auth-foot { margin-top: 24px; text-align: center; font-size: 13.5px; color: var(--muted); line-height: 1.9; } .auth-foot a { color: var(--primary); font-weight: 700; } .auth-foot a .ic { vertical-align: -0.2em; } .auth-foot a:hover, .auth-row a:hover, .label-row a:hover, .check a:hover { text-decoration: underline; text-underline-offset: 3px; } .auth-top-link { position: absolute; top: 22px; right: 76px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; } .auth-top-link a { white-space: nowrap; color: var(--text); font-weight: 700; padding: 8px 13px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); transition: all .2s; } .auth-top-link a:hover { border-color: var(--primary); color: var(--primary); } .auth .theme-toggle--float { top: 18px; right: 20px; } .sso { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sso .btn { height: 46px; } .sso svg { width: 18px; height: 18px; } .org-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; font-size: 12px; color: var(--muted); } .org-hint .tag { font-size: 11px; } .otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .otp input { width: 100%; height: 58px; text-align: center; font-family: var(--mono); font-size: 24px; font-weight: 600; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface); outline: none; caret-color: var(--primary); transition: all .2s; } .otp input:focus { border-color: var(--primary); box-shadow: var(--ring); transform: translateY(-2px); } .otp input:not(:placeholder-shown) { border-color: color-mix(in srgb, var(--primary) 55%, transparent); background: var(--primary-soft); } .strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; } .strength span { height: 5px; border-radius: 99px; background: var(--surface-3); transition: background .3s; } .pw-field:has(input:not(:placeholder-shown)) .strength span:nth-child(1) { background: var(--rose); } .pw-field:has(input:valid:not(:placeholder-shown)) .strength span { background: var(--green); } .pw-field .hint--ok { display: none; } .pw-field:has(input:valid:not(:placeholder-shown)) .hint--ok { display: block; } .pw-field:has(input:valid:not(:placeholder-shown)) .hint--rule { display: none; } .rules { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); } .rules li { display: flex; align-items: center; gap: 8px; } .rules li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); } .pw-field:has(input:valid:not(:placeholder-shown)) .rules li { color: var(--green); } .pw-field:has(input:valid:not(:placeholder-shown)) .rules li::before { background: var(--green); } /* Wizard stepper */ .stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 26px; } .stepper label { position: relative; display: flex; flex-direction: column; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted); } .stepper label::before { content: ""; height: 5px; border-radius: 99px; background: var(--surface-3); transition: all .4s; } .stepper label b { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 600; } .wizard:has(> .tab-input[value="1"]:checked) .stepper label[data-t="1"], .wizard:has(> .tab-input[value="2"]:checked) .stepper label:is([data-t="1"], [data-t="2"]), .wizard:has(> .tab-input[value="3"]:checked) .stepper label:is([data-t="1"], [data-t="2"], [data-t="3"]), .wizard:has(> .tab-input[value="4"]:checked) .stepper label { color: var(--text); } .wizard:has(> .tab-input[value="1"]:checked) .stepper label[data-t="1"]::before, .wizard:has(> .tab-input[value="2"]:checked) .stepper label:is([data-t="1"], [data-t="2"])::before, .wizard:has(> .tab-input[value="3"]:checked) .stepper label:is([data-t="1"], [data-t="2"], [data-t="3"])::before, .wizard:has(> .tab-input[value="4"]:checked) .stepper label::before { background: var(--primary); } .wizard__nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; } .wizard__nav .btn { min-width: 130px; } .review { display: grid; gap: 12px; } .review__block { padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); } .review__block .row-between { margin-bottom: 6px; } .review__block label { font-size: 12px; color: var(--primary); font-weight: 700; cursor: pointer; } .success-burst { position: relative; width: 116px; height: 116px; margin: 0 auto 24px; display: grid; place-items: center; } .success-burst::before, .success-burst::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--green) 50%, transparent); animation: pulse-ring 2.2s ease-out infinite; } .success-burst::after { animation-delay: 1.1s; } .success-burst span { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 16px 36px -12px var(--green); animation: pop-in .7s cubic-bezier(.3,1.6,.5,1) both; } .success-burst .ic { width: 38px; height: 38px; } @keyframes pop-in { from { transform: scale(0) rotate(-40deg); } } .invite-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px; margin-bottom: 22px; border-radius: 14px; background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1280px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-main, .grid-main-r { grid-template-columns: minmax(0, 1fr); } .radio-cards { grid-template-columns: 1fr; } .radio-cards--theme { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1024px) { .app-shell { grid-template-columns: minmax(0, 1fr); } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(var(--sidebar-w), 86vw); transform: translateX(-105%); transition: transform .35s cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow-lg); } .nav-toggle:checked ~ .app-shell .sidebar { transform: none; } .nav-scrim { position: fixed; inset: 0; z-index: 35; background: var(--overlay); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: all .3s; } .nav-toggle:checked ~ .app-shell .nav-scrim { opacity: 1; visibility: visible; } .burger { display: grid; } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-2 { grid-template-columns: minmax(0, 1fr); } .span-2 { grid-column: auto; } .tabs--side { grid-template-columns: minmax(0, 1fr); } .tabs--side > .tab-list { flex-direction: row; position: static; } .tabs--side > .tab-list label { height: 38px; } .auth-shell { grid-template-columns: minmax(0, 1fr); padding: 0; } .auth-visual { display: none; } .auth-mobile-brand { display: flex; margin-bottom: 26px; padding: 0; } .live-pill { display: none; } .page { padding: 22px 20px; } .topbar { padding: 0 20px; } } @media (min-width: 1025px) { .nav-scrim { display: none; } } @media (max-width: 760px) { :root { --topbar-h: 64px; } .page { padding: 18px 16px; gap: 16px; } .topbar { padding: 0 12px; gap: 8px; } .topbar__crumbs small { display: none; } .topbar__crumbs strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; } .search { display: none; } .topbar__actions { margin-left: auto; gap: 8px; } .icon-btn { width: 40px; height: 40px; } .user-chip { padding: 3px; border-radius: 50%; } .user-chip__meta, .user-chip > .ic { display: none; } .grid { gap: 14px; } .grid-3 { grid-template-columns: minmax(0, 1fr); } .form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); } .page-head { align-items: flex-start; } .page-actions { width: 100%; } .page-actions > * { flex: 1 1 auto; } .card__head, .toolbar { padding-left: 16px; padding-right: 16px; } .card__body { padding: 16px; } .card__foot { padding: 12px 16px; } .toolbar .search { display: block; max-width: none; flex-basis: 100%; } .toolbar select.input { flex: 1 1 130px; min-width: 0; } .table th:first-child, .table td:first-child { padding-left: 16px; } .table th:last-child, .table td:last-child { padding-right: 16px; } .pager { padding: 14px 16px; justify-content: center; } .pager__size { display: none; } .dropdown__panel, .dropdown__panel--wide { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 6px); width: auto; } .area-chart__y, .area-chart__plot { height: 200px; } .area-chart__x span:nth-child(even) { visibility: hidden; } .columns { height: 200px; gap: 6px; } .columns-x { gap: 6px; } .donut { --size: 160px; } .sub-editor__row { grid-template-columns: 1fr 1fr; } .sub-editor__row .n { display: none; } .otp { gap: 6px; } .otp input { height: 50px; font-size: 20px; } .stepper span { display: none; } .sso { grid-template-columns: 1fr; } .rules { grid-template-columns: 1fr; } .radio-cards--theme { grid-template-columns: minmax(0, 1fr); } .auth-panel { padding: 20px 16px 28px; justify-content: flex-start; } .auth-top-link { position: static; align-self: stretch; justify-content: flex-end; margin: 0 52px 28px 0; min-height: 40px; } .auth .theme-toggle--float { top: 20px; right: 16px; } .auth-title { font-size: 23px; } .wizard__nav .btn { min-width: 0; flex: 1; } .modal { padding: 0; align-items: end; } .modal__dialog { max-height: 92vh; max-height: 92dvh; border-radius: 20px 20px 0 0; width: 100% !important; } .modal__head, .modal__body { padding-left: 18px; padding-right: 18px; } .modal__foot { padding: 14px 18px; } .modal__foot .btn { flex: 1 1 auto; } .toast { left: 12px; right: 12px; bottom: 12px; min-width: 0; max-width: none; } .footer { padding: 14px 16px 22px; justify-content: center; text-align: center; } .setting-row { flex-wrap: wrap; } } @media (max-width: 420px) { .grid-4 { grid-template-columns: minmax(0, 1fr); } .kpi__value { font-size: 25px; } .topbar__actions { gap: 6px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Element that only appears once linked to (e.g. "email sent" confirmation) */ .reveal-on-target { display: none !important; } .reveal-on-target:target { display: flex !important; animation: rise .4s ease both; } /* Flow messages shown by theme.js from ?query flags (e.g. "password updated") */ .flow-msg { display: none !important; } .flow-msg.is-shown { display: flex !important; margin-bottom: 20px; animation: rise .4s ease both; } p.flow-msg.is-shown { display: block !important; } [hidden] { display: none !important; } /* ========================================================================== APPEARANCE PICKER (topbar dropdown + Settings → Appearance) ========================================================================== */ .appearance-panel { width: 300px; padding: 12px; } .appearance-panel .eyebrow { display: block; margin: 14px 4px 8px; } .palette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; } .radio-cards--theme { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pal-daylight .theme-swatch i:first-child { border-right: 1px solid #e7e9f3; } .palette-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border-radius: 10px; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--muted); transition: background .2s, color .2s; } .palette-opt:hover { background: var(--surface-2); color: var(--text); } .palette-opt input { position: absolute; opacity: 0; pointer-events: none; } .palette-dot { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--p1), var(--p2)); box-shadow: 0 6px 14px -6px var(--p1); transition: transform .25s cubic-bezier(.3,1.4,.6,1); } .palette-opt:hover .palette-dot { transform: scale(1.08); } .palette-dot::after { content: ""; width: 14px; height: 14px; background: #fff; transform: scale(0); transition: transform .25s cubic-bezier(.3,1.6,.6,1); -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; } .palette-opt:has(input:checked) { color: var(--text); } .palette-opt:has(input:checked) .palette-dot::after { transform: scale(1); } .palette-opt:has(input:focus-visible) .palette-dot { outline: 2px solid var(--p1); outline-offset: 4px; } .palette-opt:has(input:checked) .palette-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--p2); } /* Theme identity: swatch dot (p1 → p2) and Settings preview (s-*) */ .pal-daylight { --p1: #e4e7f2; --p2: #5b4ff0; --s-bg: #f6f7fb; --s-side: #fff; --s-card: #fff; --s-accent: #efedff; } .pal-aurora { --p1: #5b4ff0; --p2: #c026d3; --s-bg: #f3f4fa; --s-side: linear-gradient(160deg, #4f46e5, #c026d3); --s-card: #fff; --s-accent: #ece9ff; } .pal-midnight { --p1: #1b2036; --p2: #8577ff; --s-bg: #0e1120; --s-side: #161a2d; --s-card: #161a2d; --s-accent: #2f2a6b; } /* ========================================================================== VIBRANT LIGHT THEME (Aurora) is set by app.js for Aurora only. Daylight (plain, all-white light) and Midnight (dark) keep the calm base look. ========================================================================== */ :root[data-vivid] { --bg: color-mix(in srgb, var(--primary) 5%, #f5f6fb); } :root[data-vivid] body::before { background: radial-gradient(900px 560px at 100% -10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 65%), radial-gradient(760px 520px at 20% 110%, color-mix(in srgb, var(--primary-2) 12%, transparent), transparent 65%); } /* Coloured sidebar */ :root[data-vivid] .sidebar { color: #fff; border-right: 0; background: radial-gradient(420px 320px at 0% 0%, rgba(255,255,255,.18), transparent 60%), radial-gradient(360px 360px at 110% 100%, rgba(255,255,255,.12), transparent 60%), var(--grad-hero); } :root[data-vivid] .sidebar::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.28); } :root[data-vivid] .sidebar .brand__logo { background: #fff; color: var(--primary); box-shadow: 0 10px 22px -10px rgba(0,0,0,.45); } :root[data-vivid] .sidebar .brand__tag, :root[data-vivid] .sidebar .muted, :root[data-vivid] .sidebar .tenant-switch__meta span { color: rgba(255,255,255,.72); } :root[data-vivid] .sidebar .tenant-switch { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); } :root[data-vivid] .sidebar .tenant-switch:hover { background: rgba(255,255,255,.2); } :root[data-vivid] .sidebar .tenant-switch__logo { background: #fff; color: var(--primary); } :root[data-vivid] .nav__section { color: rgba(255,255,255,.6); opacity: 1; } :root[data-vivid] .nav__link { color: rgba(255,255,255,.85); } :root[data-vivid] .nav__link:hover { color: #fff; background: rgba(255,255,255,.13); } :root[data-vivid] .nav__link.is-active { color: var(--primary-ink); background: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); } :root[data-vivid] .nav__link.is-active::before { background: #fff; } :root[data-vivid] .nav__badge { background: rgba(255,255,255,.2); color: #fff; } :root[data-vivid] .nav__link.is-active .nav__badge { background: var(--primary-soft); color: var(--primary-ink); } :root[data-vivid] .sidebar__live { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); box-shadow: none; } :root[data-vivid] .sidebar__live::after { background: rgba(255,255,255,.1); } :root[data-vivid] .sidebar__foot { color: rgba(255,255,255,.7); } :root[data-vivid] .sidebar__foot .muted:hover { color: #fff; } /* Topbar: frosted glass */ :root[data-vivid] .topbar { background: rgba(255,255,255,.72); border-bottom-color: color-mix(in srgb, var(--primary) 10%, var(--line)); } /* Page header becomes a gradient banner */ :root[data-vivid] .page-head { position: relative; isolation: isolate; overflow: hidden; align-items: center; padding: 26px 28px; border-radius: 22px; color: #fff; background: radial-gradient(500px 240px at 85% -20%, rgba(255,255,255,.25), transparent 60%), var(--grad-hero); box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--primary) 85%, transparent); } :root[data-vivid] .page-head::before, :root[data-vivid] .page-head::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(255,255,255,.18); } :root[data-vivid] .page-head::before { width: 260px; height: 260px; right: 18%; top: -150px; } :root[data-vivid] .page-head::after { width: 180px; height: 180px; right: -50px; bottom: -110px; background: rgba(255,255,255,.08); border: 0; } :root[data-vivid] .page-head .eyebrow { color: rgba(255,255,255,.8); } :root[data-vivid] .page-head .gradient-text { background: none; -webkit-text-fill-color: currentColor; color: #ffe29a; } :root[data-vivid] .page-head .page-sub { color: rgba(255,255,255,.82); } :root[data-vivid] .page-head .page-sub b, :root[data-vivid] .page-head .page-sub .mono { color: #fff; } :root[data-vivid] .page-head .btn { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); backdrop-filter: blur(6px); } :root[data-vivid] .page-head .btn:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.45); } :root[data-vivid] .page-head .btn--primary { color: var(--primary-ink); background: #fff; border: 0; box-shadow: 0 10px 22px -10px rgba(0,0,0,.4); } :root[data-vivid] .page-head .btn--primary:hover { background: #fff; filter: none; transform: translateY(-1px); } :root[data-vivid] .page-head select.input { color: #fff; background-color: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); background-image: url("data:image/svg+xml,"); } :root[data-vivid] .page-head select.input:focus { box-shadow: 0 0 0 4px rgba(255,255,255,.25); border-color: #fff; } /* Cards: tinted shadow */ :root[data-vivid] .card { border-color: color-mix(in srgb, var(--primary) 8%, var(--line)); box-shadow: 0 1px 2px rgba(22,26,60,.04), 0 14px 34px -22px color-mix(in srgb, var(--primary) 45%, transparent); } :root[data-vivid] .table th { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); color: color-mix(in srgb, var(--primary-ink) 55%, var(--muted)); } /* KPI tiles: vivid gradients */ :root[data-vivid] .kpi { --kg: linear-gradient(135deg, var(--primary-2), var(--primary)); color: #fff; border: 0; background: var(--kg); box-shadow: 0 18px 34px -20px var(--c); } :root[data-vivid] .kpi--green { --kg: linear-gradient(135deg, #2fd6a3 0%, #0e9f6e 100%); } :root[data-vivid] .kpi--cyan { --kg: linear-gradient(135deg, #38c6ec 0%, #0b76c9 100%); } :root[data-vivid] .kpi--amber { --kg: linear-gradient(135deg, #fdb94a 0%, #f06a1d 100%); } :root[data-vivid] .kpi--violet { --kg: linear-gradient(135deg, #a78bfa 0%, #6d3fe6 100%); } :root[data-vivid] .kpi--rose { --kg: linear-gradient(135deg, #fb7aa0 0%, #e03e6b 100%); } :root[data-vivid] .kpi--blue { --kg: linear-gradient(135deg, #6aa5ff 0%, #3a5fe6 100%); } :root[data-vivid] .kpi::after { content: ""; position: absolute; z-index: -1; right: -36px; bottom: -56px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.12); } :root[data-vivid] .kpi:hover { box-shadow: 0 24px 40px -20px var(--c); } :root[data-vivid] .kpi__icon { color: #fff; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } :root[data-vivid] .kpi__label { color: rgba(255,255,255,.9); } :root[data-vivid] .kpi__value small, :root[data-vivid] .kpi__foot { color: rgba(255,255,255,.82); } :root[data-vivid] .kpi .trend { color: #fff; background: rgba(255,255,255,.22); } :root[data-vivid] .kpi .tag { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); } :root[data-vivid] .kpi .badge { --c: #fff; background: rgba(255,255,255,.2); } :root[data-vivid] .kpi__spark path { stroke: rgba(255,255,255,.95); } :root[data-vivid] .kpi__spark path.fill { fill: rgba(255,255,255,.16); } /* Mini stats: solid gradient icon badges */ :root[data-vivid] .stat__icon { color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: 0 10px 20px -10px var(--c); } :root[data-vivid] .card.stat { position: relative; overflow: hidden; } :root[data-vivid] .card.stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 6%, transparent); } @media (max-width: 760px) { :root[data-vivid] .page-head { padding: 20px 18px; border-radius: 18px; align-items: flex-start; } .appearance-panel { width: auto; } } @media (max-width: 420px) { .topbar .theme-toggle { display: none; } /* the appearance menu covers it on small phones */ } /* Energy Meters: device each meter reports through */ .device-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--primary-ink); background: var(--primary-soft); white-space: nowrap; } .device-chip:hover { text-decoration: none; filter: brightness(.97); } .device-chip .dot { width: 7px; height: 7px; } .device-chip--inherited { color: var(--muted); background: var(--surface-2); } /* Energy Meters: main meter actual reading vs sum of its sub-meters */ .mv { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; white-space: nowrap; } .mv small { font-family: var(--font); font-size: 10.5px; font-weight: 600; color: var(--muted); min-width: 44px; text-align: left; } .mv--sum { margin-top: 2px; font-size: 12px; color: var(--text-2); } .gap { display: inline-block; margin-top: 5px; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); } .gap--ok { --c: var(--green); } .gap--mid { --c: var(--amber); } .gap--high { --c: var(--rose); } /* ========================================================================== METER DASHBOARD (meter.html?id=…) ========================================================================== */ .meter-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; } .meter-head .dev-icon { width: 54px; height: 54px; border-radius: 16px; } .meter-head .dev-icon .ic { width: 26px; height: 26px; } .meter-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; } .chart-box { position: relative; min-height: 220px; } .chart-box svg { display: block; width: 100%; overflow: visible; } .chart-box .grid-line { stroke: var(--line); stroke-width: 1; } .chart-box .axis-text { fill: var(--muted); font-family: var(--mono); font-size: 11px; } .chart-box .series-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart-box .series-area { fill: var(--primary); opacity: .12; } .chart-box .series-bar { fill: var(--primary); } .chart-box .series-bar.is-partial { opacity: .45; } .chart-box .series-bar.is-hover { fill: var(--primary-ink); } .chart-box .now-dot { fill: var(--primary); stroke: var(--surface); stroke-width: 2; } .chart-box .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; } .chart-box .hover-dot { fill: var(--primary); stroke: var(--surface); stroke-width: 2; } .chart-box .gap-note { fill: var(--rose); font-size: 11.5px; font-weight: 700; } .chart-tip { position: absolute; z-index: 5; pointer-events: none; padding: 7px 10px; border-radius: 10px; background: var(--text); color: var(--surface); font-size: 12px; line-height: 1.35; white-space: nowrap; box-shadow: var(--shadow-lg); transform: translate(-50%, calc(-100% - 12px)); } .chart-tip b { font-family: var(--mono); } .chart-table { margin-top: 10px; font-size: 12.5px; } .chart-table summary { cursor: pointer; color: var(--primary); font-weight: 700; width: max-content; } .chart-table .table-wrap { max-height: 240px; overflow: auto; margin-top: 8px; } .share-list { display: grid; gap: 12px; } .share-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(90px, 2fr) auto; gap: 12px; align-items: center; font-size: 13px; } .share-row a { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .share-row a:hover { color: var(--primary); } .share-row .bar > span { --c: var(--primary); } .share-row--rest .bar > span { --c: var(--muted); } .share-row b { font-family: var(--mono); font-weight: 600; text-align: right; min-width: 110px; } .param-table td:not(:first-child), .param-table th:not(:first-child) { text-align: right; font-family: var(--mono); } .row-link { color: inherit; } .row-link:hover { color: var(--primary); text-decoration: underline; } @media (max-width: 760px) { .share-row { grid-template-columns: 1fr auto; } .share-row .bar { grid-column: 1 / -1; order: 3; } }