/* ══════════════════════════════════════════════════════════════════════════════════════════════════ Field 2 Service — PLATFORM ADMIN CONSOLE design system --------------------------------------------------------------------------------------------------- A fresh, standalone SaaS-admin aesthetic (Stripe / Linear / Vercel grade) for the landlord console. CONTAINMENT — read this before adding a rule. The two sentences that used to sit here were both false, and false in the way a maintainer acts on: `.rk-admin` is no longer the class (it is a content wrapper inside .page-content — app/Views/platform/layout.php), most selectors below carry no `.rk-admin` ancestor at all, and the platform layout now loads six sheets, Velzon and Bootstrap included. What actually contains this file is its LINK SITES: platform/layout.php plus the affiliate portal (partner/layout.php, partner/login.php, partner/register.php). The tenant shell app/Views/layouts/velzon.php links neither this sheet nor the bridge. That containment is a test, not a convention — tools/platform-shell-integration-truth-test.php and tools/platform-shell-target-floor-test.php both fail if any other view starts linking either sheet. Screens are built from the components below; do NOT re-invent them per page. Component vocabulary the screens use: .rk-page-head .rk-card .rk-stat .rk-table .rk-badge .rk-btn .rk-input .rk-select .rk-empty ══════════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── Design tokens ──────────────────────────────────────────────────────────────────────────────── */ .rk-admin { /* Brand */ --rk-teal: #14b8a6; --rk-indigo: #6366f1; --rk-link: #6366f1; /* body links (dark theme brightens this, not --rk-indigo) */ --rk-grad: linear-gradient(120deg, #14b8a6 0%, #6366f1 100%); --rk-grad-rev: linear-gradient(120deg, #6366f1 0%, #14b8a6 100%); --rk-grad-soft: linear-gradient(120deg, rgba(20,184,166,.14) 0%, rgba(99,102,241,.14) 100%); /* Ink / text */ --rk-ink: #0f172a; /* headings */ --rk-ink-2: #1e293b; /* strong body */ --rk-body: #475569; /* default body */ --rk-muted: #64748b; /* secondary */ --rk-faint: #94a3b8; /* tertiary / labels */ --rk-mono: "SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; /* code / keys / recovery codes */ /* Surfaces */ --rk-bg: #f5f7fb; /* page */ --rk-surface: #ffffff; /* cards */ --rk-surface-2: #f8fafc; /* table head / wells */ --rk-surface-3: #f1f5f9; /* hovers */ --rk-border: #e7ecf3; /* card / divider */ --rk-border-2: #eef2f7; /* subtle inner */ --rk-ring: rgba(99,102,241,.28); /* Sidebar (dark) */ --rk-nav-1: #0b1220; --rk-nav-2: #0f172a; --rk-nav-ink: #cbd5e1; --rk-nav-strong: #f8fafc; --rk-nav-muted: #64748b; --rk-nav-hover: rgba(148,163,184,.10); --rk-nav-border: rgba(148,163,184,.10); /* Shadows / radii */ --rk-shadow-xs: 0 1px 2px rgba(15,23,42,.05); --rk-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.05); --rk-shadow: 0 1px 3px rgba(15,23,42,.05), 0 10px 26px -14px rgba(15,23,42,.18); --rk-shadow-lg: 0 20px 48px -18px rgba(15,23,42,.28); --rk-r: 14px; --rk-r-sm: 10px; --rk-r-xs: 8px; --rk-r-lg: 18px; --rk-sidebar-w: 252px; --rk-topbar-h: 64px; /* Semantic status (bg-subtle / text / dot) — one source for every pill */ --st-trial-bg:#eff6ff; --st-trial-fg:#1d4ed8; --st-active-bg:#ecfdf5; --st-active-fg:#047857; --st-suspended-bg:#fef2f2; --st-suspended-fg:#b91c1c; --st-cancelled-bg:#f1f5f9; --st-cancelled-fg:#475569; --st-offboarded-bg:#0f172a11; --st-offboarded-fg:#334155; --st-comped-bg:#f5f3ff; --st-comped-fg:#6d28d9; --st-pastdue-bg:#fff7ed; --st-pastdue-fg:#c2410c; --st-paid-bg:#ecfdf5; --st-paid-fg:#047857; --st-refunded-bg:#fff7ed; --st-refunded-fg:#c2410c; --st-partial-bg:#fffbeb; --st-partial-fg:#a16207; --st-open-bg:#eff6ff; --st-open-fg:#1d4ed8; --st-draft-bg:#f1f5f9; --st-draft-fg:#64748b; --st-void-bg:#f1f5f9; --st-void-fg:#94a3b8; /* Support-ticket statuses (ADMIN-BACKLOG §CHIP 1) — 'open' reuses the shared --st-open above */ --st-new-bg:#eef2ff; --st-new-fg:#4338ca; --st-waiting-bg:#fffbeb; --st-waiting-fg:#a16207; --st-resolved-bg:#ecfdf5; --st-resolved-fg:#047857; --st-closed-bg:#f1f5f9; --st-closed-fg:#64748b; /* Danger surface tints (suspend box, danger buttons) — themed, never hardcoded in views */ --rk-danger-border: #f3cfcf; --rk-danger-border-2: #f6dede; --rk-danger-well: #fef2f2; /* Component-level hover borders (need a dark twin, so tokens not literals) */ --rk-hover-border: #dbe3ee; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--rk-body); background: var(--rk-bg); font-size: 14px; line-height: 1.5; letter-spacing: -0.006em; } /* Reset-ish — the layout ships no framework, so normalise the essentials inside .rk-admin only. */ .rk-admin *, .rk-admin *::before, .rk-admin *::after { box-sizing: border-box; } .rk-admin h1,.rk-admin h2,.rk-admin h3,.rk-admin h4,.rk-admin h5,.rk-admin h6 { margin:0; color:var(--rk-ink); font-weight:650; line-height:1.25; letter-spacing:-0.02em; } .rk-admin p { margin:0; } /* Links: the indigo body-link colour + hover underline apply ONLY to bare (classless) content anchors. A class-bearing anchor is a COMPONENT (.rk-nav__item, .rk-btn, .rk-iconbtn, .rk-link, …) styling itself — the old unscoped `.rk-admin a` out-specified those (0,1,1 vs 0,1,0) and painted the sidebar nav + the primary-button text indigo-on-dark (owner-reported, 2026-07-23). text-decoration:none stays global. */ .rk-admin a { text-decoration:none; } .rk-admin a:not([class]) { color:var(--rk-link); } .rk-admin a:not([class]):hover { text-decoration:underline; } .rk-admin code { font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:.85em; background:var(--rk-surface-3); color:var(--rk-ink-2); padding:.12em .42em; border-radius:6px; } .rk-admin hr { border:0; border-top:1px solid var(--rk-border); margin:1rem 0; } .rk-admin ::selection { background:rgba(99,102,241,.18); } /* ── App frame ──────────────────────────────────────────────────────────────────────────────────── */ .rk-admin { margin:0; min-height:100vh; } .rk-shell { display:flex; min-height:100vh; } /* Sidebar */ .rk-sidebar { position:fixed; inset:0 auto 0 0; width:var(--rk-sidebar-w); z-index:60; display:flex; flex-direction:column; background:linear-gradient(180deg, var(--rk-nav-1) 0%, var(--rk-nav-2) 100%); border-right:1px solid rgba(0,0,0,.4); color:var(--rk-nav-ink); } .rk-sidebar__brand { display:flex; align-items:center; gap:11px; height:var(--rk-topbar-h); padding:0 20px; border-bottom:1px solid var(--rk-nav-border); flex-shrink:0; } .rk-brandmark { width:34px; height:34px; border-radius:10px; flex-shrink:0; background:var(--rk-grad); display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; box-shadow:0 6px 16px -6px rgba(99,102,241,.7); } .rk-brandmark i { line-height:1; } .rk-brand-text { display:flex; flex-direction:column; line-height:1.05; min-width:0; } .rk-wordmark { font-size:16px; font-weight:700; letter-spacing:-0.02em; background:var(--rk-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .rk-brand-tag { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--rk-nav-muted); margin-top:1px; } .rk-nav { flex:1; overflow-y:auto; padding:14px 12px 22px; } .rk-nav::-webkit-scrollbar { width:8px; } .rk-nav::-webkit-scrollbar-thumb { background:rgba(148,163,184,.16); border-radius:8px; } .rk-nav__group { margin-top:16px; } .rk-nav__group:first-child { margin-top:2px; } .rk-nav__label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; color:var(--rk-nav-muted); padding:0 12px 8px; } .rk-nav__item { display:flex; align-items:center; gap:11px; padding:9px 12px; margin-bottom:2px; border-radius:9px; color:var(--rk-nav-ink); font-size:13.5px; font-weight:500; position:relative; transition:background .12s ease, color .12s ease; } .rk-nav__item:hover { background:var(--rk-nav-hover); color:var(--rk-nav-strong); text-decoration:none; } .rk-nav__item i { font-size:17px; width:20px; text-align:center; flex-shrink:0; color:var(--rk-nav-muted); transition:color .12s ease; } .rk-nav__item:hover i { color:var(--rk-nav-ink); } .rk-nav__item .rk-nav__text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rk-nav__item.is-active { color:#fff; background:rgba(99,102,241,.16); box-shadow:inset 0 0 0 1px rgba(129,140,248,.22); } .rk-nav__item.is-active i { color:#a5b4fc; } .rk-nav__item.is-active::before { content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--rk-grad); } .rk-nav__badge { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; } .rk-sidebar__foot { padding:14px 18px; border-top:1px solid var(--rk-nav-border); flex-shrink:0; font-size:11.5px; color:var(--rk-nav-muted); } .rk-sidebar__foot b { color:var(--rk-nav-ink); font-weight:600; } /* Main column */ .rk-main { flex:1; min-width:0; margin-left:var(--rk-sidebar-w); display:flex; flex-direction:column; min-height:100vh; } /* Topbar */ .rk-topbar { position:sticky; top:0; z-index:40; height:var(--rk-topbar-h); display:flex; align-items:center; gap:16px; padding:0 26px; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--rk-border); } .rk-topbar__title { display:flex; flex-direction:column; min-width:0; line-height:1.2; } .rk-crumb { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--rk-faint); } .rk-topbar__title h1 { font-size:17px; font-weight:650; color:var(--rk-ink); } .rk-topbar__spacer { flex:1; } .rk-topbar__right { display:flex; align-items:center; gap:8px; } .rk-iconbtn { position:relative; width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:var(--rk-muted); background:transparent; border:1px solid transparent; cursor:pointer; font-size:18px; transition:background .12s, color .12s, border-color .12s; } .rk-iconbtn:hover { background:var(--rk-surface-3); color:var(--rk-ink); text-decoration:none; border-color:var(--rk-border); } .rk-iconbtn__dot { position:absolute; top:5px; right:6px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#ef4444; color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--rk-surface); } /* Theme toggle — both icons live in the button; the html.rk-dark class decides which one shows, so the correct icon is right on first paint (the pre-paint script sets the class before CSS applies). */ .rk-themetoggle .rk-ic-sun { display:none; } .rk-dark .rk-themetoggle .rk-ic-moon { display:none; } .rk-dark .rk-themetoggle .rk-ic-sun { display:inline; } .rk-admin__id { display:flex; align-items:center; gap:10px; padding:4px 6px 4px 4px; border-radius:12px; } .rk-avatar { width:34px; height:34px; border-radius:10px; flex-shrink:0; background:var(--rk-grad); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.02em; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px -4px rgba(99,102,241,.55); } .rk-admin__id .who { display:flex; flex-direction:column; line-height:1.15; min-width:0; } .rk-admin__id .who b { font-size:13px; font-weight:600; color:var(--rk-ink); } .rk-admin__id .who span { font-size:11.5px; color:var(--rk-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:170px; } .rk-vr { width:1px; height:26px; background:var(--rk-border); margin:0 4px; } .rk-menutoggle { display:none; } /* Content region */ .rk-content { flex:1; padding:26px; max-width:1440px; width:100%; margin:0 auto; } @media (min-width:1600px){ .rk-content { max-width:1560px; } } /* Footer */ .rk-footer { padding:18px 26px; border-top:1px solid var(--rk-border); color:var(--rk-faint); font-size:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .rk-footer a { color:var(--rk-muted); } /* ── Page head ──────────────────────────────────────────────────────────────────────────────────── */ .rk-page-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; flex-wrap:wrap; } .rk-page-head__main { min-width:0; } .rk-page-head h2 { font-size:22px; font-weight:700; letter-spacing:-0.025em; } .rk-page-head p { color:var(--rk-muted); font-size:13px; margin-top:4px; max-width:64ch; } .rk-page-head__actions { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } /* ── Cards ──────────────────────────────────────────────────────────────────────────────────────── */ .rk-card { background:var(--rk-surface); border:1px solid var(--rk-border); border-radius:var(--rk-r); box-shadow:var(--rk-shadow-sm); } .rk-card--pad { padding:22px; } .rk-card__head { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--rk-border-2); } .rk-card__head h3 { font-size:14.5px; font-weight:650; } .rk-card__head .rk-card__sub { font-size:12px; color:var(--rk-faint); font-weight:500; } .rk-card__head .rk-spacer { flex:1; } .rk-card__head i.rk-lead { font-size:17px; } .rk-card__body { padding:20px; } .rk-card__body--flush { padding:0; } .rk-card__foot { padding:14px 20px; border-top:1px solid var(--rk-border-2); } /* Danger-tinted card (suspend box etc.) — tokens, so it reads correctly in both themes */ .rk-card--danger { border-color:var(--rk-danger-border); } .rk-card--danger > .rk-card__head { border-bottom-color:var(--rk-danger-border-2); } /* Grid helpers used by the screens — one 16px rhythm unit everywhere */ .rk-grid { display:grid; gap:16px; } .rk-grid--stats { grid-template-columns:repeat(4,minmax(0,1fr)); } .rk-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .rk-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .rk-grid--7-5 { grid-template-columns:7fr 5fr; } .rk-mb { margin-bottom:16px; } @media (max-width:1100px){ .rk-grid--stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .rk-grid--7-5, .rk-grid--3, .rk-grid--2 { grid-template-columns:1fr; } } @media (max-width:560px){ .rk-grid--stats { grid-template-columns:1fr; } } /* ── KPI stat tile ──────────────────────────────────────────────────────────────────────────────── */ .rk-stat { background:var(--rk-surface); border:1px solid var(--rk-border); border-radius:var(--rk-r); padding:18px 20px; box-shadow:var(--rk-shadow-sm); position:relative; overflow:hidden; display:block; transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease; } a.rk-stat:hover { text-decoration:none; box-shadow:var(--rk-shadow); transform:translateY(-2px); border-color:var(--rk-hover-border); } .rk-stat__top { display:flex; align-items:center; justify-content:space-between; gap:10px; } .rk-stat__label { font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.09em; color:var(--rk-faint); } .rk-stat__ico { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; } .rk-stat__ico--brand { background:var(--rk-grad-soft); color:var(--rk-indigo); } .rk-stat__ico--success { background:var(--st-active-bg); color:var(--st-active-fg); } .rk-stat__ico--info { background:var(--st-trial-bg); color:var(--st-trial-fg); } .rk-stat__ico--danger { background:var(--st-suspended-bg); color:var(--st-suspended-fg); } .rk-stat__ico--warning { background:var(--st-partial-bg); color:var(--st-partial-fg); } .rk-stat__value { font-size:28px; font-weight:720; letter-spacing:-0.03em; color:var(--rk-ink); margin-top:11px; line-height:1; font-variant-numeric:tabular-nums; } .rk-stat__value small { font-size:15px; font-weight:600; color:var(--rk-muted); letter-spacing:0; } .rk-stat__foot { margin-top:9px; font-size:12px; color:var(--rk-muted); display:flex; align-items:center; gap:6px; } .rk-trend { display:inline-flex; align-items:center; gap:3px; font-weight:650; font-size:11.5px; padding:2px 7px; border-radius:999px; } .rk-trend--up { color:var(--st-active-fg); background:var(--st-active-bg); } .rk-trend--down { color:var(--st-suspended-fg); background:var(--st-suspended-bg); } .rk-trend--flat { color:var(--rk-muted); background:var(--rk-surface-3); } /* Mini stat cell (usage blocks etc.) — the compact centred cousin of .rk-stat */ .rk-minis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } @media (max-width:560px){ .rk-minis { grid-template-columns:repeat(2,minmax(0,1fr)); } } .rk-stat--mini { text-align:center; padding:14px 8px; border:1px solid var(--rk-border); border-radius:var(--rk-r-sm); background:var(--rk-surface-2); } .rk-stat--mini i { font-size:18px; color:var(--rk-indigo); } .rk-stat--mini__val { font-size:22px; font-weight:700; color:var(--rk-ink); letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums; } .rk-stat--mini__label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--rk-faint); } /* ── Tables ─────────────────────────────────────────────────────────────────────────────────────── */ .rk-table-wrap { width:100%; overflow-x:auto; } .rk-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; } .rk-table thead th { text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--rk-faint); background:var(--rk-surface-2); padding:10px 18px; white-space:nowrap; border-bottom:1px solid var(--rk-border); } .rk-table thead th:first-child { border-top-left-radius:var(--rk-r); } .rk-table thead th:last-child { border-top-right-radius:var(--rk-r); } .rk-table tbody td { padding:13px 18px; border-bottom:1px solid var(--rk-border-2); color:var(--rk-ink-2); vertical-align:middle; } .rk-table tbody tr:last-child td { border-bottom:0; } .rk-table tbody tr { transition:background .1s ease; } .rk-table tbody tr:hover { background:var(--rk-surface-2); } .rk-table .rk-td-strong { font-weight:600; color:var(--rk-ink); } .rk-table .rk-td-muted { color:var(--rk-faint); } .rk-table .rk-td-num { font-variant-numeric:tabular-nums; } .rk-table .rk-td-right { text-align:right; } .rk-table a.rk-link { color:var(--rk-ink); font-weight:600; } .rk-table a.rk-link:hover { color:var(--rk-link); } /* Card wrapping a flush table: round the last row's corners */ .rk-card .rk-table-wrap:last-child .rk-table tbody tr:last-child td:first-child { border-bottom-left-radius:var(--rk-r); } .rk-card .rk-table-wrap:last-child .rk-table tbody tr:last-child td:last-child { border-bottom-right-radius:var(--rk-r); } /* ── Badges / status pills ──────────────────────────────────────────────────────────────────────── */ .rk-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:650; line-height:1.5; white-space:nowrap; background:var(--rk-surface-3); color:var(--rk-muted); } .rk-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; } .rk-badge--plain::before { display:none; } .rk-badge--trial { background:var(--st-trial-bg); color:var(--st-trial-fg); } .rk-badge--active { background:var(--st-active-bg); color:var(--st-active-fg); } .rk-badge--suspended { background:var(--st-suspended-bg); color:var(--st-suspended-fg); } .rk-badge--cancelled { background:var(--st-cancelled-bg); color:var(--st-cancelled-fg); } .rk-badge--offboarded { background:var(--st-offboarded-bg); color:var(--st-offboarded-fg); } .rk-badge--comped { background:var(--st-comped-bg); color:var(--st-comped-fg); } .rk-badge--past_due { background:var(--st-pastdue-bg); color:var(--st-pastdue-fg); } .rk-badge--trialing { background:var(--st-trial-bg); color:var(--st-trial-fg); } .rk-badge--paid { background:var(--st-paid-bg); color:var(--st-paid-fg); } .rk-badge--refunded { background:var(--st-refunded-bg); color:var(--st-refunded-fg); } .rk-badge--partially_refunded { background:var(--st-partial-bg); color:var(--st-partial-fg); } .rk-badge--open { background:var(--st-open-bg); color:var(--st-open-fg); } .rk-badge--draft { background:var(--st-draft-bg); color:var(--st-draft-fg); } .rk-badge--void { background:var(--st-void-bg); color:var(--st-void-fg); } .rk-badge--new { background:var(--st-new-bg); color:var(--st-new-fg); } .rk-badge--waiting { background:var(--st-waiting-bg); color:var(--st-waiting-fg); } .rk-badge--resolved { background:var(--st-resolved-bg); color:var(--st-resolved-fg); } .rk-badge--closed { background:var(--st-closed-bg); color:var(--st-closed-fg); } /* Plan chip — a neutral, refined tag */ .rk-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:7px; font-size:11.5px; font-weight:600; background:var(--rk-surface-3); color:var(--rk-ink-2); border:1px solid var(--rk-border); } .rk-tag--brand { background:var(--rk-grad-soft); color:var(--rk-indigo); border-color:transparent; } /* ── Buttons ────────────────────────────────────────────────────────────────────────────────────── */ .rk-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 16px; border-radius:10px; font-size:13.5px; font-weight:600; line-height:1; border:1px solid transparent; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background .13s ease, box-shadow .13s ease, border-color .13s ease, color .13s ease, transform .05s ease; } .rk-btn:hover { text-decoration:none; } .rk-btn:active { transform:translateY(1px); } .rk-btn i { font-size:16px; } .rk-btn--sm { padding:6px 11px; font-size:12.5px; border-radius:8px; } .rk-btn--sm i { font-size:15px; } .rk-btn--lg { padding:12px 22px; font-size:14.5px; border-radius:12px; } .rk-btn--block { width:100%; } .rk-btn--primary { background:var(--rk-grad); color:#fff; box-shadow:0 8px 18px -8px rgba(99,102,241,.7), inset 0 1px 0 rgba(255,255,255,.14); } .rk-btn--primary:hover { color:#fff; box-shadow:0 12px 24px -8px rgba(99,102,241,.8); filter:saturate(1.08) brightness(1.03); } .rk-btn--secondary { background:var(--rk-surface); color:var(--rk-ink-2); border-color:var(--rk-border); box-shadow:var(--rk-shadow-xs); } .rk-btn--secondary:hover { background:var(--rk-surface-2); color:var(--rk-ink); border-color:var(--rk-hover-border); } .rk-btn--ghost { background:transparent; color:var(--rk-muted); } .rk-btn--ghost:hover { background:var(--rk-surface-3); color:var(--rk-ink); } .rk-btn--danger { background:var(--rk-surface); color:var(--st-suspended-fg); border-color:var(--rk-danger-border); } .rk-btn--danger:hover { background:var(--rk-danger-well); color:var(--st-suspended-fg); border-color:var(--rk-danger-border); } .rk-btn--danger-solid { background:#dc2626; color:#fff; box-shadow:0 8px 18px -8px rgba(220,38,38,.7); } .rk-btn--danger-solid:hover { background:#b91c1c; color:#fff; } .rk-btn:disabled, .rk-btn.is-disabled { opacity:.55; cursor:not-allowed; box-shadow:none; filter:none; } .rk-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } /* ── Forms ──────────────────────────────────────────────────────────────────────────────────────── */ .rk-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; } .rk-label { font-size:12.5px; font-weight:600; color:var(--rk-ink-2); } .rk-hint { font-size:12px; color:var(--rk-faint); } .rk-input, .rk-select, .rk-textarea { width:100%; padding:9px 12px; font-size:13.5px; color:var(--rk-ink); background:var(--rk-surface); border:1px solid var(--rk-border); border-radius:var(--rk-r-xs); transition:border-color .12s ease, box-shadow .12s ease; font-family:inherit; line-height:1.4; } .rk-input::placeholder, .rk-textarea::placeholder { color:var(--rk-faint); } .rk-input:focus, .rk-select:focus, .rk-textarea:focus { outline:none; border-color:var(--rk-indigo); box-shadow:0 0 0 3px var(--rk-ring); } .rk-textarea { resize:vertical; min-height:84px; } .rk-select { appearance:none; -webkit-appearance:none; background-repeat:no-repeat; background-position:right 11px center; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } .rk-input-group { display:flex; align-items:center; gap:8px; } .rk-input-icon { position:relative; } .rk-input-icon > i { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--rk-faint); font-size:16px; pointer-events:none; } .rk-input-icon > .rk-input { padding-left:34px; } .rk-check { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:var(--rk-ink-2); cursor:pointer; } .rk-check input { width:17px; height:17px; accent-color:var(--rk-indigo); } .rk-filterbar { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; } .rk-filterbar .rk-field { margin-bottom:0; } /* Required-field asterisk + invalid state (server-side validation errors) */ .rk-req { color:var(--st-suspended-fg); font-weight:650; } .rk-input--invalid, .rk-select.rk-input--invalid, .rk-textarea.rk-input--invalid { border-color:#dc2626; } .rk-input--invalid:focus { border-color:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.16); } .rk-field__error { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--st-suspended-fg); } .rk-field__error i { font-size:14px; } /* ── Empty state ────────────────────────────────────────────────────────────────────────────────── */ .rk-empty { text-align:center; padding:44px 24px; color:var(--rk-muted); } .rk-empty__ico { width:56px; height:56px; border-radius:15px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:var(--rk-grad-soft); color:var(--rk-indigo); font-size:26px; } .rk-empty h4 { font-size:15px; margin-bottom:5px; } .rk-empty p { font-size:13px; color:var(--rk-faint); max-width:380px; margin:0 auto; } /* ── Flash ──────────────────────────────────────────────────────────────────────────────────────── */ .rk-flash { display:flex; align-items:flex-start; gap:11px; padding:13px 16px; border-radius:12px; margin-bottom:18px; font-size:13.5px; font-weight:500; border:1px solid transparent; box-shadow:var(--rk-shadow-xs); } .rk-flash i { font-size:18px; flex-shrink:0; margin-top:1px; } .rk-flash--success { background:var(--st-active-bg); color:#065f46; border-color:#a7f3d0; } .rk-flash--error { background:var(--st-suspended-bg); color:#991b1b; border-color:#fecaca; } .rk-flash--info { background:var(--st-trial-bg); color:#1e40af; border-color:#bfdbfe; } /* ── Overlay / modal chrome (refund dialog etc.) — vanilla, .is-open shows it ───────────────────── */ .rk-overlay { display:none; position:fixed; inset:0; z-index:100; padding:20px; background:rgba(15,23,42,.5); backdrop-filter:blur(2px); align-items:center; justify-content:center; } .rk-overlay.is-open { display:flex; } .rk-overlay__panel { width:100%; max-width:440px; box-shadow:var(--rk-shadow-lg); } /* ── Misc helpers ───────────────────────────────────────────────────────────────────────────────── */ .rk-muted { color:var(--rk-muted); } .rk-faint { color:var(--rk-faint); } .rk-strong { color:var(--rk-ink); font-weight:600; } .rk-small { font-size:12px; } .rk-nowrap { white-space:nowrap; } .rk-chart { width:100%; min-height:300px; } .rk-dl { display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:13.5px; } .rk-dl dt { color:var(--rk-faint); font-weight:500; } .rk-dl dd { color:var(--rk-ink-2); font-weight:600; margin:0; text-align:right; } /* ── Mobile ─────────────────────────────────────────────────────────────────────────────────────── */ .rk-scrim { display:none; } @media (max-width:1024px){ .rk-sidebar { transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--rk-shadow-lg); } .rk-admin.rk-nav-open .rk-sidebar { transform:translateX(0); } .rk-main { margin-left:0; } .rk-menutoggle { display:inline-flex; } .rk-admin.rk-nav-open .rk-scrim { display:block; position:fixed; inset:0; z-index:55; background:rgba(15,23,42,.42); } } @media (max-width:640px){ .rk-content { padding:18px 15px; } .rk-topbar { padding:0 15px; } .rk-admin__id .who { display:none; } .rk-page-head h2 { font-size:20px; } } /* ══ Dark theme — explicit OPT-IN only (html.rk-dark, persisted in localStorage 'rk-theme') ═══════ Light is ALWAYS the default; there is deliberately NO prefers-color-scheme auto-follow. The topbar toggle adds/removes .rk-dark on ; a pre-paint script in the layout applies the stored choice before first paint. This is the COMPLETE token override set — page/surface/border/ink ramps, status pills, danger tints, shadows — so every component below reads correctly without per-view styles. */ .rk-dark .rk-admin { /* Ink ramp */ --rk-ink:#f1f5f9; --rk-ink-2:#e2e8f0; --rk-body:#cbd5e1; --rk-muted:#94a3b8; --rk-faint:#64748b; --rk-link:#a5b4fc; /* Surfaces + borders */ --rk-bg:#0a0f1a; --rk-surface:#101a2c; --rk-surface-2:#152034; --rk-surface-3:#1c2a42; --rk-border:#22304a; --rk-border-2:#1c2940; --rk-ring:rgba(129,140,248,.35); /* Sidebar edges blend into the dark page */ --rk-nav-border:rgba(148,163,184,.12); /* Shadows — deeper, on near-black */ --rk-shadow-xs:0 1px 2px rgba(0,0,0,.35); --rk-shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.35); --rk-shadow: 0 1px 3px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.65); --rk-shadow-lg:0 20px 48px -18px rgba(0,0,0,.75); --rk-hover-border:#2e405f; /* Danger tints */ --rk-danger-border:rgba(239,68,68,.36); --rk-danger-border-2:rgba(239,68,68,.22); --rk-danger-well:rgba(239,68,68,.10); /* Status pills — translucent wells + brightened text, readable on dark surfaces */ --st-trial-bg:rgba(59,130,246,.16); --st-trial-fg:#93c5fd; --st-active-bg:rgba(16,185,129,.15); --st-active-fg:#6ee7b7; --st-suspended-bg:rgba(239,68,68,.15);--st-suspended-fg:#fca5a5; --st-cancelled-bg:rgba(148,163,184,.13); --st-cancelled-fg:#cbd5e1; --st-offboarded-bg:rgba(148,163,184,.10); --st-offboarded-fg:#94a3b8; --st-comped-bg:rgba(139,92,246,.18); --st-comped-fg:#c4b5fd; --st-pastdue-bg:rgba(249,115,22,.15); --st-pastdue-fg:#fdba74; --st-paid-bg:rgba(16,185,129,.15); --st-paid-fg:#6ee7b7; --st-refunded-bg:rgba(249,115,22,.15);--st-refunded-fg:#fdba74; --st-partial-bg:rgba(245,158,11,.15); --st-partial-fg:#fcd34d; --st-open-bg:rgba(59,130,246,.16); --st-open-fg:#93c5fd; --st-draft-bg:rgba(148,163,184,.12); --st-draft-fg:#94a3b8; --st-void-bg:rgba(148,163,184,.09); --st-void-fg:#64748b; /* Support-ticket statuses (dark twins; 'open' reuses --st-open above) */ --st-new-bg:rgba(99,102,241,.18); --st-new-fg:#c7d2fe; --st-waiting-bg:rgba(245,158,11,.15); --st-waiting-fg:#fcd34d; --st-resolved-bg:rgba(16,185,129,.15);--st-resolved-fg:#6ee7b7; --st-closed-bg:rgba(148,163,184,.12); --st-closed-fg:#94a3b8; } /* Chrome pieces whose light look is not var-driven */ .rk-dark .rk-topbar { background:rgba(10,15,26,.78); border-bottom-color:var(--rk-border-2); } .rk-dark .rk-sidebar { border-right-color:rgba(0,0,0,.55); } .rk-dark .rk-admin ::selection { background:rgba(129,140,248,.3); } /* Indigo accents brightened for dark surfaces (the gradient tokens themselves stay untouched) */ .rk-dark .rk-stat__ico--brand, .rk-dark .rk-empty__ico, .rk-dark .rk-tag--brand, .rk-dark .rk-stat--mini i { color:#a5b4fc; } /* Inputs sit slightly deeper than cards so they read as wells */ .rk-dark .rk-input, .rk-dark .rk-select, .rk-dark .rk-textarea { background:#0c1424; } .rk-dark .rk-input:focus, .rk-dark .rk-select:focus, .rk-dark .rk-textarea:focus { border-color:#818cf8; } .rk-dark .rk-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* Buttons */ .rk-dark .rk-btn--secondary { background:var(--rk-surface-2); } .rk-dark .rk-btn--secondary:hover { background:var(--rk-surface-3); } .rk-dark .rk-btn--danger { background:transparent; } .rk-dark .rk-btn--danger-solid { box-shadow:0 8px 18px -8px rgba(220,38,38,.5); } /* Flash banners — translucent wells instead of pastels */ .rk-dark .rk-flash--success { background:rgba(16,185,129,.12); color:#6ee7b7; border-color:rgba(16,185,129,.3); } .rk-dark .rk-flash--error { background:rgba(239,68,68,.12); color:#fca5a5; border-color:rgba(239,68,68,.3); } .rk-dark .rk-flash--info { background:rgba(59,130,246,.12); color:#93c5fd; border-color:rgba(59,130,246,.3); } /* Overlay scrim a touch heavier on dark */ .rk-dark .rk-overlay { background:rgba(2,6,23,.66); } /* ── Email templates (SELFSERVE §6) ─────────────────────────────────────────────────────────────── */ /* Monospace body editor — HTML email markup reads best fixed-width. */ .rk-textarea--code { font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.55; min-height:220px; } /* Placeholder chips — click to insert {{token}} at the cursor. A button styled like an inline code tag. */ .rk-ph-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; } .rk-ph { font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; line-height:1.5; padding:3px 8px; border-radius:7px; cursor:pointer; white-space:nowrap; background:var(--rk-surface-3); color:var(--rk-ink-2); border:1px solid var(--rk-border); transition:background .12s ease, border-color .12s ease, color .12s ease; } .rk-ph:hover { background:var(--rk-grad-soft); color:var(--rk-indigo); border-color:transparent; } /* Preview modal — email HTML renders on white in an isolated iframe, both themes. */ .rk-overlay__panel--wide { max-width:760px; } .rk-preview-subject { font-size:13.5px; color:var(--rk-ink-2); margin-bottom:10px; padding:9px 12px; border:1px solid var(--rk-border); border-radius:var(--rk-r-xs); background:var(--rk-surface-2); } .rk-preview-subject b { color:var(--rk-faint); font-weight:600; } .rk-preview-frame { width:100%; height:440px; border:1px solid var(--rk-border); border-radius:var(--rk-r-xs); background:#fff; display:block; } /* One template = one card in a stack; a disabled template dims to read as "off". */ .rk-tmpl.is-off { opacity:.72; } .rk-tmpl.is-off .rk-textarea, .rk-tmpl.is-off .rk-input { background:var(--rk-surface-2); } /* ── Support desk — ticket conversation thread (ADMIN-BACKLOG §CHIP 1) ─────────────────────────────── */ /* Composed from the existing token ramp so dark mode is automatic (no per-view colours). A message is a bordered well; OUR (admin) replies take the indigo grad-soft tint and sit right; the requester's sit left; an internal note uses the amber "waiting" tokens + a dashed edge so it reads as private. */ .rk-thread { display:flex; flex-direction:column; gap:14px; } .rk-msg { max-width:82%; align-self:flex-start; } .rk-msg--admin { align-self:flex-end; } .rk-msg__bubble { border:1px solid var(--rk-border); background:var(--rk-surface-2); border-radius:var(--rk-r-sm); padding:11px 14px; box-shadow:var(--rk-shadow-xs); } .rk-msg--admin .rk-msg__bubble { border-color:transparent; background:var(--rk-grad-soft); } .rk-msg--note .rk-msg__bubble { background:var(--st-waiting-bg); border:1px dashed var(--st-waiting-fg); box-shadow:none; } .rk-msg__meta { display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:12px; flex-wrap:wrap; } .rk-msg__who { font-weight:650; color:var(--rk-ink-2); } .rk-msg__time { color:var(--rk-faint); } .rk-msg__body { color:var(--rk-body); white-space:pre-wrap; word-break:break-word; line-height:1.55; } /* Attachment chips under a message (class-bearing anchors → self-styling, not body-link indigo) */ .rk-msg__files { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .rk-filechip { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:8px; font-size:12px; background:var(--rk-surface-3); color:var(--rk-ink-2); border:1px solid var(--rk-border); } .rk-filechip:hover { background:var(--rk-grad-soft); color:var(--rk-indigo); border-color:transparent; } .rk-filechip i { font-size:14px; } /* Unread cue in the queue (a ticket with unseen requester activity) — teal reads the same in both themes. */ .rk-unread-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--rk-teal); margin-right:5px; vertical-align:middle; } /* ══ Inline-style utilities ═══════════════════════════════════════════════════════════════════════ Small, token-driven classes so the console views can drop their scattered style="" attributes and read the same in both themes for free (a class-bearing element is exempt from the body-link paint). Grouped to mirror the design pass punch list — reach for these before writing a new inline style. */ /* Lead-icon colour modifiers (on .rk-card__head i.rk-lead / inline lead icons) */ .rk-lead--teal { color:var(--rk-teal); } .rk-lead--indigo { color:var(--rk-indigo); } .rk-lead--danger { color:var(--st-suspended-fg); } .rk-lead--warn { color:var(--st-partial-fg); } .rk-lead--comped { color:var(--st-comped-fg); } .rk-lead--muted { color:var(--rk-muted); } .rk-dark .rk-lead--indigo { color:#a5b4fc; } /* match the brand-brighten twin (css:551) */ .rk-icon-nudge { margin-top:1px; } /* Field / actions rhythm */ .rk-field--flush { margin-bottom:0; } .rk-field--grow { flex:1; min-width:200px; margin-bottom:0; } .rk-field--end { justify-content:flex-end; } .rk-actions--end { justify-content:flex-end; } .rk-actions--top { align-items:flex-start; } .rk-actions--mt { margin-top:14px; } .rk-actions--mt-sm { margin-top:6px; } /* Form-column grid (zero row-gap) */ .rk-grid--form { gap:0 18px; } .rk-divide-top { padding-top:6px; border-top:1px solid var(--rk-border-2); margin-top:4px; } /* Control width scale (collapse the max-/min-width scatter to a fixed ramp) */ .rk-w-xs { max-width:120px; } .rk-w-sm { max-width:160px; } .rk-w-md { max-width:200px; } .rk-w-lg { max-width:240px; } .rk-w-xl { max-width:320px; } .rk-w-prose { max-width:34ch; } .rk-minw-sm { min-width:150px; } .rk-minw-md { min-width:200px; } /* Card / spacing utilities */ .rk-card--narrow { max-width:720px; } .rk-card--form { max-width:920px; } .rk-card__head--flush { padding:0 0 10px; } .rk-card__row { padding:14px 20px; border-top:1px solid var(--rk-border-2); } .rk-mt { margin-top:16px; } .rk-mt-1 { margin-top:4px; } .rk-mt-2 { margin-top:8px; } .rk-mb-sm { margin-bottom:12px; } .rk-ml-1 { margin-left:4px; } .rk-label--mb { margin-bottom:6px; } /* Misc one-offs promoted from inline styles */ .rk-inline { display:inline; } .rk-normal { font-weight:400; } .rk-body-c { color:var(--rk-body); } .rk-hint--warn { color:var(--st-partial-fg); } .rk-hint--row { display:flex; gap:8px; align-items:flex-start; } .rk-check--mt { margin-top:4px; } .rk-chiprow { display:flex; flex-wrap:wrap; gap:7px; } .rk-td-neg { color:var(--st-suspended-fg); } .rk-admin [hidden] { display:none !important; } .rk-hidden { display:none !important; } /* ══ Notification bell dropdown ════════════════════════════════════════════════════════════════════ The topbar bell (a .rk-iconbtn with the existing .rk-iconbtn__dot badge) wraps in .rk-notif; the panel is .rk-notif-menu, opened by adding .is-open on the wrapper. Fully token-driven, so the dark twin is automatic (is-unread uses grad-soft, which reads on both surfaces). */ .rk-notif { position:relative; } .rk-notif-menu { position:absolute; top:calc(100% + 8px); right:0; width:min(360px, calc(100vw - 24px)); background:var(--rk-surface); border:1px solid var(--rk-border); border-radius:var(--rk-r); box-shadow:var(--rk-shadow-lg); overflow:hidden; z-index:50; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .14s ease, transform .14s ease; } .rk-notif.is-open .rk-notif-menu { opacity:1; transform:none; pointer-events:auto; } .rk-notif-menu__head { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--rk-border-2); } .rk-notif-menu__head h4 { font-size:13.5px; font-weight:650; } .rk-notif-menu__count { margin-left:auto; font-size:11.5px; color:var(--rk-faint); } .rk-notif-menu__list { max-height:min(60vh,420px); overflow-y:auto; } .rk-notif-menu__foot { padding:10px 16px; border-top:1px solid var(--rk-border-2); text-align:center; } .rk-notif-item { display:flex; gap:11px; padding:11px 16px; border-bottom:1px solid var(--rk-border-2); transition:background .1s ease; } .rk-notif-item:last-child { border-bottom:0; } .rk-notif-item:hover { background:var(--rk-surface-2); text-decoration:none; } .rk-notif-item.is-unread { background:var(--rk-grad-soft); } .rk-notif-item__ico { width:34px; height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:17px; background:var(--rk-surface-3); color:var(--rk-muted); } .rk-notif-item__body { min-width:0; } .rk-notif-item__title { font-size:13px; font-weight:600; color:var(--rk-ink-2); } .rk-notif-item__meta { font-size:11.5px; color:var(--rk-faint); margin-top:2px; } .rk-notif-empty { padding:32px 16px; text-align:center; color:var(--rk-faint); font-size:12.5px; } /* ══ Health status stat cards ══════════════════════════════════════════════════════════════════════ A .rk-stat with a left status rail + a standalone status dot for the system-health board. */ .rk-stat--health { border-left:3px solid var(--rk-border); } .rk-stat--health.is-ok { border-left-color:var(--st-active-fg); } .rk-stat--health.is-warn { border-left-color:var(--st-partial-fg); } .rk-stat--health.is-down { border-left-color:var(--st-suspended-fg); } .rk-health-dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--rk-faint); } .rk-health-dot.is-ok { background:var(--st-active-fg); } .rk-health-dot.is-warn { background:var(--st-partial-fg); } .rk-health-dot.is-down { background:var(--st-suspended-fg); } /* ══ Chart containers ══════════════════════════════════════════════════════════════════════════════ Sizing + a token-driven legend for the ApexCharts analytics screens (series colours + gridlines are read from the tokens in each chart's own script and re-applied on the rk:theme broadcast). */ .rk-chart--sm { min-height:220px; } .rk-chart--lg { min-height:360px; } .rk-chart-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:12px; color:var(--rk-muted); } .rk-chart-legend__key { display:inline-flex; align-items:center; gap:6px; } .rk-chart-legend__dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; } /* ══ Pricing matrix (a .rk-table modifier) ════════════════════════════════════════════════════════ Centre-aligned plan columns, a left-aligned feature column, and a featured-plan tint. Wraps in the existing .rk-table-wrap for narrow widths; all token-driven so dark mode needs no twin. */ .rk-matrix th, .rk-matrix td { text-align:center; } .rk-matrix th:first-child, .rk-matrix td:first-child { text-align:left; font-weight:600; color:var(--rk-ink); } .rk-matrix thead th { font-size:12px; text-transform:none; letter-spacing:0; } /* plan names, not eyebrow caps */ .rk-matrix__check { color:var(--st-active-fg); font-size:17px; } .rk-matrix__dash { color:var(--rk-faint); } .rk-matrix__col--featured { background:var(--rk-grad-soft); } .rk-matrix__price { font-size:20px; font-weight:720; color:var(--rk-ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .rk-matrix__per { font-size:12px; color:var(--rk-muted); font-weight:600; } /* ══ Toast (non-blocking flash) ════════════════════════════════════════════════════════════════════ A fixed top-right toaster whose bodies reuse .rk-flash / .rk-flash--* (dark twins already exist), so a toast is
. .is-in slides it in, .is-out out. */ .rk-toaster { position:fixed; top:16px; right:16px; z-index:120; display:flex; flex-direction:column; gap:10px; width:min(360px, calc(100vw - 32px)); pointer-events:none; } .rk-toast { pointer-events:auto; box-shadow:var(--rk-shadow-lg); transform:translateX(12px); opacity:0; transition:transform .22s ease, opacity .22s ease; } .rk-toast.is-in { transform:none; opacity:1; } .rk-toast.is-out { transform:translateX(12px); opacity:0; } .rk-toast__close { margin-left:auto; background:transparent; border:0; color:inherit; opacity:.6; cursor:pointer; font-size:16px; line-height:1; } .rk-toast__close:hover { opacity:1; } @media (max-width:640px){ .rk-toaster { top:auto; bottom:12px; left:12px; right:12px; width:auto; } } /* ══ Table pagination ══════════════════════════════════════════════════════════════════════════════ A reusable pager placed as the last child inside a table card (it becomes the card foot, so the flush-table corner-rounding shifts onto it). Token-driven; one explicit dark brand-brighten. */ .rk-pager { display:flex; align-items:center; gap:6px; justify-content:flex-end; padding:14px 20px; border-top:1px solid var(--rk-border-2); flex-wrap:wrap; } .rk-pager__info { margin-right:auto; font-size:12.5px; color:var(--rk-faint); } .rk-pager__btn { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; border-radius:var(--rk-r-xs); font-size:13px; font-weight:600; color:var(--rk-ink-2); background:var(--rk-surface); border:1px solid var(--rk-border); transition:background .12s ease, border-color .12s ease, color .12s ease; } .rk-pager__btn:hover { background:var(--rk-surface-2); color:var(--rk-ink); border-color:var(--rk-hover-border); text-decoration:none; } .rk-pager__btn.is-active { background:var(--rk-grad-soft); color:var(--rk-indigo); border-color:transparent; } .rk-pager__btn.is-disabled { opacity:.5; pointer-events:none; } .rk-pager__gap { color:var(--rk-faint); padding:0 2px; } .rk-dark .rk-pager__btn { background:var(--rk-surface-2); } .rk-dark .rk-pager__btn.is-active { color:#a5b4fc; } /* ── TOTP enrolment (Area 4) — setup + recovery-code views ─────────────────────────────────────── */ .rk-steps { margin:0 0 4px; padding-left:20px; color:var(--rk-muted); font-size:13px; line-height:1.7; } .rk-steps li { margin-bottom:3px; } .rk-2fa-qr { display:inline-block; padding:10px; background:#fff; border:1px solid var(--rk-border); border-radius:12px; min-width:196px; min-height:196px; } .rk-2fa-qr img, .rk-2fa-qr canvas, .rk-2fa-qr table { display:block; } .rk-mono { font-family:var(--rk-mono); } .rk-code { letter-spacing:.4em; text-align:center; font-weight:650; } .rk-rule { border:0; border-top:1px solid var(--rk-border); margin:20px 0; } .rk-codes { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .rk-codes li { padding:9px 12px; background:var(--rk-surface-3); border:1px solid var(--rk-border); border-radius:8px; font-size:14px; letter-spacing:.06em; color:var(--rk-ink-2); text-align:center; } /* Shared design-system primitives some Growth screens reference (defined here so they render consistently) */ .rk-page-head__aside { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .rk-stat__sub { margin-top:6px; font-size:12px; color:var(--rk-muted); }