/* Measurebase — dashboard app shell */ .app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: var(--bg-soft-2); } /* ---------- Sidebar ---------- */ /* Shell bootstrap: apply workspace nav visibility before dashboard.js runs (anti-CLS). */ html[data-mb-workspace="customer"] .sidebar .sidebar-section-label:has(+ a[href*="partner/"]), html[data-mb-workspace="customer"] .sidebar nav a.side-link[href*="partner/"] { display: none !important; } html[data-mb-agency-nav="direct"] .sidebar .sidebar-section-label:has(+ a[href*="partner/"]), html[data-mb-agency-nav="direct"] .sidebar nav a.side-link[href*="domains.html"], html[data-mb-agency-nav="direct"] .sidebar nav a.side-link[href*="billing.html"] { display: none !important; } html[data-mb-client-view="1"] .sidebar nav a.side-link[href*="billing.html"] { display: none !important; } /* ---------- Role gating ---------- data-mb-can-* / data-mb-is-owner are stamped on by js/dashboard.js applyRoleGating() from MBAuth.roleCan(), whose matrix mirrors the backend's abortUnlessRole tiers. CSS only hides what the API would reject; the server remains the actual gate. The billing selector matches both the pre-rewrite (billing.html) and rewritten (//billing) href spellings. */ html[data-mb-can-billing="0"] .sidebar nav a.side-link[href*="billing"] { display: none !important; } html[data-mb-can-team="0"] #open-invite-member, html[data-mb-can-team="0"] #org-panel button[type="submit"], html[data-mb-can-team="0"] #org-panel .btn-primary { display: none !important; } html[data-mb-can-team="0"] #org-panel input, html[data-mb-can-team="0"] #org-panel select { pointer-events: none; background: var(--bg-soft); color: var(--text-soft); } /* Beats the JS that un-hides the panel for eligible accounts: only owners ever see the account danger zone at all. */ html[data-mb-is-owner="0"] #danger-zone-panel { display: none !important; } /* Viewers: the two big create/change CTAs disappear; every other operate control is disabled in JS (see domains.js's roleCan('operate') checks), and a read-only banner announces the mode (dashboard.js). */ html[data-mb-can-operate="0"] #open-new-domain, html[data-mb-can-operate="0"] #open-gtm-script { display: none !important; } /* Inline role dropdown in the team table (js/team.js renderMemberRow). */ .role-select { font-family: var(--font); font-size: 13px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border-soft); background: #fff; color: var(--text); cursor: pointer; } .role-select:disabled { opacity: 0.55; cursor: wait; } /* Reserve sidebar control dimensions; skeleton until shell JS finishes. */ .account-switcher-trigger { min-height: 48px; } .account-switcher-text .name, .plan-chip .name { min-height: 1.3em; } .account-switcher-text .sub, .plan-chip .sub { min-height: 1.15em; } .app:not(.shell-ready) .account-switcher-text .name, .app:not(.shell-ready) .account-switcher-text .sub, .app:not(.shell-ready) .plan-chip .name, .app:not(.shell-ready) .plan-chip .sub, .app:not(.shell-ready) .sidebar-footer .avatar, .app:not(.shell-ready) .account-switcher-trigger .acct-avatar { color: transparent; user-select: none; background: linear-gradient(90deg, var(--bg-soft) 0%, var(--border-soft) 50%, var(--bg-soft) 100%); background-size: 200% 100%; border-radius: 4px; animation: shell-skeleton 1.2s ease-in-out infinite; } .app:not(.shell-ready) .sidebar-footer .avatar, .app:not(.shell-ready) .account-switcher-trigger .acct-avatar { color: transparent; } @keyframes shell-skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .sidebar { /* Sits on the paper ground (no own fill) — content cards carry the white. */ background: transparent; border-right: 1px solid var(--border-soft); padding: 20px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .sidebar-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; padding: 8px 10px 24px; } .sidebar-logo .logo-mark { display: none; } .sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 20px; } .sidebar-top .sidebar-logo { padding: 0; } .sidebar-door { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-soft); background: #fff; font-size: 15px; color: var(--text-soft); flex-shrink: 0; } .sidebar-door:hover { background: var(--bg-soft); color: var(--text); } .sidebar nav { display: flex; flex-direction: column; gap: 2px; } /* ---------- Account switcher ---------- */ .account-switcher { position: relative; margin: 0 0 14px; } .account-switcher-trigger { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-soft); background: #fff; cursor: pointer; text-align: left; font-family: inherit; } .account-switcher-trigger:hover { background: var(--bg-soft); } .acct-avatar { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-orange)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; } .account-switcher-text { display: flex; flex-direction: column; flex: 1; min-width: 0; } .account-switcher-text .name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-switcher-text .sub { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-switcher-chevron { display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); flex-shrink: 0; transition: transform .15s ease; } .account-switcher-chevron svg { width: 14px; height: 14px; } .account-switcher-trigger[aria-expanded="true"] .account-switcher-chevron { transform: rotate(180deg); } .account-switcher-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 6px; z-index: 30; max-height: calc(100vh - 100px); overflow-y: auto; } .account-switcher-menu.open { display: block; } .account-switcher-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); padding: 6px 8px 4px; } .account-switcher-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13px; color: var(--text); } .account-switcher-item:hover { background: var(--bg-soft); } .account-switcher-item.is-active { background: rgba(0, 113, 227, 0.06); } .account-switcher-item .account-switcher-check { margin-left: auto; color: var(--accent); display: inline-flex; flex-shrink: 0; visibility: hidden; } .account-switcher-item.is-active .account-switcher-check { visibility: visible; } .account-switcher-check svg { width: 14px; height: 14px; } .account-switcher-add { font-weight: 500; color: var(--text-soft); } .account-switcher-add.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .account-switcher-limit { margin-left: auto; font-size: 12px; color: var(--text-faint); font-weight: 400; } .account-switcher-add-ic { width: 30px; height: 30px; border-radius: 8px; border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text-faint); flex-shrink: 0; } .account-switcher-divider { height: 1px; background: var(--border-soft); margin: 6px 2px; } .account-switcher-trigger.is-partner-client-view { border-color: rgba(0, 113, 227, 0.28); background: rgba(0, 113, 227, 0.05); } .account-switcher-trigger.is-partner-client-view .account-switcher-text .sub { color: var(--accent); font-weight: 500; } .account-switcher-context { margin: 2px 2px 8px; padding: 10px; border-radius: 8px; background: rgba(0, 113, 227, 0.06); border: 1px solid rgba(0, 113, 227, 0.14); } .account-switcher-context-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 8px; } .account-switcher-context-client { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .account-switcher-context-client .acct-avatar { width: 28px; height: 28px; font-size: 11px; } .account-switcher-context-meta { font-size: 11px; color: var(--text-soft); line-height: 1.45; margin-bottom: 8px; } .account-switcher-context-meta strong { color: var(--text); font-weight: 600; } .account-switcher-context-link { display: inline-block; font-size: 12px; font-weight: 500; color: var(--accent); text-decoration: none; } .account-switcher-context-link:hover { text-decoration: underline; } .sidebar-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); padding: 18px 10px 6px; } .side-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--text-soft); font-weight: 500; } .side-link .ic { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .side-link .ic svg { width: 16px; height: 16px; } .side-link:hover { background: rgba(255,255,255,0.72); color: var(--text); } .side-link.active { /* Elevated white pill on the paper ground. */ background: #fff; color: var(--text); box-shadow: var(--shadow-sm); } .sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-soft); } .plan-chip { display: flex; align-items: center; justify-content: space-between; background: var(--bg-soft); border-radius: var(--radius-sm); padding: 12px; font-size: 12px; color: inherit; text-decoration: none; transition: background .15s ease; } .plan-chip:hover { background: var(--border-soft); } .plan-chip .name { font-weight: 600; color: var(--text); font-size: 13px; } .plan-chip .sub { color: var(--text-faint); } .plan-chip .quota-bar { margin-top: 6px; height: 3px; border-radius: 999px; background: var(--border-soft); overflow: hidden; } .plan-chip .quota-bar-fill { height: 100%; border-radius: 999px; } /* ---------- Main ---------- */ .main { min-width: 0; } .topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid var(--border-soft); background: rgba(249,249,247,0.78); /* paper-tinted, matches the ground */ backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 10; } .topbar h1 { font-size: 19px; font-weight: 650; margin: 0; letter-spacing: -0.01em; } .topbar-right { display: flex; align-items: center; gap: 14px; } .topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .alert-bell-wrap { position: relative; } .alert-bell-btn { position: relative; } /* Beats .icon-btn's own 30x30 sizing on specificity (compound selector), not source order -- .icon-btn's rule happens to appear later in this file, so a plain same-specificity override here would lose the cascade. */ .icon-btn.alert-bell-btn { width: 36px; height: 36px; } .alert-bell-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #d93025; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .alert-bell-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: calc(100vw - 32px); background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 40; overflow: hidden; } .alert-bell-dropdown-header { padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border-soft); } .alert-bell-dropdown-list { max-height: 320px; overflow-y: auto; } .alert-bell-empty { padding: 20px 16px; font-size: 13px; color: var(--text-faint); text-align: center; } .alert-bell-item { display: block; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); text-decoration: none; } .alert-bell-item:last-child { border-bottom: none; } .alert-bell-item:hover { background: var(--bg-soft); } .alert-bell-item-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .alert-bell-item.severity-critical .alert-bell-item-title::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: #d93025; margin-right: 6px; } .alert-bell-item.severity-warning .alert-bell-item-title::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--accent-orange); margin-right: 6px; } .alert-bell-item-message { font-size: 12px; color: var(--text-soft); line-height: 1.4; } .alert-bell-dropdown-footer { padding: 10px 16px; border-top: 1px solid var(--border-soft); text-align: center; } .alert-bell-dropdown-footer a { font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 500; } .setup-guide-wrap { position: relative; } .setup-guide-btn { position: relative; } /* Beats .icon-btn's own 30x30 sizing on specificity (compound selector), not source order -- .icon-btn's rule happens to appear later in this file, so a plain same-specificity override here would lose the cascade. */ .icon-btn.setup-guide-btn { width: 36px; height: 36px; } .setup-guide-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .setup-guide-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-width: calc(100vw - 32px); background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 40; overflow: hidden; } .setup-guide-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border-soft); } .setup-guide-progress { font-size: 12px; font-weight: 500; color: var(--text-faint); } .setup-guide-dropdown-list { max-height: 320px; overflow-y: auto; } .setup-guide-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); text-decoration: none; } .setup-guide-item:last-child { border-bottom: none; } .setup-guide-item:hover { background: var(--bg-soft); } .setup-guide-item-check { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 999px; border: 1.5px solid var(--border); color: #fff; } .setup-guide-item.is-done .setup-guide-item-check { background: var(--success); border-color: var(--success); } .setup-guide-item-title { display: block; font-size: 12px; font-weight: 600; color: var(--text); } .setup-guide-item.is-done .setup-guide-item-title { color: var(--text-faint); text-decoration: line-through; } .setup-guide-item-desc { display: block; font-size: 12px; color: var(--text-soft); line-height: 1.4; margin-top: 2px; } .setup-guide-item-dismiss { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 1px; border: none; background: none; border-radius: 999px; color: var(--text-faint); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; } .setup-guide-item:hover .setup-guide-item-dismiss { opacity: 1; } .setup-guide-item-dismiss:hover { background: var(--border-soft); color: var(--text); } .overview-setup-item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border-soft); text-decoration: none; } .overview-setup-item:last-child { border-bottom: none; } .overview-setup-item:hover { background: var(--bg-soft); } .overview-setup-item-text { flex: 1; min-width: 0; } .overview-setup-item-title { display: block; font-size: 14px; font-weight: 600; color: var(--text); } .overview-setup-item-desc { display: block; font-size: 13px; color: var(--text-soft); margin-top: 2px; } .overview-setup-item-arrow { flex-shrink: 0; color: var(--text-faint); } .overview-alerts-empty { padding: 24px 20px; font-size: 13px; color: var(--text-faint); text-align: center; } .overview-alert-item { display: block; padding: 14px 20px; border-bottom: 1px solid var(--border-soft); text-decoration: none; } .overview-alert-item:last-child { border-bottom: none; } .overview-alert-item:hover { background: var(--bg-soft); } .overview-alert-item-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .overview-alert-item.severity-critical .overview-alert-item-title::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: #d93025; margin-right: 7px; } .overview-alert-item.severity-warning .overview-alert-item-title::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--accent-orange); margin-right: 7px; } .overview-alert-item-message { font-size: 13px; color: var(--text-soft); line-height: 1.4; } .sidebar-toggle.icon-btn { display: none; flex-shrink: 0; } .sidebar-backdrop { display: none; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-orange)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 600; flex-shrink: 0; } a.avatar { text-decoration: none; transition: opacity .15s ease; } a.avatar:hover { opacity: 0.85; } button.avatar { border: none; padding: 0; font-family: inherit; cursor: pointer; transition: opacity .15s ease; } button.avatar:hover { opacity: 0.85; } .avatar-menu { position: relative; } .avatar-menu-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; padding: 6px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 40; } .avatar-menu-item { display: block; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; } .avatar-menu-item:hover { background: var(--bg-soft); } .content { padding: 32px; width: 100%; box-sizing: border-box; } /* ---------- Stat cards ---------- */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; } .stat-card { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-sm); } .stat-card .label { font-size: 13px; color: var(--text-faint); margin-bottom: 8px; } .stat-card .value { font-size: 26px; font-weight: 650; letter-spacing: -0.01em; } .stat-card .delta { font-size: 12px; margin-top: 6px; font-weight: 500; } .delta.up { color: var(--success); } .delta.warn { color: var(--accent-orange); } .delta.down { color: #d93025; } .delta.flat { color: var(--text-faint); } /* ---------- Loading skeletons (stat cards, charts, tables) ---------- */ /* Toggle `.is-loading` on `.stat-card` / `.panel-body` while data is being fetched — see js/dashboard.js's getDataLoadingTargets()/setDataLoadingState(). */ :root { /* Soft single-hue blue sweep (low contrast on purpose). To revert to the neutral grey shimmer, swap this for: --skeleton-grad: linear-gradient(90deg, var(--bg-soft) 25%, var(--border-soft) 37%, var(--bg-soft) 63%); Or for the earlier blue→orange version: --skeleton-grad: linear-gradient(90deg, rgba(0, 113, 227, 0.16) 20%, rgba(255, 138, 0, 0.26) 50%, rgba(0, 113, 227, 0.16) 80%); */ --skeleton-grad: linear-gradient(90deg, rgba(0, 113, 227, 0.10) 20%, rgba(0, 113, 227, 0.20) 50%, rgba(0, 113, 227, 0.10) 80%); } @keyframes skeleton-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .stat-card.is-loading .value, .stat-card.is-loading .delta { color: transparent; border-radius: 4px; background: var(--skeleton-grad); background-size: 400px 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; } .panel-body.is-loading { position: relative; min-height: 80px; } .panel-body.is-loading > * { visibility: hidden; } .panel-body.is-loading::after { content: ''; position: absolute; inset: 0; background: var(--skeleton-grad); background-size: 400px 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; } .data-loading-surface.is-loading { position: relative; min-height: 160px; } .data-loading-surface.is-loading:not(.panel-body):not(.stat-card) > * { visibility: hidden; } .data-loading-surface.is-loading:not(.panel-body):not(.stat-card)::after { content: ''; position: absolute; inset: 0; background: var(--skeleton-grad); background-size: 400px 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: inherit; } /* A single loading piece of text (one grid card's subtitle, one detail-page lead line) -- too small for the panel/stat-card skeleton above, which is sized for a whole container. Width is per-usage via an inline style or a modifier; this just supplies the shimmer look at line-of-text size. */ .skeleton-text { display: inline-block; width: 90px; max-width: 100%; height: 0.85em; border-radius: 4px; vertical-align: middle; background: var(--skeleton-grad); background-size: 400px 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; } /* ---------- Panels ---------- */ .panel { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-md); margin-bottom: 24px; overflow: hidden; box-shadow: var(--shadow-sm); } .panel-danger { border-color: #d93025; } .panel-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border-soft); } .panel-header h2 { font-size: 16px; font-weight: 600; margin: 0; } .panel-header p { font-size: 13px; color: var(--text-faint); margin: 2px 0 0; } .panel-body { padding: 24px; } .panel-body.no-pad { padding: 0; } /* ---------- Usage chart (css-only bars) ---------- */ .chart-wrap { display: flex; gap: 10px; padding-top: 48px; } .chart-axis { display: flex; flex-direction: column; justify-content: space-between; width: 36px; flex-shrink: 0; font-size: 11px; color: var(--text-faint); text-align: right; } .chart-plot { position: relative; flex: 1; min-width: 0; } .chart-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; } .chart-grid span { display: block; height: 0; border-top: 1px solid var(--border-soft); } .chart-grid span:last-child { border-top-color: var(--border); } .chart { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 160px; } .chart .bar-col { flex: 1; height: 100%; position: relative; display: flex; justify-content: center; } .chart .bar { width: 100%; min-height: 3px; align-self: flex-end; background: linear-gradient(180deg, var(--accent-orange), var(--accent)); border-radius: 6px 6px 3px 3px; opacity: 0.85; cursor: pointer; transition: opacity .15s ease; } .chart .bar-col:hover .bar, .chart .bar-col:focus .bar { opacity: 1; } /* Stacked, multi-category bars (see renderBotChart in dashboard/domain.html) -- same width/baseline as .bar above, but built from per-category .bar-segment fills instead of one gradient. column-reverse + a flex gap keeps the first-rendered category at the baseline with a 2px surface gap between segments (per the dataviz skill's stacked-fill spec), so only the bottom segment gets the baseline corner rounding and only the top segment gets the rounded data-end. */ .bar-stack { width: 100%; align-self: flex-end; display: flex; flex-direction: column-reverse; gap: 2px; cursor: pointer; } .bar-segment { width: 100%; min-height: 3px; opacity: 0.85; transition: opacity .15s ease; } .bar-segment:first-child { border-radius: 0 0 3px 3px; } .bar-segment:last-child { border-radius: 6px 6px 0 0; } .bar-segment:first-child:last-child { border-radius: 6px 6px 3px 3px; } .chart .bar-col:hover .bar-segment, .chart .bar-col:focus .bar-segment { opacity: 1; } .tt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .bot-chart-legend { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); display: flex; flex-wrap: wrap; gap: 8px 20px; } .bar-tooltip { position: absolute; left: 50%; transform: translateX(-50%) translateY(4px); background: var(--text); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 6px; white-space: nowrap; text-align: center; opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 5; } .bar-tooltip strong { display: block; font-size: 13px; font-weight: 650; } .bar-tooltip .tt-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 1px; } .bar-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--text); } .chart .bar-col:hover .bar-tooltip, .chart .bar-col:focus .bar-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } .chart-labels { display: flex; gap: 8px; margin-top: 10px; padding-left: 46px; } /* ---------- Agency client request charts ---------- */ .client-requests-intro { margin-bottom: 0; } .client-requests-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; } .client-request-card { display: flex; flex-direction: column; min-width: 0; } .client-request-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); } .client-request-header .client-name-cell { min-width: 0; } .client-request-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 12px; color: var(--text-faint); } .client-request-meta strong { font-size: 14px; font-weight: 650; color: var(--text); } .client-request-card .panel-body { padding: 16px 20px 20px; } .client-request-card .chart-wrap { padding-top: 28px; } .client-request-card .chart-axis { width: 30px; font-size: 10px; } .client-request-card .chart { height: 120px; } .client-request-card .chart-labels { padding-left: 40px; margin-top: 8px; } .client-request-card .chart-labels-pending { visibility: hidden; } .client-request-card .chart-labels span { font-size: 10px; line-height: 1.2; min-width: 0; white-space: nowrap; } .client-request-card .chart-labels-rotated { height: 52px; margin-top: 4px; align-items: flex-start; } .client-request-card .chart-labels-rotated span { display: flex; justify-content: center; align-items: flex-start; height: 52px; overflow: visible; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; line-height: 1; } .client-request-empty { display: flex; align-items: center; justify-content: center; min-height: 120px; border: 1px dashed var(--border); border-radius: 10px; font-size: 13px; color: var(--text-faint); } @media (max-width: 1200px) { .client-requests-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .client-requests-grid { grid-template-columns: 1fr; } } .chart-labels span { flex: 1; text-align: center; font-size: 11px; color: var(--text-faint); } /* ---------- Comparison line chart ---------- */ .line-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 12px; font-size: 12px; color: var(--text-soft); } .line-legend-item { display: inline-flex; align-items: center; gap: 8px; } .line-legend-dot { width: 8px; height: 8px; border-radius: 999px; } .line-legend-dot.client { background: var(--accent-orange); } .line-legend-dot.server { background: var(--accent); } .line-legend-lift { margin-left: auto; font-weight: 600; color: var(--success); } .line-chart-wrap { display: flex; gap: 10px; min-height: 190px; padding-top: 48px; } .line-chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .line-area { stroke: none; } .line-area.client { fill: rgba(255, 138, 0, 0.10); } .line-area.server { fill: rgba(0, 113, 227, 0.10); } .line-series { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; } .line-series.client { stroke: var(--accent-orange); } .line-series.server { stroke: var(--accent); } .line-point-layer { position: absolute; inset: 0; pointer-events: none; } .line-point-node { position: absolute; width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .15s ease; } .line-point-node.client { background: color-mix(in srgb, var(--accent-orange) 85%, #ffffff 15%); } .line-point-node.server { background: color-mix(in srgb, var(--accent) 86%, #ffffff 14%); } .line-chart-wrap:hover .line-point-node, .line-chart-wrap:focus-within .line-point-node { opacity: 1; } .line-hover-layer { position: absolute; inset: 0; } .line-hover-col { position: absolute; top: 0; height: 100%; cursor: pointer; } .line-hover-col .bar-tooltip { text-align: left; } .line-hover-col:hover .bar-tooltip, .line-hover-col:focus .bar-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } .bar-tooltip.align-start { left: 0; transform: translateY(4px); } .bar-tooltip.align-start::after { left: 14px; transform: none; } .bar-tooltip.align-end { left: auto; right: 0; transform: translateY(4px); } .bar-tooltip.align-end::after { left: auto; right: 14px; transform: none; } .line-hover-col:hover .bar-tooltip.align-start, .line-hover-col:focus .bar-tooltip.align-start, .line-hover-col:hover .bar-tooltip.align-end, .line-hover-col:focus .bar-tooltip.align-end { transform: translateY(0); } .line-tooltip-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; white-space: nowrap; } .line-tooltip-row .line-legend-dot { flex-shrink: 0; } /* ---------- Data table ---------- */ .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-faint); font-weight: 600; padding: 12px 24px; border-bottom: 1px solid var(--border-soft); background: var(--bg-soft-2); } .data-table td { padding: 14px 24px; border-bottom: 1px solid var(--border-soft); color: var(--text); } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--bg-soft-2); } .table-status-link { font-weight: 500; text-decoration: none; } .table-status-link:hover { text-decoration: underline; } .data-table th.sortable { cursor: pointer; user-select: none; } .data-table th.sortable:hover { color: var(--text); } .data-table th.sortable .sort-arrow { display: inline-block; width: 10px; margin-left: 2px; } .data-table th.sortable.sort-active .sort-arrow::after { content: '▲'; font-size: 9px; } .data-table th.sortable.sort-active.sort-desc .sort-arrow::after { content: '▼'; } /* ---------- Inline "what does this mean" hint ---------- */ .info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 5px; border-radius: 50%; border: 1px solid var(--text-faint); color: var(--text-faint); font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: help; vertical-align: middle; } .info-tip:hover, .info-tip:focus-visible { color: var(--text); border-color: var(--text-soft); } .info-tip-popup { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); width: 210px; background: var(--text); color: #fff; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.4; text-align: left; white-space: normal; padding: 8px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 20; } .info-tip-popup::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--text); } .info-tip:hover .info-tip-popup, .info-tip:focus-visible .info-tip-popup { opacity: 1; transform: translateX(-50%) translateY(0); } .info-tip-popup.wide { width: 280px; } /* Anchors the popup to the left edge of its trigger and extends rightward, instead of centering under it -- for a trigger that sits close to a container's left edge (e.g. clients.html's Discount % row, inside a narrow label column), a centered wide popup pushes past that edge and gets clipped by an ancestor's overflow: hidden (a modal, a panel). */ .info-tip-popup.left { left: 0; transform: translateY(-4px); } .info-tip-popup.left::after { left: 10px; transform: none; } .info-tip:hover .info-tip-popup.left, .info-tip:focus-visible .info-tip-popup.left { transform: translateY(0); } /* Opens upward instead of downward -- this popup's trigger (clients.html's Discount % row) is the LAST field before its modal/panel's own bottom edge, right above the submit button, so the popup's usual below-the- trigger placement has no room to render and gets clipped by that same overflow: hidden ancestor the .left fix above already had to work around. */ .info-tip-popup.left.up { top: auto; bottom: calc(100% + 8px); transform: translateY(4px); } .info-tip-popup.left.up::after { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: var(--text); } .info-tip:hover .info-tip-popup.left.up, .info-tip:focus-visible .info-tip-popup.left.up { transform: translateY(0); } /* ---------- Stepped discount-share slider (invite-a-client form) ---------- */ .discount-slider { display: flex; align-items: center; gap: 14px; } .discount-slider input[type="range"] { flex: 1; accent-color: var(--accent); } .discount-slider output { min-width: 42px; font-size: 14px; font-weight: 600; color: var(--text); text-align: right; } /* ---------- Invoice submission modal (partner/kickback.html) ---------- */ .invoice-modal-amount { font-size: 20px; font-weight: 700; color: var(--text); } .invoice-amount-input { display: flex; align-items: center; gap: 8px; } .invoice-amount-prefix { font-size: 14px; font-weight: 600; color: var(--text-soft); } .invoice-amount-input input { flex: 1; } .mono { font-family: var(--mono); font-size: 13px; color: var(--text-soft); } .banner-success, .banner-critical, .banner-warning { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; } .banner-success { background: rgba(30,142,62,0.08); border: 1px solid rgba(30,142,62,0.25); color: var(--success); } .banner-critical { background: rgba(217,48,37,0.08); border: 1px solid rgba(217,48,37,0.25); color: #d93025; } .banner-warning { background: rgba(255,138,0,0.08); border: 1px solid rgba(255,138,0,0.3); color: var(--accent-orange); } .banner-success .banner-action, .banner-critical .banner-action, .banner-warning .banner-action { color: inherit; text-decoration: underline; font-weight: 600; white-space: nowrap; } /* ---------- Transient "saved" toast ---------- */ .save-toast { position: fixed; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; background: var(--text); color: #fff; font-size: 13px; font-weight: 600; line-height: 1; padding: 10px 16px 10px 13px; border-radius: 980px; box-shadow: 0 4px 16px rgba(0,0,0,0.18); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; z-index: 9990; } .save-toast.is-visible { opacity: 1; transform: translateY(0); } .save-toast .save-toast-tick { display: inline-flex; color: #34d17c; flex-shrink: 0; } .banner-pending { background: rgba(255,138,0,0.08); border: 1px solid rgba(255,138,0,0.25); color: var(--accent-orange); font-size: 13px; font-weight: 500; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; line-height: 1.5; } .table-empty { text-align: center; padding: 32px 16px !important; color: var(--text-soft); font-size: 14px; } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 980px; } .badge.active { background: rgba(30,142,62,0.1); color: var(--success); } .badge.paused { background: var(--bg-soft); color: var(--text-faint); } .badge.error { background: rgba(217,48,37,0.1); color: #d93025; } .badge.pending { background: rgba(255,138,0,0.12); color: var(--accent-orange); } .badge.inactive { background: var(--bg-soft); color: var(--text-faint); } .badge-priority-urgent { background: rgba(217,48,37,0.1); color: #d93025; } .badge-priority-high { background: rgba(255,138,0,0.12); color: var(--accent-orange); } .badge-priority-normal { background: rgba(0,113,227,0.1); color: var(--accent); } .badge-priority-low { background: var(--bg-soft); color: var(--text-faint); } .badge-status-open { background: rgba(0,113,227,0.1); color: var(--accent); } .badge-status-closed { background: var(--bg-soft); color: var(--text-faint); } .badge .dot-sm { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge-tag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-orange); background: rgba(255,138,0,0.12); padding: 2px 7px; border-radius: 6px; margin-left: 6px; } .badge-tag.muted { color: var(--text-faint); background: var(--bg-soft); } /* ---------- Partner banner ---------- */ [hidden] { display: none !important; } .partner-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(135deg, rgba(0,113,227,0.08), rgba(255,138,0,0.10)); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 14px 20px; margin-bottom: 24px; font-size: 14px; } .partner-banner .msg { display: flex; align-items: flex-start; gap: 10px; color: var(--text); } .partner-banner .msg strong { font-weight: 600; } .partner-banner .msg .banner-ic { display: inline-flex; flex-shrink: 0; margin-top: 1px; color: var(--accent); } .partner-banner .msg .banner-ic svg { width: 18px; height: 18px; } .partner-banner .msg .banner-copy { display: flex; flex-direction: column; gap: 4px; line-height: 1.45; } .partner-banner .msg .banner-role { font-size: 13px; color: var(--text-soft); } .partner-banner.danger { background: linear-gradient(135deg, rgba(217,48,37,0.08), rgba(217,48,37,0.14)); border-color: rgba(217,48,37,0.3); } .partner-banner.danger .msg .banner-ic { color: #d93025; } /* ---------- Client cards / rows ---------- */ .client-avatar { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-orange)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; } .client-name-cell { display: flex; align-items: center; gap: 12px; } .client-name-cell .meta { display: flex; flex-direction: column; } .client-name-cell .meta .sub { font-size: 12px; color: var(--text-faint); } .partner-connection-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .partner-connection-row + .partner-connection-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); } .perm-select { padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text); } /* ---------- Forms ---------- */ .form-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 18px 24px; border-bottom: 1px solid var(--border-soft); align-items: start; } .form-row:last-child { border-bottom: none; } .form-row label { font-size: 14px; font-weight: 500; color: var(--text); padding-top: 8px; } .form-row .hint { font-size: 12px; color: var(--text-faint); font-weight: 400; margin-top: 4px; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--text); background: #fff; } input[type="date"] { cursor: pointer; } input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; } .input-error { border-color: #d93025; } textarea { min-height: 90px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; word-break: break-all; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.15); } .host-input { display: flex; align-items: stretch; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; overflow: hidden; } .host-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.15); } .host-input input { flex: 0 1 160px; min-width: 72px; width: auto; border: none; border-radius: 0; box-shadow: none; } .host-input input:focus { box-shadow: none; } .host-input-suffix { display: flex; align-items: center; flex: 1; min-width: 0; padding: 9px 12px; font-size: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-soft); background: var(--bg-soft); border-left: 1px solid var(--border-soft); white-space: nowrap; } .connection-setup-note { margin: 0; padding: 16px 24px; font-size: 13px; line-height: 1.55; color: var(--text-soft); border-bottom: 1px solid var(--border-soft); } .panel-note { margin: 0; padding: 12px 24px; font-size: 13px; line-height: 1.55; color: var(--text-soft); background: var(--bg-soft); border-bottom: 1px solid var(--border-soft); } .panel-note strong { color: var(--text); } .donut-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px; } @media (max-width: 900px) { .donut-grid { grid-template-columns: 1fr; } } .donut-with-table { display: flex; align-items: flex-start; gap: 32px; padding: 24px; } .donut-with-table-chart { flex-shrink: 0; } .donut-with-table-data { flex: 1; min-width: 0; } .donut-with-table-data .data-table th, .donut-with-table-data .data-table td { padding: 10px 12px; } @media (max-width: 700px) { .donut-with-table { flex-direction: column; } } .donut-block h3 { margin: 0 0 16px; font-size: 13px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; } .donut-block-body { display: flex; align-items: center; gap: 16px; } .donut-block-body svg { flex-shrink: 0; } .donut-legend { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .donut-legend-row { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--text-soft); } .donut-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .donut-legend-label { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .donut-legend-value { color: var(--text-faint); white-space: nowrap; } .connection-health { margin: 0; padding: 14px 24px; font-size: 13px; line-height: 1.55; border-bottom: 1px solid var(--border-soft); } .connection-health.is-ok { background: rgba(30, 142, 62, 0.06); color: var(--text); } .connection-health.is-error { background: rgba(217, 48, 37, 0.06); color: var(--text); } .dns-option-recommended { background: #fff; } [data-dns-record-group] { margin: 16px 24px 14px; } .dns-option-header { display: flex; align-items: center; gap: 10px; padding: 16px 24px 0; } .dns-option-title { font-size: 12px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.03em; } .dns-option-hint { margin: 4px 24px 0; padding-bottom: 4px; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); } .dns-option-divider { text-align: center; padding: 8px 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); border-bottom: 1px solid var(--border-soft); } .dns-field-with-copy { display: flex; align-items: center; gap: 8px; width: 100%; } .dns-field-with-copy input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .actions-row { display: flex; gap: 6px; justify-content: flex-end; } .icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-soft); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; color: var(--text-soft); } .icon-btn:hover { background: var(--bg-soft); } .icon-btn svg { width: 16px; height: 16px; } .empty-hint { text-align: center; padding: 40px 24px; color: var(--text-faint); font-size: 14px; } /* ---------- Modal ---------- */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); align-items: center; justify-content: center; padding: 24px; z-index: 100; } .modal-overlay.open { display: flex; } .modal { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); width: 560px; max-width: 100%; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; } .modal .panel-header, .modal .form-row { padding-left: 24px; padding-right: 24px; } .modal-body { overflow-y: auto; } .modal-text { padding: 20px 24px; margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-soft); } .modal-text strong { color: var(--text); font-weight: 600; } .plan-change-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; } .plan-change-card { border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px; background: var(--bg-soft); } .plan-change-card.next { border-color: rgba(0, 113, 227, 0.25); background: rgba(0, 113, 227, 0.04); } .plan-change-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: 8px; } .plan-change-name { font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .plan-change-price { font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 4px; } .plan-change-meta { font-size: 13px; color: var(--text-soft); } .plan-change-arrow { display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-faint); padding-top: 24px; } .plan-change-type { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; margin-bottom: 16px; } .plan-change-type.upgrade { background: rgba(52, 199, 89, 0.12); color: #248a3d; } .plan-change-type.downgrade { background: rgba(255, 149, 0, 0.12); color: #c93400; } .plan-change-type.change { background: rgba(0, 113, 227, 0.1); color: var(--accent); } .plan-change-effective-box { margin-top: 20px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg); } .plan-change-effective-label { font-size: 12px; color: var(--text-faint); margin-bottom: 4px; } .plan-change-effective-date { font-size: 18px; font-weight: 600; color: var(--text); } .plan-change-pending .plan-change-compare { max-width: 640px; } #plan-change-modal .modal { width: 600px; } #new-domain-modal .modal { width: 640px; } #plan-change-modal .modal-body { padding: 4px 28px 28px; display: flex; flex-direction: column; gap: 24px; } #plan-change-modal .plan-change-type { margin-bottom: 0; } #plan-change-modal .plan-change-compare { gap: 16px; } #plan-change-modal .plan-change-card { padding: 20px; } #plan-change-modal .plan-change-label { margin-bottom: 10px; } #plan-change-modal .plan-change-name { margin-bottom: 6px; } #plan-change-modal .plan-change-price { margin-bottom: 6px; } #plan-change-modal .plan-change-effective-box { margin-top: 0; padding: 18px 20px; } #plan-change-modal .plan-change-effective-label { margin-bottom: 6px; } #plan-change-modal .modal-text { padding: 0; margin: 0; } .billing-peak-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-soft); } #plan-change-modal .modal-footer { padding: 20px 28px 24px; gap: 12px; } .plan.scheduled { border-color: rgba(0, 113, 227, 0.35); } .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border-soft); } /* ---------- Account overview ---------- */ .accounts-page { min-height: 100vh; background: var(--bg-soft-2); display: flex; flex-direction: column; } .accounts-nav { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid var(--border-soft); background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); } .accounts-body { flex: 1; display: flex; justify-content: center; padding: 64px 32px; } .accounts-wrap { width: 100%; max-width: 860px; } .accounts-hero { margin-bottom: 32px; } .accounts-hero h1 { font-size: 30px; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 8px; } .accounts-hero p { font-size: 16px; color: var(--text-soft); margin: 0; max-width: 560px; } .entity-list { display: flex; flex-direction: column; } .entity-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 24px; border: none; border-bottom: 1px solid var(--border-soft); background: none; text-align: left; text-decoration: none; color: inherit; cursor: pointer; font-family: inherit; } .entity-list .entity-row:last-child { border-bottom: none; } .entity-row:hover { background: var(--bg-soft-2); } .entity-row.is-active { background: rgba(0, 113, 227, 0.05); } .entity-row.is-active .entity-chevron { color: var(--accent); } .entity-avatar { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-orange)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; } .entity-avatar-sm { width: 26px; height: 26px; border-radius: 7px; font-size: 10.5px; } .cell-with-avatar { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text); } .entity-info { flex: 1; min-width: 0; } .entity-name { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entity-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entity-chevron { color: var(--text-faint); display: inline-flex; flex-shrink: 0; } .entity-chevron svg { width: 17px; height: 17px; } .entity-row.add { color: var(--text-soft); font-weight: 500; } .entity-add-ic { width: 38px; height: 38px; border-radius: 10px; border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; color: var(--text-faint); } .entity-row.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .entity-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 4px; } .entity-pager .pager-status { font-size: 13px; color: var(--text-soft); } .account-limit-hint { font-weight: 400; color: var(--text-faint); } .accounts-meta { margin-top: 8px; font-size: 14px; color: var(--text-soft); } .accounts-section { margin-bottom: 28px; } .accounts-section-lead { margin: 0 0 14px; font-size: 14px; color: var(--text-soft); line-height: 1.45; max-width: 640px; } .accounts-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; text-decoration: none; } .accounts-agency-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .entity-row.is-filtered-out, .data-table tr.is-filtered-out { display: none; } .accounts-search { margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .accounts-filter { padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: #fff; font-size: 14px; color: var(--text); box-shadow: var(--shadow-sm); } .accounts-filter:focus { outline: none; border-color: rgba(0, 113, 227, 0.45); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12); } .accounts-search-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .accounts-search-field { position: relative; flex: 1; min-width: 220px; max-width: 420px; } .accounts-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); display: inline-flex; pointer-events: none; } .accounts-search-field input[type="search"] { width: 100%; padding: 11px 14px 11px 42px; border: 1px solid var(--border-soft); border-radius: 10px; background: #fff; font-size: 14px; color: var(--text); box-shadow: var(--shadow-sm); } .accounts-search-field input[type="search"]:focus { outline: none; border-color: rgba(0, 113, 227, 0.45); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12); } .accounts-search-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .accounts-search-empty { margin: 10px 0 0; font-size: 14px; color: var(--text-soft); } /* ---------- Partner manager card ---------- */ .pm-card { display: flex; align-items: center; gap: 18px; padding: 22px 24px; background: linear-gradient(135deg, rgba(0,113,227,0.06), rgba(255,138,0,0.08)); } .pm-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-orange)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; flex-shrink: 0; } .pm-info { flex: 1; min-width: 0; } .pm-role { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); } .pm-name { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; margin: 2px 0 1px; } .pm-sub { font-size: 13px; color: var(--text-soft); margin-bottom: 10px; } .pm-contact { display: flex; flex-wrap: wrap; gap: 8px 20px; } .pm-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-soft); } .pm-link:hover { color: var(--accent); } .pm-ic { display: inline-flex; color: var(--text-faint); } .pm-ic svg { width: 14px; height: 14px; } .pm-action { flex-shrink: 0; } /* ---------- Support page ---------- */ .support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; } .support-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .support-card:hover { box-shadow: var(--shadow-md); border-color: var(--border); transform: translateY(-2px); } .support-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--text-soft); flex-shrink: 0; } .support-ic svg { width: 20px; height: 20px; } .support-card-body { flex: 1; min-width: 0; } .support-card-title { font-size: 14px; font-weight: 600; color: var(--text); } .support-card-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; } .support-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; } .support-cols .panel { margin-bottom: 0; } .support-side { display: flex; flex-direction: column; gap: 24px; } .status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; } .status-row:first-child { padding-top: 0; } .status-row:last-child { padding-bottom: 0; border-bottom: none; } .faq-item { border-bottom: 1px solid var(--border-soft); } .faq-item:last-child { border-bottom: none; } .faq-item summary { padding: 14px 24px; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; color: var(--text-faint); font-size: 18px; flex-shrink: 0; } .faq-item[open] summary::after { content: "−"; } .faq-item summary:hover { color: var(--accent); } .faq-answer { padding: 0 24px 16px; font-size: 13px; line-height: 1.55; color: var(--text-soft); } .thread { display: flex; flex-direction: column; gap: 12px; } .thread-msg { padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 12px; background: #fff; } .thread-msg.is-staff { border-color: rgba(0,113,227,0.18); background: rgba(0,113,227,0.03); } .thread-msg-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .thread-msg-author { font-size: 13px; font-weight: 600; color: var(--text); } .thread-msg-role { font-size: 12px; color: var(--text-faint); font-weight: 400; } .thread-msg-time { font-size: 12px; color: var(--text-faint); white-space: nowrap; } .thread-msg-body { font-size: 13.5px; line-height: 1.6; color: var(--text); white-space: pre-wrap; } .thread-msg-system { text-align: center; font-size: 12px; color: var(--text-faint); padding: 2px 0; } .reply-compose textarea { width: 100%; min-height: 100px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; font-size: 14px; resize: vertical; } .reply-compose textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.12); } .reply-compose-actions { display: flex; justify-content: flex-end; margin-top: 12px; } .meta-list { display: flex; flex-direction: column; gap: 14px; } .meta-item label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; } .meta-item .meta-value { font-size: 14px; color: var(--text); } @media (max-width: 1000px) { .support-grid { grid-template-columns: 1fr; } .support-cols { grid-template-columns: 1fr; } } /* ---------- Domain settings page ---------- */ .panel-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border-soft); } .payment-method-display { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-soft-2); } .payment-method-icon { width: 44px; height: 30px; border-radius: 6px; border: 1px solid var(--border-soft); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-soft); flex-shrink: 0; } .payment-method-meta { flex: 1; min-width: 0; } .payment-method-meta .title { font-size: 14px; font-weight: 600; color: var(--text); } .payment-method-meta .sub { font-size: 13px; color: var(--text-faint); margin-top: 2px; } .payment-method-empty { padding: 20px 18px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg-soft-2); } .payment-method-empty p { margin: 0 0 14px; font-size: 14px; color: var(--text-soft); } .payment-fields { display: flex; flex-direction: column; gap: 10px; } .payment-form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .payment-secure-note { font-size: 13px; color: var(--text-faint); margin: 0; } .btn-danger { background: #d93025; color: #fff; border: 1px solid #d93025; } .btn-danger:hover { background: #b3261e; border-color: #b3261e; } /* Advanced Tracking feature cards -- same 3/2/1 column responsive steps as .client-requests-grid, so the two grids line up on the same breakpoints. */ .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .feature-card { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-soft-2); transition: border-color 0.15s ease, background 0.15s ease; } .feature-card.is-on { border-color: rgba(26,157,92,0.35); background: rgba(26,157,92,0.04); } .feature-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .feature-card-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); } /* Grows so the meta block below always sits on the card's bottom edge -- keeps the divider lines aligned across cards despite differing body lengths (the grid already stretches all cards to equal height). */ .feature-card p { flex: 1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-soft); } .feature-card .feature-meta { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 12px; line-height: 1.7; color: var(--text-faint); word-break: break-word; } .feature-card .feature-meta code { background: var(--bg-soft); padding: 1px 5px; border-radius: 4px; font-size: 11px; } /* Links each overview card out to its own advanced-tracking-*.html subpage for anything beyond the bare on/off toggle above. */ .feature-card-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .feature-card-footer .btn { width: 100%; } /* Per-header/per-cookie toggle lists (Enrichment and Cookie Keeper subpages) -- same responsive column count as .feature-grid so the two page types feel consistent. */ .header-toggle-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; } .header-toggle-group { padding: 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-soft-2); } .header-toggle-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .header-toggle-group-head h4 { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; } .header-toggle-group-clear { flex-shrink: 0; border: none; background: none; padding: 0; font-size: 11px; font-weight: 600; color: var(--accent); cursor: pointer; } .header-toggle-group-clear:hover { color: var(--accent-dark); text-decoration: underline; } .header-toggle-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 13px; color: var(--text-soft); cursor: pointer; } .header-toggle-row code { background: var(--bg-soft); padding: 1px 5px; border-radius: 4px; font-size: 11px; color: var(--text-faint); } @media (max-width: 1200px) { .header-toggle-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .header-toggle-groups { grid-template-columns: 1fr; } } /* IP filter row editor. Replaced a single textarea: one row per entry so each can carry its own label and its own validation message, which a shared text blob structurally cannot. The note line sits UNDER the two inputs rather than beside them so it can be a full sentence without squeezing the fields, and so rows keep a stable width whether or not they have anything to say. */ .ip-filter-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .ip-filter-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; grid-template-areas: "ip label remove" "note note note"; gap: 8px; align-items: center; } .ip-filter-row input[data-ip] { grid-area: ip; } .ip-filter-row input[data-label] { grid-area: label; } .ip-filter-row.has-error input[data-ip] { border-color: #d93025; } .ip-filter-note { grid-area: note; margin: 0; font-size: 12px; color: var(--text-faint); min-height: 0; } /* Empty when an entry is a plain, valid address -- there is nothing useful to say about "203.0.113.45", and a note on every row would be noise. */ .ip-filter-note:empty { display: none; } .ip-filter-note.is-bad { color: #d93025; } .ip-filter-remove { grid-area: remove; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text-faint); cursor: pointer; } .ip-filter-remove:hover { border-color: #d93025; color: #d93025; } .ip-filter-empty { margin: 14px 0 0; padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius-sm); text-align: center; font-size: 13px; color: var(--text-faint); } .ip-filter-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .ip-filter-toolbar .hint { font-size: 12px; color: var(--text-faint); } .ip-filter-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ip-filter-footer .hint { font-size: 12px; color: var(--text-faint); } .ip-filter-footer .hint.is-warning { color: #c93400; } /* Inherited entries: addresses an agency (or an account-wide list) applies to this domain. Visually separated from the editable rows and given a tinted ground, because the one thing a reader must not conclude is that these can be edited here -- they'd click Save, see no change, and have no idea why. */ .ip-filter-inherited { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-soft); } .ip-filter-inherited h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; } .ip-filter-inherited .hint { margin: 0 0 10px; font-size: 12px; color: var(--text-faint); } .ip-filter-inherited-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .ip-filter-inherited-list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 13px; } .ip-filter-inherited-label { color: var(--text-soft); } .ip-filter-inherited-note { font-size: 12px; color: var(--text-faint); } /* Pushed to the far end so the eye can scan the source column on its own -- with several agencies contributing, "who set this" is the question being asked, not "what is it". */ .ip-filter-inherited-source { margin-left: auto; font-size: 12px; color: var(--text-faint); } @media (max-width: 640px) { .ip-filter-inherited-source { margin-left: 0; } } /* Agency page only: what the fan-out actually touched, shown after a save. Persistent rather than a toast, because a list of client domains is something you read and check off, not something you glimpse. */ .ip-filter-result { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-soft); } .ip-filter-result-head { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 600; } .ip-filter-result-head:not(:first-child) { margin-top: 16px; } .ip-filter-result-head.is-ok { color: var(--success); } .ip-filter-result-head.is-bad { color: #d93025; } .ip-filter-result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .ip-filter-result-list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 13px; } /* Fixed column so the domains line up under each other and the client names read as one column, rather than the eye having to re-find them per row. */ .ip-filter-result-client { flex: 0 0 auto; min-width: 160px; color: var(--text-soft); } .ip-filter-result-error { font-size: 12px; color: #d93025; } @media (max-width: 640px) { .ip-filter-result-client { min-width: 0; flex-basis: 100%; } } /* Below this the three-column row stops fitting: the label field collapses to unusable width first, so give each input its own line and tuck the remove button up beside the address it removes. */ @media (max-width: 640px) { .ip-filter-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ip remove" "label label" "note note"; } .ip-filter-toolbar .hint { width: 100%; } } @media (max-width: 1200px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .feature-grid { grid-template-columns: 1fr; } } /* Download gallery -- downloads.html's GTM template cards. Same card-grid idea as .feature-grid above, but with a colored icon tile up top (this page is a small, browsable "shelf" of files, not a settings form) and a footer that's always the Download button, never conditional content. */ .download-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .download-card { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-soft-2); } .download-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); margin-bottom: 14px; } .download-card-icon.web { background: rgba(0,113,227,0.1); color: var(--accent); } .download-card-icon.server { background: rgba(255,138,0,0.12); color: var(--accent-orange); } .download-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .download-card-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); } .download-card p { flex: 1; margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-soft); } .download-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border-soft); } .download-card-footer code { font-size: 11.5px; color: var(--text-faint); background: var(--bg-soft); padding: 3px 6px; border-radius: 4px; word-break: break-all; } @media (max-width: 720px) { .download-gallery { grid-template-columns: 1fr; } } /* Toggle switch -- checkbox stays the real control (keyboard + form semantics intact), the visual track/knob is drawn on the adjacent span. Named .mb-toggle (not .switch) to avoid the pre-existing .switch pill component in style.css, whose width/height/background would otherwise bleed in and render a second, larger grey pill behind this one. */ .mb-toggle { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; width: 40px; height: 22px; line-height: 0; cursor: pointer; } .mb-toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .mb-toggle-track { position: relative; display: block; width: 40px; height: 22px; border-radius: 999px; background: var(--border); transition: background 0.18s ease; } .mb-toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.18s ease; } .mb-toggle input:checked + .mb-toggle-track { background: var(--success); } .mb-toggle input:checked + .mb-toggle-track::after { transform: translateX(18px); } .mb-toggle input:focus-visible + .mb-toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; } .mb-toggle input:disabled + .mb-toggle-track { opacity: 0.55; cursor: not-allowed; } .danger-zone { border-color: rgba(217,48,37,0.35); } .danger-zone .panel-header h2 { color: #d93025; } .danger-row { grid-template-columns: 1fr auto; align-items: center; } .danger-title { font-size: 14px; font-weight: 600; color: var(--text); } .danger-action { align-self: center; } input[readonly] { background: var(--bg-soft-2); color: var(--text-soft); cursor: default; } /* ---------- Domain statistics page ---------- */ .topbar-heading { display: flex; align-items: center; gap: 12px; min-width: 0; } .back-link { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-soft); background: #fff; color: var(--text-soft); flex-shrink: 0; } .back-link svg { width: 16px; height: 16px; } .back-link:hover { background: var(--bg-soft); color: var(--text); } .domain-select { width: auto; min-width: 220px; height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--border-soft); border-radius: 8px; font-size: 13px; cursor: pointer; /* Replaces the native angle-bracket arrow with the same chevron polyline used by .date-range-trigger's own trailing svg, so the two dropdown-ish controls that always sit side by side in a topbar look consistent. currentColor doesn't apply inside a background-image data URI, so the stroke color is --text-faint's literal hex (#86868b) instead. */ appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px; } .panel-header-filter { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .panel-header-filter label { font-size: 13px; color: var(--text-faint); font-weight: 500; } .event-name-select { width: auto; min-width: 160px; padding: 6px 10px; font-size: 13px; cursor: pointer; } .date-range-trigger { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: #fff; color: var(--text); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; white-space: nowrap; } .date-range-trigger:hover { background: var(--bg-soft); } .date-range-trigger svg:first-child { color: var(--text-faint); flex-shrink: 0; } .date-range-trigger svg:last-child { color: var(--text-faint); flex-shrink: 0; } /* Shared focus ring for the topbar's button-shaped controls -- matches the glow inputs/selects already get from the generic input/select:focus rule, so keyboard focus looks the same everywhere in the chrome. */ .date-range-trigger:focus-visible, .alert-bell-btn:focus-visible, .setup-guide-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.15); } .agg-toggle { display: inline-flex; align-items: center; height: 36px; background: var(--bg-soft); border-radius: 8px; padding: 3px; gap: 2px; } .agg-toggle-btn { height: 100%; padding: 0 12px; border: none; border-radius: 6px; background: none; font-size: 13px; font-weight: 500; font-family: inherit; color: var(--text-soft); cursor: pointer; white-space: nowrap; } .agg-toggle-btn:hover:not(:disabled):not(.active) { color: var(--text); } .agg-toggle-btn.active { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); } .agg-toggle-btn:disabled { color: var(--text-faint); opacity: 0.55; cursor: not-allowed; } /* ---------- Date range modal ---------- */ .dr-layout { display: flex; align-items: stretch; min-height: 380px; } .dr-agg-row { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-top: 1px solid var(--border-soft); } .dr-agg-label { font-size: 13px; font-weight: 500; color: var(--text-soft); } .dr-presets { display: flex; flex-direction: column; gap: 2px; width: 168px; flex-shrink: 0; padding: 20px 12px; border-right: 1px solid var(--border-soft); } .dr-preset-item { text-align: left; padding: 9px 12px; border-radius: 8px; border: none; background: none; font-size: 13px; font-family: inherit; color: var(--text-soft); cursor: pointer; } .dr-preset-item:hover { background: var(--bg-soft); color: var(--text); } .dr-preset-item.active { background: rgba(0, 113, 227, 0.08); color: var(--accent); font-weight: 600; } .dr-main { flex: 1; min-width: 0; padding: 20px 24px; } .dr-inputs { display: flex; gap: 12px; margin-bottom: 20px; } .dr-inputs .form-row { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 0; border-bottom: none; } .dr-inputs .form-row label { padding-top: 0; font-size: 12.5px; } .dr-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .dr-cal-nav-label { font-size: 13px; font-weight: 600; color: var(--text); } .dr-calendars { display: flex; gap: 28px; } .dr-cal { flex: 1; min-width: 0; } .dr-cal-title { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 10px; } .dr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dr-cal-dow { margin-bottom: 4px; } .dr-cal-dow span { display: block; text-align: center; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-faint); } .dr-cal-day { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: none; font-family: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; } .dr-cal-day.is-blank { visibility: hidden; cursor: default; } .dr-cal-day.is-disabled { color: var(--text-faint); opacity: 0.4; cursor: default; } .dr-cal-day.is-in-range { background: rgba(0, 113, 227, 0.10); border-radius: 0; } .dr-cal-day.is-range-start, .dr-cal-day.is-range-end { background: var(--accent); color: #fff; font-weight: 600; } .dr-cal-day.is-range-start { border-radius: 8px 0 0 8px; } .dr-cal-day.is-range-end { border-radius: 0 8px 8px 0; } .dr-cal-day.is-range-start.is-range-end { border-radius: 8px; } .dr-cal-day:not(.is-disabled):not(.is-blank):not(.is-range-start):not(.is-range-end):hover { background: var(--bg-soft); } .domain-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .domain-head-main h2 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 10px; } .domain-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .domain-region { font-size: 13px; color: var(--text-soft); } .container-id-field { display: inline-flex; align-items: center; gap: 6px; } .container-id-field .copy-trigger.mono { cursor: pointer; border-radius: 4px; padding: 1px 3px; margin: -1px -3px; } .container-id-field .copy-trigger.mono:hover { background: var(--bg-soft); color: var(--text); } .container-id-field .icon-btn { width: 22px; height: 22px; border-radius: 6px; flex: none; } .container-id-field .icon-btn svg { width: 13px; height: 13px; } .container-id-field .icon-btn .check-icon { color: var(--success); } .test-result { font-size: 13px; margin-top: 10px; display: none; } .test-result[hidden] { display: none; } .test-result:not([hidden]) { display: block; } .test-result-ok { color: var(--success); } .test-result-error { color: #d93025; } .domain-head-actions { display: flex; gap: 8px; flex-shrink: 0; } .script-snippet-block { margin-bottom: 16px; } .script-snippet-block:last-child { margin-bottom: 0; } .script-snippet-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .script-snippet-header h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); } .script-snippet-header p { margin: 2px 0 0; font-size: 12px; color: var(--text-faint); } .script-snippet-textarea { width: 100%; min-height: 120px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; color: var(--text); background: var(--bg-soft-2); resize: vertical; } .script-snippet-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.12); } .script-output { padding: 18px 24px 4px; } /* .form-row's own padding/border-bottom is meant for a standalone panel-body/ modal-body -- inside .script-output (which already has its own 18px/24px padding) it would otherwise double up. */ .script-output .form-row { padding: 0 0 18px; } .script-output-note { margin: 16px 0; font-size: 13px; color: var(--text-soft); line-height: 1.5; } .script-output-note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .modal.modal-wide { width: 680px; } .chart .bar-empty { width: 100%; height: 2px; background: var(--border-soft); border-radius: 2px; } .domain-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .domain-cols .panel { margin-bottom: 0; } .activity-list { display: flex; flex-direction: column; } .activity-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); } .activity-row:first-child { padding-top: 0; } .activity-row:last-child { padding-bottom: 0; border-bottom: none; } .activity-row .badge { flex-shrink: 0; } .activity-text { flex: 1; min-width: 0; font-size: 14px; color: var(--text); } .activity-time { font-size: 12px; color: var(--text-faint); flex-shrink: 0; white-space: nowrap; } /* Clickable rows in the domains overview */ .data-table tr.row-link { cursor: pointer; } .data-table tr.row-link:hover td { background: var(--bg-soft-2); } @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(280px, 86vw); z-index: 100; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: none; } .app.sidebar-open .sidebar { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); } .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .app.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; } .sidebar-toggle.icon-btn { display: inline-flex; } .topbar { padding: 0 16px; } .topbar-left h1, .topbar-left .topbar-heading { min-width: 0; } .stats-grid { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; } .domain-cols { grid-template-columns: 1fr; } } @media (max-width: 700px) { .accounts-body { padding: 32px 16px; } .entity-row { padding: 12px 16px; } } /* ---------- Ticket/feedback image attachments ---------- */ .attachment-input-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .attachment-add-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-soft); background: none; border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; } .attachment-add-btn:hover { color: var(--text); border-color: var(--border-soft); background: var(--bg-soft); } .attachment-add-btn svg { width: 14px; height: 14px; } .attachment-hint { font-size: 12px; color: var(--text-faint); } .attachment-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .attachment-preview { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-soft); background: var(--bg-soft); } .attachment-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .attachment-preview-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; padding: 0; line-height: 1; } .attachment-preview-remove svg { width: 10px; height: 10px; } .thread-msg-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .thread-msg-attachment { display: block; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-soft); background: var(--bg-soft); cursor: pointer; } .thread-msg-attachment img { width: 100%; height: 100%; object-fit: cover; display: block; } .thread-msg-attachment.is-loading { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-faint); } /* ---------- Support "view as" impersonation banner ---------- */ .impersonation-banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; background: #d93025; color: #fff; font-size: 13px; font-weight: 500; padding: 8px 16px; text-align: center; } .impersonation-banner strong { font-weight: 700; } .impersonation-banner-exit { display: inline-flex; align-items: center; gap: 6px; color: #fff; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .impersonation-banner-exit:hover { background: rgba(255,255,255,0.28); }