/* ============================================================ reseller-console.css Premium facelift for /reseller/console — DROP-IN STYLESHEET. Load order: theme.css → ui.css → reseller-console.css ------------------------------------------------------------ Everything here uses theme.css tokens. The only literal hexes are the espresso SIDEBAR tones and a few cream-on-dark text values that have no token equivalent (documented inline). Build markup against these class names; see console-shell.html. ============================================================ */ /* ---- console-only vars (espresso sidebar has no theme token) ---- */ :root{ --rc-sidebar-top:#1F1A14; --rc-sidebar-bot:#241D17; --rc-sidebar-glabel:#6E624F; /* group labels */ --rc-sidebar-item:#C5B8A2; /* idle nav text */ --rc-sidebar-item-hover:#EDE3D0; --rc-sidebar-item-active:#F6ECD8; --rc-sidebar-org:#F3E9D6; /* cream org name */ --rc-sidebar-sub:#9D8E78; /* muted sub text */ --rc-gold-light:#E8C879; /* bright gold for gauges/highlights */ --rc-sidebar-w:248px; --rc-topbar-h:64px; --rc-drawer-w:380px; } /* ============================================================ LAYOUT SHELL ============================================================ */ .rc{ display:flex; min-height:100vh; background:var(--bg-page); } .rc-main{ flex:1; display:flex; flex-direction:column; min-width:0; } .rc-content{ flex:1; padding:26px 28px 40px; } /* ---- Sidebar ---- */ .rc-side{ width:var(--rc-sidebar-w); flex-shrink:0; background:linear-gradient(180deg,var(--rc-sidebar-top) 0%,var(--rc-sidebar-bot) 100%); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; } .rc-side-org{ padding:22px 20px 18px; border-bottom:1px solid rgba(255,255,255,.07); } .rc-side-org-row{ display:flex; align-items:center; gap:11px; } .rc-side-logo{ width:38px; height:38px; border-radius:var(--radius-md); flex-shrink:0; background:var(--brand-gradient); display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow:0 4px 12px rgba(139,105,20,.4); } .rc-side-org-name{ font-family:var(--font-serif); font-weight:600; font-size:18px; color:var(--rc-sidebar-org); line-height:1.1; } .rc-side-org-sub{ font-size:11px; color:var(--rc-sidebar-sub); margin-top:2px; font-weight:500; } .rc-tier{ display:inline-flex; align-items:center; gap:5px; margin-top:12px; background:rgba(139,105,20,.22); border:1px solid rgba(166,125,26,.4); color:var(--rc-gold-light); font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:var(--radius-full); letter-spacing:.05em; text-transform:uppercase; } .rc-nav{ flex:1; padding:14px 12px; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; } .rc-nav::-webkit-scrollbar{ width:0; height:0; display:none; } /* clean sidebar — no visible scroll track */ .rc-nav-group{ margin-bottom:16px; } .rc-nav-glabel{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--rc-sidebar-glabel); padding:0 12px 7px; } .rc-nav-item{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--radius-sm); color:var(--rc-sidebar-item); font-size:13.5px; font-weight:500; cursor:pointer; margin-bottom:1px; position:relative; text-decoration:none; transition:background var(--transition-fast),color var(--transition-fast); } .rc-nav-item .rc-ni-ico{ width:18px; text-align:center; font-size:15px; opacity:.85; } .rc-nav-item:hover{ background:rgba(255,255,255,.05); color:var(--rc-sidebar-item-hover); } .rc-nav-item.active{ background:linear-gradient(90deg,rgba(139,105,20,.28),rgba(139,105,20,.08)); color:var(--rc-sidebar-item-active); font-weight:600; } .rc-nav-item.active::before{ content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--brand-secondary); } .rc-nav-badge{ margin-left:auto; font-size:10px; font-weight:700; background:var(--brand-primary); color:#fff; padding:1px 7px; border-radius:var(--radius-full); } .rc-nav-badge.alert{ background:var(--status-error); } /* ---- Pool widget (pinned bottom of sidebar) ---- */ .rc-pool{ margin:12px; padding:15px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-md); } .rc-pool-top{ display:flex; justify-content:space-between; align-items:baseline; } .rc-pool-label{ font-size:11px; color:var(--rc-sidebar-sub); font-weight:600; text-transform:uppercase; letter-spacing:.05em; } .rc-pool-days{ font-size:11px; color:var(--rc-gold-light); font-weight:700; } .rc-pool-val{ font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--rc-sidebar-org); line-height:1; margin:6px 0 10px; } .rc-pool-bar{ height:7px; border-radius:var(--radius-full); background:rgba(255,255,255,.1); overflow:hidden; } .rc-pool-fill{ height:100%; border-radius:var(--radius-full); background:linear-gradient(90deg,var(--brand-2,#A67D1A),var(--rc-gold-light)); } .rc-pool-cta{ display:block; text-align:center; margin-top:12px; background:var(--brand-gradient); color:#fff; font-size:12.5px; font-weight:700; padding:9px; border-radius:var(--radius-sm); text-decoration:none; } /* ---- Topbar ---- */ .rc-topbar{ height:var(--rc-topbar-h); flex-shrink:0; background:var(--bg-card); border-bottom:1px solid var(--border-medium); display:flex; align-items:center; padding:0 28px; gap:18px; position:sticky; top:0; z-index:20; } .rc-tb-title{ font-family:var(--font-serif); font-size:27px; font-weight:600; letter-spacing:-.01em; } /* Topbar search (real input) */ .rc-tb-search{ margin-left:auto; display:flex; align-items:center; gap:9px; background:var(--bg-input); border:1px solid var(--border-medium); border-radius:var(--radius-full); padding:0 16px; height:38px; width:280px; transition:border-color var(--transition-fast),box-shadow var(--transition-fast); } .rc-tb-search:focus-within{ border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(139,105,20,.12); } .rc-tb-search-ico{ font-size:14px; opacity:.7; flex-shrink:0; } .rc-tb-search input{ border:0; background:transparent; outline:none; width:100%; font:inherit; font-size:13px; color:var(--text-strong); } .rc-tb-search input::placeholder{ color:var(--text-muted); } .rc-tb-icon{ width:38px; height:38px; border-radius:var(--radius-full); background:var(--bg-input); border:1px solid var(--border-medium); display:flex; align-items:center; justify-content:center; font-size:16px; position:relative; cursor:pointer; transition:background var(--transition-fast); } .rc-tb-icon:hover{ background:var(--bg-subtle); } .rc-tb-icon .rc-dot{ position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--status-error); border:2px solid var(--bg-card); } .rc-tb-user{ display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; background:var(--bg-input); border:1px solid var(--border-medium); border-radius:var(--radius-full); font-size:13px; font-weight:600; color:var(--text-strong); cursor:pointer; transition:background var(--transition-fast); } .rc-tb-user:hover{ background:var(--bg-subtle); } .rc-tb-avatar{ width:30px; height:30px; border-radius:50%; background:var(--brand-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; } .rc-caret{ color:var(--text-muted); font-size:11px; transition:transform var(--transition-fast); } .rc-tb-menu{ position:relative; } .rc-tb-menu.open .rc-caret{ transform:rotate(180deg); } /* Mobile nav: hamburger (shown ≤900) + off-canvas drawer backdrop. */ .rc-tb-burger{ display:none; width:38px; height:38px; flex-shrink:0; border-radius:var(--radius-md); background:var(--bg-input); border:1px solid var(--border-medium); font-size:18px; line-height:1; cursor:pointer; align-items:center; justify-content:center; color:var(--text-strong); } .rc-tb-burger:hover{ background:var(--bg-subtle); } .rc-side-backdrop{ display:none; position:fixed; inset:0; background:rgba(26,23,20,.45); z-index:55; } /* Shared topbar popover (account menu + alerts) */ .rc-pop{ min-width:240px; max-width:320px; background:var(--bg-card); border:1px solid var(--border-medium); border-radius:var(--radius-md); box-shadow:0 14px 36px rgba(0,0,0,.18); padding:6px; z-index:60; } .rc-pop-head{ padding:9px 11px 10px; border-bottom:1px solid var(--border); margin-bottom:4px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); } .rc-pop-name{ font-size:13.5px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--text-strong); } .rc-pop-sub{ font-size:11.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--text-muted); margin-top:1px; word-break:break-all; } .rc-pop-item{ display:block; padding:9px 11px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; color:var(--text-strong); text-decoration:none; } .rc-pop-item:hover{ background:var(--bg-subtle); } .rc-pop-item.danger{ color:var(--status-error); } .rc-pop-item.danger:hover{ background:rgba(185,28,28,.08); } .rc-pop-empty{ padding:14px 11px; font-size:12.5px; color:var(--text-muted); text-align:center; } .rc-alert{ display:flex; gap:10px; padding:9px 11px; border-radius:var(--radius-sm); text-decoration:none; } .rc-alert:hover{ background:var(--bg-subtle); } .rc-alert-ico{ font-size:15px; flex-shrink:0; line-height:1.4; } .rc-alert-body{ min-width:0; } .rc-alert-title{ display:block; font-size:12.5px; font-weight:700; color:var(--text-strong); } .rc-alert-sub{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.4; } /* My Bots — bot cards */ .rc-botgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; } .rc-botcard{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.04)); } .rc-botcard-h{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .rc-botcard-ico{ width:44px; height:44px; border-radius:var(--radius-md); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:22px; background:var(--bg-subtle); border:1px solid var(--border); } .rc-botcard-name{ font-family:var(--font-serif); font-weight:600; font-size:16px; color:var(--text-strong); line-height:1.15; } .rc-botcard-slug{ font-size:11.5px; color:var(--text-muted); margin-top:2px; font-family:var(--font-mono,monospace); } .rc-botcard-desc{ font-size:12.5px; line-height:1.5; color:var(--text-secondary); margin:0 0 10px; } .rc-botcard-needs{ font-size:11.5px; line-height:1.5; color:var(--text-muted); margin:0 0 12px; } .rc-botcard-needs-l{ font-weight:600; color:var(--text-secondary); } .rc-botcard-needs code{ font-family:var(--font-mono,monospace); font-size:11px; background:var(--bg-input); padding:1px 5px; border-radius:4px; } .rc-botcard-stats{ display:flex; gap:18px; padding-top:13px; border-top:1px solid var(--border); } .rc-botcard-stat .n{ font-size:18px; font-weight:800; color:var(--text-strong); } .rc-botcard-stat .l{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:1px; } /* ============================================================ REPORT CATALOG CARDS (Reports tab — merchandised, with profit calc) ============================================================ */ .rc-repgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } @media (max-width:1000px){ .rc-repgrid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .rc-repgrid{ grid-template-columns:1fr; } } .rc-repcard{ display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.04)); overflow:hidden; } .rc-repcard-top{ padding:16px 16px 14px; } .rc-repcard-h{ display:flex; gap:12px; align-items:flex-start; } .rc-repcard-ico{ width:42px; height:42px; border-radius:var(--radius-md); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:21px; background:var(--bg-subtle); border:1px solid var(--border); } .rc-repcard-name{ font-family:var(--font-sans); font-weight:700; font-size:15px; letter-spacing:-.005em; color:var(--text-strong); line-height:1.2; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .rc-repcard-cat{ font-size:11.5px; color:var(--text-muted); margin-top:3px; } .rc-repcard-desc{ font-size:12.5px; line-height:1.5; color:var(--text-secondary); margin:11px 0 0; } .rc-repbadges{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px; } .rc-chip{ font-size:11px; font-weight:600; color:var(--text-secondary); background:var(--bg-subtle); border:1px solid var(--border); padding:3px 9px; border-radius:var(--radius-full); white-space:nowrap; } .rc-chip.ai{ color:var(--brand-secondary,#B45309); background:#FBF1DE; border-color:transparent; } .rc-repsample{ margin-left:auto; font-size:12px; font-weight:700; color:var(--brand-primary,#8B6914); text-decoration:none; white-space:nowrap; } .rc-repsample:hover{ text-decoration:underline; } .rc-repdock{ margin-top:auto; padding:13px 16px 15px; background:var(--bg-subtle); border-top:1px solid var(--border); } .rc-repprice{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; } .rc-repwhole{ font-size:12px; color:var(--text-secondary); line-height:1.35; } .rc-repwhole b{ font-size:16px; color:var(--text-strong); font-variant-numeric:tabular-nums; } .rc-repfield{ display:flex; flex-direction:column; gap:4px; } .rc-repfield label{ font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .rc-repfield .rc-field-input{ width:108px; font-variant-numeric:tabular-nums; } .rc-repsave{ margin-left:auto; align-self:flex-end; } .rc-repprofit{ margin-top:11px; font-size:12.5px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .rc-mchip{ font-weight:800; font-variant-numeric:tabular-nums; padding:3px 9px; border-radius:var(--radius-full); font-size:12px; } .rc-mchip.good{ color:#1D7A3E; background:#E9F4ED; } .rc-mchip.bad{ color:#B3261E; background:#FBE9E7; } .rc-repwarn{ color:#B3261E; font-weight:600; font-size:11.5px; } .rc-repsug{ margin-top:9px; font-size:11.5px; color:var(--text-muted); } .rc-repsug b{ color:var(--brand-primary,#8B6914); cursor:pointer; border-bottom:1px dashed var(--border); } .rc-repsug b:hover{ color:var(--brand-secondary,#6B4F0F); } .rc-repcard-locked{ background:repeating-linear-gradient(135deg,var(--bg-card),var(--bg-card) 12px,var(--bg-subtle) 12px,var(--bg-subtle) 24px); border-style:dashed; } .rc-enable-cta{ font-family:inherit; font-size:12px; font-weight:700; color:var(--brand-primary,#8B6914); background:var(--bg-card); border:1px solid var(--brand-primary,#8B6914); border-radius:var(--radius-full); padding:7px 14px; cursor:pointer; } .rc-enable-cta:hover{ background:var(--brand-primary,#8B6914); color:#fff; } /* ---- "Contact us to enable" modal ---- */ .rc-modal-bg{ position:fixed; inset:0; background:rgba(26,23,20,.5); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; } .rc-modal-bg[hidden]{ display:none; } .rc-modal{ width:100%; max-width:460px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg,16px); box-shadow:0 20px 60px rgba(0,0,0,.28); padding:20px 22px 22px; } .rc-modal-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .rc-modal-h h3{ font-family:var(--font-serif); font-weight:600; font-size:17px; margin:0; color:var(--text-strong); } .rc-modal-x{ background:none; border:none; font-size:24px; line-height:1; color:var(--text-muted); cursor:pointer; padding:0 4px; } .rc-modal-x:hover{ color:var(--text-strong); } .rc-modal-item{ font-size:13.5px; font-weight:600; color:var(--text-strong); background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-sm,8px); padding:9px 12px; margin-bottom:14px; } .rc-modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:16px; } /* ---- Collapsible panel ("Unlock more reports") ---- */ .rc-acc{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.04)); margin-bottom:20px; overflow:hidden; } .rc-acc-h{ display:flex; align-items:center; gap:12px; width:100%; padding:15px 20px; background:none; border:none; font:inherit; text-align:left; cursor:pointer; } .rc-acc-h:hover{ background:var(--bg-subtle); } .rc-acc-t{ font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--text-strong); letter-spacing:-.005em; } .rc-acc-c{ font-size:12px; font-weight:600; } .rc-acc-chev{ margin-left:auto; color:var(--text-muted); font-size:13px; transition:transform .2s ease; } .rc-acc.open .rc-acc-chev{ transform:rotate(180deg); } .rc-acc-body{ display:none; padding:0 20px 20px; } .rc-acc.open .rc-acc-body{ display:block; } /* ============================================================ PAGE HEADER (greeting row) ============================================================ */ .rc-greet{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; gap:16px; flex-wrap:wrap; } .rc-greet h2{ font-family:var(--font-serif); font-weight:600; font-size:24px; margin:0; letter-spacing:-.01em; } .rc-greet p{ margin:5px 0 0; color:var(--text-secondary); font-size:14px; } .rc-greet-actions{ display:flex; gap:10px; } .rc-btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:var(--radius-md); font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--border-medium); background:var(--bg-card); color:var(--text-primary); text-decoration:none; } .rc-btn:hover{ background:var(--bg-card-hover); } .rc-btn.primary{ background:var(--brand-gradient); color:#fff; border:none; box-shadow:0 4px 12px rgba(139,105,20,.28); } .rc-btn.danger{ color:var(--status-error); } /* ============================================================ PANELS / GRIDS ============================================================ */ .rc-panel{ background:var(--bg-card); border:1px solid var(--border-medium); border-radius:var(--radius-lg); padding:20px 22px; box-shadow:var(--shadow-sm); } .rc-panel-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } .rc-panel-h h3{ font-family:var(--font-serif); font-size:20px; font-weight:600; margin:0; } .rc-panel-h .rc-link{ font-size:12px; color:var(--brand-primary); font-weight:600; cursor:pointer; } .rc-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; } /* Hero metric strip: 4 core cards, flows to 5 when the module tile is added. */ .rc-grid-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:18px; } .rc-grid-2{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:18px; } @media(max-width:1100px){ .rc-grid-4{ grid-template-columns:repeat(2,1fr); } .rc-grid-2{ grid-template-columns:1fr; } } /* grid display must not override the hidden attribute (e.g. #moduleRow when off) */ .rc-grid-2[hidden], .rc-grid-4[hidden], .rc-grid-metrics[hidden]{ display:none !important; } /* ---- Metric card ---- */ .rc-metric{ background:var(--bg-card); border:1px solid var(--border-medium); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; } .rc-metric-h{ display:flex; align-items:center; justify-content:space-between; } .rc-metric-label{ font-size:12px; color:var(--text-secondary); font-weight:600; } .rc-metric-ico{ width:32px; height:32px; border-radius:var(--radius-md); background:var(--bg-badge); display:flex; align-items:center; justify-content:center; font-size:16px; } .rc-metric-val{ font-family:var(--font-serif); font-size:38px; font-weight:700; line-height:1; margin:14px 0 6px; letter-spacing:-.02em; } .rc-metric-delta{ font-size:12px; font-weight:600; display:flex; align-items:center; gap:5px; } .rc-metric-delta.up{ color:var(--status-success); } .rc-metric-delta.down{ color:var(--status-error); } .rc-metric-delta.flat{ color:var(--text-muted); } .rc-spark{ position:absolute; right:0; bottom:0; left:0; height:34px; opacity:.5; pointer-events:none; } /* ---- CSS bar chart ---- */ .rc-chart{ height:170px; display:flex; align-items:flex-end; gap:5px; padding-top:10px; } .rc-chart .rc-bar{ flex:1; background:linear-gradient(180deg,var(--brand-secondary),var(--brand-primary)); border-radius:var(--radius-sm) var(--radius-sm) 0 0; min-height:4px; opacity:.9; transition:opacity var(--transition-fast); } .rc-chart .rc-bar:hover{ opacity:1; } .rc-chart .rc-bar.peak{ background:linear-gradient(180deg,var(--rc-gold-light),var(--brand-secondary)); } .rc-chart-x{ display:flex; justify-content:space-between; font-size:10px; color:var(--text-muted); font-family:var(--font-mono); margin-top:8px; } /* Module activity: stacked bar (spreads bottom, charts top) + legend. */ .rc-chart .rc-mbar{ flex:1; display:flex; flex-direction:column-reverse; border-radius:var(--radius-sm) var(--radius-sm) 0 0; overflow:hidden; min-height:0; opacity:.9; transition:opacity var(--transition-fast); } .rc-chart .rc-mbar:hover{ opacity:1; } .rc-chart .rc-mbar .seg{ width:100%; } .rc-chart .rc-mbar .seg.s{ background:linear-gradient(180deg,var(--brand-secondary),var(--brand-primary)); } .rc-chart .rc-mbar .seg.c{ background:linear-gradient(180deg,var(--rc-gold-light),var(--brand-secondary)); } .rc-chart .rc-mbar .seg.p{ background:linear-gradient(180deg,#7c9cff,#4961c9); } .rc-chart .rc-mbar .seg.m{ background:linear-gradient(180deg,#e89bb6,#c9617f); } .rc-chart .rc-mbar .seg.n{ background:linear-gradient(180deg,#63c3b5,#3f9b8e); } .rc-legend{ display:flex; gap:18px; font-size:11px; color:var(--text-secondary); flex-wrap:wrap; } .rc-legend .dot{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:middle; } .rc-legend .dot.s{ background:var(--brand-primary); } .rc-legend .dot.c{ background:var(--rc-gold-light); } .rc-legend .dot.p{ background:#4961c9; } .rc-legend .dot.m{ background:#c9617f; } .rc-legend .dot.n{ background:#3f9b8e; } /* ---- Pool-health gauge ---- */ .rc-health-row{ display:flex; align-items:center; gap:18px; } .rc-gauge{ width:120px; height:120px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; position:relative; /* set --pct (0-100) inline: style="--pct:62" */ background:conic-gradient(var(--brand-primary) 0% calc(var(--pct,62) * 1%), var(--border-medium) calc(var(--pct,62) * 1%) 100%); } .rc-gauge::before{ content:""; position:absolute; width:88px; height:88px; border-radius:50%; background:var(--bg-card); } .rc-gauge-c{ position:relative; text-align:center; } .rc-gauge-c .rc-gv{ font-family:var(--font-serif); font-size:24px; font-weight:700; line-height:1; } .rc-gauge-c .rc-gl{ font-size:10px; color:var(--text-muted); font-weight:600; } .rc-health-stats{ flex:1; } .rc-hstat{ display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border-medium); font-size:13px; } .rc-hstat:last-child{ border:none; } .rc-hstat .rc-hl{ color:var(--text-secondary); } .rc-hstat .rc-hv{ font-weight:700; font-family:var(--font-mono); font-size:12.5px; } /* ---- List rows (recent convs, etc.) ---- */ .rc-row-item{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-medium); } .rc-row-item:last-child{ border:none; } .rc-row-click{ cursor:pointer; margin:0 -10px; padding-left:10px; padding-right:10px; border-radius:var(--radius-sm); transition:background var(--transition-fast); } .rc-row-click:hover{ background:var(--bg-subtle); } .rc-avatar{ width:34px; height:34px; border-radius:50%; background:var(--bg-badge); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--brand-deep,#6B4F0F); flex-shrink:0; } .rc-ri-body{ flex:1; min-width:0; } .rc-ri-name{ font-size:13.5px; font-weight:600; } .rc-ri-sub{ font-size:11.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rc-ri-meta{ font-size:11px; color:var(--text-muted); font-family:var(--font-mono); text-align:right; } /* ---- Status pills ---- */ .rc-pill{ display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:var(--radius-full); font-size:11px; font-weight:600; } .rc-pill.ok{ background:var(--status-success-bg); color:var(--status-success); } .rc-pill.warn{ background:var(--status-warning-bg); color:var(--status-warning); } .rc-pill.err{ background:var(--status-error-bg); color:var(--status-error); } /* ---- Bot performance bars ---- */ .rc-botbar{ margin-bottom:13px; } .rc-botbar-h{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px; } .rc-botbar-h b{ font-weight:600; } .rc-botbar-h span{ color:var(--text-muted); font-family:var(--font-mono); font-size:11px; } .rc-botbar-track{ height:7px; border-radius:var(--radius-full); background:var(--bg-input); overflow:hidden; } .rc-botbar-fill{ height:100%; border-radius:var(--radius-full); background:var(--brand-gradient); } /* ---- Onboarding strip (new accounts) ---- */ .rc-onboard{ display:flex; gap:14px; background:linear-gradient(135deg,#241D17,#2E251C); border-radius:var(--radius-lg); padding:20px 24px; align-items:center; margin-bottom:18px; } .rc-onboard .rc-ob-ico{ font-size:28px; } .rc-onboard .rc-ob-body{ flex:1; } .rc-onboard h4{ font-family:var(--font-serif); font-size:19px; color:var(--rc-sidebar-org); margin:0 0 3px; } .rc-onboard p{ font-size:12.5px; color:#CDBFA8; margin:0; } .rc-ob-steps{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; } .rc-ob-step{ font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--radius-full); background:rgba(255,255,255,.08); color:#CDBFA8; } .rc-ob-step.done{ background:rgba(26,122,76,.25); color:#7FD9A8; } /* ============================================================ CLIENTS TABLE + DRAWER ============================================================ */ .rc-table{ width:100%; border-collapse:collapse; } .rc-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; padding:11px 14px; border-bottom:1px solid var(--border-medium); } .rc-table td{ padding:13px 14px; border-bottom:1px solid var(--border-medium); font-size:13.5px; vertical-align:middle; } .rc-table tbody tr{ cursor:pointer; } .rc-table tbody tr:hover td{ background:var(--bg-card-hover); } .rc-table tbody tr.selected td{ background:var(--bg-card-hover); } .rc-cclient{ display:flex; align-items:center; gap:11px; } .rc-cnum{ font-family:var(--font-mono); font-weight:600; } .rc-cbar-mini{ width:70px; height:6px; border-radius:var(--radius-full); background:var(--bg-input); overflow:hidden; display:inline-block; vertical-align:middle; margin-right:8px; } .rc-cbar-mini i{ display:block; height:100%; background:var(--brand-gradient); border-radius:var(--radius-full); } /* Drawer (right-anchored). Toggle .open to show; animate width/transform as you like. */ .rc-crow:hover{ background:var(--bg-input); } .rc-drawer-bg{ position:fixed; inset:0; background:rgba(26,23,20,.28); z-index:39; opacity:0; pointer-events:none; transition:opacity var(--transition-normal); } .rc-drawer-bg.open{ opacity:1; pointer-events:auto; } .rc-drawer{ position:fixed; top:0; right:0; bottom:0; width:var(--rc-drawer-w); background:var(--bg-card); box-shadow:-16px 0 40px rgba(26,23,20,.16); border-left:1px solid var(--border-medium); padding:24px; z-index:40; overflow-y:auto; transform:translateX(100%); transition:transform var(--transition-normal); } .rc-drawer.open{ transform:translateX(0); } .rc-drawer-h{ display:flex; align-items:center; gap:13px; padding-bottom:18px; border-bottom:1px solid var(--border-medium); margin-bottom:18px; } .rc-drawer-av{ width:52px; height:52px; border-radius:50%; background:var(--brand-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; flex-shrink:0; } .rc-drawer-stat{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; } .rc-ds-card{ background:var(--bg-input); border-radius:var(--radius-md); padding:13px; } .rc-ds-card .rc-dv{ font-family:var(--font-serif); font-size:24px; font-weight:700; line-height:1; } .rc-ds-card .rc-dl{ font-size:11px; color:var(--text-muted); margin-top:4px; } .rc-drawer-act{ display:flex; flex-direction:column; gap:8px; } .rc-da-btn{ padding:10px; border-radius:var(--radius-md); font-size:13px; font-weight:600; text-align:center; border:1px solid var(--border-medium); background:var(--bg-card); cursor:pointer; } .rc-da-btn.primary{ background:var(--brand-gradient); color:#fff; border:none; } .rc-da-btn.danger{ color:var(--status-error); } /* ============================================================ FORM FIELDS (Branding, settings, etc.) ============================================================ */ .rc-field-group{ margin-bottom:18px; } .rc-field-label{ font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:7px; display:block; } .rc-field-input{ width:100%; padding:10px 13px; border:1px solid var(--border-light); border-radius:var(--radius-md); font-size:13.5px; background:var(--bg-input); font-family:var(--font-sans); color:var(--text-primary); } .rc-field-input:focus{ outline:none; border-color:var(--border-focus); box-shadow:0 0 0 3px rgba(139,105,20,.1); background:var(--bg-card); } .rc-swatch-row{ display:flex; gap:10px; } .rc-swatch{ width:42px; height:42px; border-radius:var(--radius-md); border:2px solid var(--bg-card); box-shadow:0 0 0 1px var(--border-medium); cursor:pointer; } .rc-swatch.sel{ box-shadow:0 0 0 2px var(--brand-primary); } .rc-logo-drop{ border:2px dashed var(--border-light); border-radius:var(--radius-lg); padding:28px; text-align:center; color:var(--text-muted); background:var(--bg-input); } .rc-logo-drop .rc-ld-ico{ font-size:30px; opacity:.5; } /* Branding live preview */ .rc-preview-card{ border:1px solid var(--border-medium); border-radius:var(--radius-lg); overflow:hidden; } .rc-preview-head{ background:var(--brand-gradient); height:46px; display:flex; align-items:center; padding:0 16px; color:#fff; font-family:var(--font-serif); font-weight:600; font-size:16px; gap:8px; } .rc-preview-body{ padding:18px; background:var(--bg-page); } .rc-preview-bubble{ background:var(--bg-card); border:1px solid var(--border-medium); border-radius:12px 12px 12px 4px; padding:12px 14px; font-size:12.5px; color:var(--text-secondary); max-width:80%; box-shadow:var(--shadow-sm); } .rc-preview-send{ margin-top:12px; display:flex; gap:8px; } .rc-preview-send .rc-pi{ flex:1; background:var(--bg-card); border:1px solid var(--border-medium); border-radius:var(--radius-full); padding:9px 14px; font-size:12px; color:var(--text-muted); } .rc-preview-send .rc-pb{ width:36px; height:36px; border-radius:50%; background:var(--brand-gradient); } /* badge for NEW/PREMIUM feature labels in UI */ .rc-badge-new{ display:inline-block; background:var(--status-success); color:#fff; font-size:9px; font-weight:800; padding:1px 6px; border-radius:var(--radius-sm); letter-spacing:.06em; vertical-align:middle; margin-left:6px; } /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:900px){ .rc-side{ position:fixed; left:0; top:0; bottom:0; z-index:60; transform:translateX(-100%); transition:transform var(--transition-normal); box-shadow:0 0 40px rgba(0,0,0,.3); } .rc-side.open{ transform:translateX(0); } .rc-side-backdrop.open{ display:block; } .rc-tb-burger{ display:inline-flex; } .rc-content{ padding:18px 14px 32px; } .rc-drawer{ width:100%; } /* Topbar: compact title, drop the wide search so the burger + bell + account fit. */ .rc-topbar{ padding:0 14px; gap:10px; } .rc-tb-title{ font-size:19px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rc-tb-search{ display:none; } /* Wide data tables (fixed-width inputs/buttons that can't shrink) scroll inside their card — table layout kept intact, so header/body stay aligned. Text tables still wrap and fit. */ .rc-panel{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Belt-and-braces: nothing should force the page wider than the viewport. */ .rc-main, .rc-content, .rc-doc-content{ min-width:0; max-width:100%; } pre, .codewrap, .codewrap pre{ max-width:100%; } } /* Single-column metric/economics grids on small phones. */ @media(max-width:560px){ .rc-grid-4{ grid-template-columns:1fr; } } /* ============================================================ TRANSITIONAL — components emitted by the existing console JS, relocated here from the old inline