/* * Affiliate Conversion Portal — hand-written static stylesheet. * No build step, no preprocessor. Every color is a CSS custom property * defined once below — to re-theme the whole app (including flipping * default light/dark colors), edit the :root and [data-theme="dark"] * blocks only, nothing else in this file or in any view needs to change. * * Palette/layout language inspired by the Flux dashboard: violet accent, * 14px-radius cards, 260px fixed sidebar. Light is the default theme; * dark is a full alternate palette toggled via [data-theme="dark"] on * (see the theme-toggle button in the topbar / app.js). */ :root { --bg: #f4f5fa; --sidebar-bg: #ffffff; --sidebar-border: #eceef3; --sidebar-hover: #eef0f5; --sidebar-active: #efeaff; --card-bg: #ffffff; --popover-bg: #ffffff; --surface-2: #e9ebf1; --fg: #1a1d29; --muted-fg: #767b8a; --border: #eceef3; --border-soft: #f2f3f7; --topbar-bg: #ffffff; --input-bg: #ffffff; --input-border: #d7dbe3; --primary: #6d4aff; --primary-hover: #5b3ae0; --primary-fg: #ffffff; --primary-soft: #efeaff; --accent: #5b8def; --accent-soft: #eaf2fd; --success: #16a34a; --success-soft: #e8f9ef; --success-border: #b7ecc9; --warning: #d97706; --warning-soft: #fef3e2; --danger: #dc2626; --danger-soft: #fdebeb; --danger-border: #f5c2c2; --card-shadow: 0 1px 2px rgba(20, 20, 43, 0.04), 0 1px 1px rgba(20, 20, 43, 0.03); --hero-gradient: linear-gradient(135deg, #6d4aff 0%, #5b8def 100%); --hero-fg: #ffffff; --radius: 0.875rem; --radius-sm: 0.5rem; --radius-full: 999px; --font-heading: 'Space Grotesk', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', monospace; --sidebar-width: 260px; } [data-theme="dark"] { --bg: #050509; --sidebar-bg: #04040b; --sidebar-border: #232230; --sidebar-hover: #151421; --sidebar-active: #1d1c2a; --card-bg: #13121f; --popover-bg: #171723; --surface-2: #1d1c2a; --fg: #e3e4eb; --muted-fg: #8b8b98; --border: #272735; --border-soft: #1f1e2c; --topbar-bg: #0a0a12; --input-bg: #1a1926; --input-border: #35344a; --primary: #967aff; --primary-hover: #a892ff; --primary-fg: #050509; --primary-soft: #211c3a; --accent: #00a0f9; --accent-soft: #0a2540; --success: #3dbb4d; --success-soft: #10281a; --success-border: #1e4a2a; --warning: #ed9a00; --warning-soft: #2c2210; --danger: #ff5266; --danger-soft: #2c1113; --danger-border: #4a1e24; --card-shadow: none; --hero-gradient: linear-gradient(135deg, #4a2fd6 0%, #1c5fc9 100%); --hero-fg: #ffffff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); margin: 0; font-weight: 600; } a { color: inherit; text-decoration: none; } p { margin: 0; } code, .mono { font-family: var(--font-mono); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ---------- Auth / blank layout ---------- */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; } .auth-shell__inner { width: 100%; max-width: 22rem; } .auth-shell__toggle { position: fixed; top: 1rem; right: 1rem; } /* ---------- App shell (admin + portal) ---------- */ .shell { display: flex; min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar-width); display: flex; flex-direction: column; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); transform: translateX(-100%); transition: transform 0.2s ease-in-out; } .sidebar.is-open { transform: translateX(0); } .sidebar__brand { display: flex; align-items: center; gap: 0.5rem; height: 3.5rem; padding: 0 1rem; border-bottom: 1px solid var(--sidebar-border); flex-shrink: 0; } .sidebar__brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--primary); color: var(--primary-fg); font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; } .sidebar__brand-name { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; color: var(--fg); } .sidebar__nav { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; } .sidebar__nav-group-label { padding: 0.9rem 0.7rem 0.3rem; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-fg); } .sidebar__nav-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; color: var(--muted-fg); } .sidebar__nav-link .nav-icon { flex-shrink: 0; opacity: 0.85; } .sidebar__nav-link.is-active .nav-icon, .sidebar__nav-link:hover .nav-icon { opacity: 1; } .sidebar__nav-link:hover { background: var(--sidebar-hover); color: var(--fg); } .sidebar__nav-link.is-active { background: var(--sidebar-active); color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); } .sidebar__footer { border-top: 1px solid var(--sidebar-border); padding: 0.75rem 1rem; flex-shrink: 0; } .sidebar__footer-row { display: flex; align-items: center; gap: 0.5rem; } .sidebar__footer-user { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 1; } .avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: var(--radius-full); background: var(--primary); color: var(--primary-fg); font-family: var(--font-heading); font-weight: 600; font-size: 0.72rem; } .sidebar__footer-text { min-width: 0; } .sidebar__footer-name { font-size: 0.8rem; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar__footer-role { font-size: 0.7rem; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar__footer-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); color: var(--muted-fg); background: transparent; border: none; cursor: pointer; } .icon-btn:hover { background: var(--surface-2); color: var(--fg); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.75rem; height: 3.5rem; padding: 0 1rem; background: var(--topbar-bg); border-bottom: 1px solid var(--border); } .topbar__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; } .topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; } .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); color: var(--muted-fg); background: transparent; border: none; cursor: pointer; } .sidebar-toggle:hover { background: var(--surface-2); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); color: var(--muted-fg); background: transparent; border: 1px solid var(--border); cursor: pointer; flex-shrink: 0; } .theme-toggle:hover { background: var(--surface-2); color: var(--fg); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } .content { flex: 1; padding: 1.25rem 1rem; } @media (min-width: 1024px) { .sidebar { transform: translateX(0); } .main { margin-left: var(--sidebar-width); } .sidebar-toggle { display: none; } .content { padding: 1.5rem; } } /* ---------- Page header pattern ---------- */ .page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; } .page-header--tight { margin-bottom: 0; } .page-header__hint { font-size: 0.875rem; color: var(--muted-fg); } .filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 0.875rem; color: var(--muted-fg); } .filter-bar label { white-space: nowrap; flex-shrink: 0; } .filter-bar .select { width: auto; min-width: 11rem; } /* ---------- Cards ---------- */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); } .card--pad { padding: 1.5rem; } .card-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; color: var(--fg); } .card-title--sm { font-size: 0.95rem; } .card-subtitle { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-fg); } .stack { display: flex; flex-direction: column; gap: 1.25rem; } .stack--sm { gap: 0.75rem; } .max-w-form { max-width: 34rem; } .max-w-narrow { max-width: 24rem; } /* ---------- Forms ---------- */ .form { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; } .form--row { flex-direction: row; align-items: flex-end; } .form--row > .field-grow { flex: 1; } .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); align-items: end; gap: 0.75rem; } .form-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } } .field__label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--fg); margin-bottom: 0.35rem; } .field__label .optional { color: var(--muted-fg); font-weight: 400; } .field__hint { margin-top: 0.35rem; font-size: 0.78rem; color: var(--muted-fg); } .field__error { margin-top: 0.35rem; font-size: 0.78rem; color: var(--danger); } .input, .select, .textarea { display: block; width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; font-size: 0.875rem; color: var(--fg); font-family: var(--font-body); } .select { 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 20 20' fill='none' stroke='%238a8f9c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 1rem; padding-right: 2.25rem; } .input::placeholder, .textarea::placeholder { color: var(--muted-fg); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .input--mono { font-family: var(--font-mono); } .input--narrow { max-width: 8rem; text-transform: uppercase; } .field-inline { display: flex; gap: 0.5rem; } .field-inline .select { flex: 1; } .radio-row { display: flex; gap: 1.25rem; font-size: 0.875rem; } .radio-option { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--fg); } .radio-option--block { align-items: flex-start; gap: 0.5rem; } .radio-option input { margin-top: 0.2rem; accent-color: var(--primary); } .radio-stack { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; } .hidden { display: none !important; } .actions { display: flex; gap: 0.5rem; align-items: flex-end; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: var(--radius-sm); padding: 0.55rem 0.95rem; font-size: 0.85rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .btn:disabled { opacity: 0.5; pointer-events: none; } .btn--primary { background: var(--primary); color: var(--primary-fg); } .btn--primary:hover { background: var(--primary-hover); } .btn--secondary { background: var(--input-bg); color: var(--fg); border-color: var(--input-border); } .btn--secondary:hover { background: var(--surface-2); } .btn--danger { background: transparent; color: var(--danger); border-color: var(--border); } .btn--danger:hover { background: var(--danger-soft); } .btn--block { width: 100%; } .link { color: var(--primary); } .link:hover { text-decoration: underline; } .link-plain { text-decoration: none; display: block; } /* ---------- Code chip (signature element) ---------- */ .code-chip { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%; border: 1px solid var(--input-border); background: var(--input-bg); border-radius: var(--radius-sm); padding: 0.3rem 0.55rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg); } .code-chip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .code-chip__copy { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--muted-fg); padding: 0.15rem; border-radius: 0.25rem; cursor: pointer; } .code-chip__copy:hover { background: var(--surface-2); color: var(--primary); } .code-chip__copy.is-copied { color: var(--success); } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .table thead th { position: sticky; top: 0; background: var(--card-bg); text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-fg); padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border); white-space: nowrap; } .table tbody td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border-soft); color: var(--fg); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table .num { text-align: right; font-variant-numeric: tabular-nums; } .table .fg-muted { color: var(--muted-fg); } .table-actions { text-align: right; } /* ---------- Metrics ---------- */ .metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 1024px) { .metrics-grid { grid-template-columns: repeat(4, 1fr); } } .metric-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--card-shadow); } .metric-card__value { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; } .metric-card__label { margin-top: 0.25rem; font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-fg); } .metric-card__delta { margin-top: 0.5rem; font-size: 0.78rem; font-weight: 500; } .metric-card__delta--up { color: var(--success); } .metric-card__delta--down { color: var(--danger); } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; border-radius: var(--radius-full); padding: 0.2rem 0.6rem; font-size: 0.72rem; font-weight: 500; } .badge--active { background: var(--success-soft); color: var(--success); } .badge--paused { background: var(--warning-soft); color: var(--warning); } .badge--archived { background: var(--surface-2); color: var(--muted-fg); } .badge--suspended{ background: var(--danger-soft); color: var(--danger); } /* ---------- Flash messages ---------- */ .flash-stack { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .flash { border-radius: var(--radius-sm); padding: 0.65rem 0.85rem; font-size: 0.875rem; border: 1px solid transparent; } .flash--success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); } .flash--error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); } .flash--warning { background: var(--warning-soft); color: var(--warning); } /* ---------- Empty state ---------- */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); padding: 2.5rem 1.5rem; font-size: 0.875rem; color: var(--muted-fg); } .empty-state__title { color: var(--fg); font-weight: 500; } /* ---------- Misc text helpers ---------- */ .fg-muted { color: var(--muted-fg); } .fg-danger { color: var(--danger); } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.78rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .font-medium { font-weight: 500; } .text-center { text-align: center; } .nowrap { white-space: nowrap; } .definition-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 1024px) { .definition-grid { grid-template-columns: repeat(4, 1fr); } } .definition-grid--2col { grid-template-columns: repeat(2, 1fr); } .definition-grid dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-fg); } .definition-grid dd { margin: 0.25rem 0 0; } /* ---------- Date range picker ---------- */ .date-range { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .date-range__pills { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.2rem; background: var(--surface-2); border-radius: var(--radius-full); } .date-range__pill { border: none; background: transparent; color: var(--muted-fg); font-size: 0.8rem; font-weight: 500; padding: 0.4rem 0.75rem; border-radius: var(--radius-full); cursor: pointer; } .date-range__pill:hover { color: var(--fg); } .date-range__pill.is-active { background: var(--card-bg); color: var(--primary); box-shadow: var(--card-shadow), 0 0 0 1px var(--border); } .date-range__custom { display: inline-flex; align-items: center; gap: 0.4rem; } .input--sm { padding: 0.4rem 0.6rem; font-size: 0.8rem; width: auto; } .btn--sm { padding: 0.4rem 0.7rem; font-size: 0.78rem; } /* ---------- Accented metric cards (icon badge + colored left border) ---------- */ .metric-card--accent { border-left-width: 3px; border-left-style: solid; border-left-color: var(--primary); } .metric-card--primary { border-left-color: var(--primary); } .metric-card--accent-blue { border-left-color: var(--accent); } .metric-card--success { border-left-color: var(--success); } .metric-card--warning { border-left-color: var(--warning); } .metric-card--danger { border-left-color: var(--danger); } .card--warning-accent { border-left: 3px solid var(--warning); } .metric-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .metric-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); flex-shrink: 0; } .metric-card__icon--primary { background: var(--primary-soft); color: var(--primary); } .metric-card__icon--accent-blue { background: var(--accent-soft); color: var(--accent); } .metric-card__icon--success { background: var(--success-soft); color: var(--success); } .metric-card__icon--warning { background: var(--warning-soft); color: var(--warning); } .metric-card__icon--danger { background: var(--danger-soft); color: var(--danger); } .metric-card .metric-card__value { margin-top: 0.5rem; } /* ---------- Hero metric card ---------- */ .hero-card { background: var(--hero-gradient); color: var(--hero-fg); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; justify-content: space-between; } .hero-card__main { min-width: 0; } .hero-card__label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; } .hero-card__value { margin-top: 0.4rem; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .hero-card__compare { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; opacity: 0.9; } .hero-card__compare .badge { background: rgba(255, 255, 255, 0.2); color: var(--hero-fg); } .hero-card__spark { flex: 1; min-width: 10rem; max-width: 18rem; } .hero-card__metrics { display: grid; grid-template-columns: repeat(2, minmax(7rem, 1fr)); gap: 0.75rem; width: 100%; } @media (min-width: 640px) { .hero-card__metrics { grid-template-columns: repeat(4, minmax(7rem, 1fr)); width: auto; } } .hero-card__mini { background: rgba(255, 255, 255, 0.14); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; } .hero-card__mini-label { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; display: flex; align-items: center; gap: 0.3rem; } .hero-card__mini-value { margin-top: 0.2rem; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; } /* ---------- Sparkline ---------- */ .sparkline { width: 100%; height: 3rem; display: block; overflow: visible; } .sparkline__area { fill: rgba(255, 255, 255, 0.18); stroke: none; } .sparkline__line { fill: none; stroke: var(--hero-fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sparkline--tinted .sparkline__area { fill: var(--primary-soft); } .sparkline--tinted .sparkline__line { stroke: var(--primary); } /* ---------- Chart card ---------- */ .chart-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .chart-card__canvas-wrap { position: relative; height: 280px; } .chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: var(--muted-fg); } .chart-legend__dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: var(--radius-full); margin-right: 0.4rem; } .chart-legend__dot--primary { background: var(--primary); } .chart-legend__dot--accent { background: var(--accent); } /* ---------- Card grid (top offers, "Top Products"-style) ---------- */ .card-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } .tile { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--card-shadow); } .tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .tile__title { font-weight: 600; color: var(--fg); font-size: 0.9rem; } .tile__subtitle { margin-top: 0.2rem; font-size: 0.75rem; color: var(--muted-fg); } .tile__value { margin-top: 0.75rem; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); } .tile__meta { margin-top: 0.3rem; font-size: 0.78rem; color: var(--muted-fg); display: flex; align-items: center; gap: 0.3rem; } /* ---------- Horizontal bar list (top affiliates / channel breakdown) ---------- */ .bar-list { display: flex; flex-direction: column; gap: 0.9rem; } .bar-list__row-top { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.3rem; } .bar-list__name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; color: var(--fg); font-weight: 500; } .bar-list__name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-list__dot { flex-shrink: 0; width: 0.55rem; height: 0.55rem; border-radius: var(--radius-full); background: var(--primary); } .bar-list__value { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 600; font-size: 0.85rem; } .bar-list__track { height: 0.4rem; border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; } .bar-list__fill { height: 100%; border-radius: var(--radius-full); background: var(--primary); } /* ---------- Activity list (recent conversions / transactions) ---------- */ .activity-list { display: flex; flex-direction: column; } .activity-list__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border-soft); } .activity-list__row:last-child { border-bottom: none; padding-bottom: 0; } .activity-list__row:first-child { padding-top: 0; } .activity-list__avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: var(--radius-full); background: var(--primary-soft); color: var(--primary); font-family: var(--font-heading); font-weight: 600; font-size: 0.68rem; flex-basis: 2.1rem; } .activity-list__body { min-width: 0; flex: 1; } .activity-list__title { font-size: 0.85rem; font-weight: 500; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .activity-list__meta { margin-top: 0.1rem; font-size: 0.75rem; color: var(--muted-fg); } .activity-list__value { flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--success); font-size: 0.85rem; white-space: nowrap; } /* ---------- Chart series toggle (pill buttons above a chart) ---------- */ .chart-toggle { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.2rem; background: var(--surface-2); border-radius: var(--radius-full); } .chart-toggle__btn { border: none; background: transparent; color: var(--muted-fg); font-size: 0.78rem; font-weight: 500; padding: 0.35rem 0.7rem; border-radius: var(--radius-full); cursor: pointer; } .chart-toggle__btn.is-active { background: var(--card-bg); color: var(--fg); box-shadow: var(--card-shadow), 0 0 0 1px var(--border); } /* ---------- CSV import: step indicator ---------- */ .import-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .import-steps__step { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 500; color: var(--muted-fg); } .import-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: var(--radius-full); background: var(--surface-2); color: var(--muted-fg); font-size: 0.78rem; font-weight: 600; flex-shrink: 0; } .import-steps__step.is-current { color: var(--fg); } .import-steps__step.is-current .import-steps__num, .import-steps__step.is-done .import-steps__num { background: var(--primary); color: var(--primary-fg); } .import-steps__line { width: 1.5rem; height: 1px; background: var(--border); flex-shrink: 0; } /* ---------- CSV import: type selection cards ---------- */ .import-type-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 0.5rem; } @media (min-width: 640px) { .import-type-grid { grid-template-columns: repeat(2, 1fr); } } .import-type-card { position: relative; border: 1px solid var(--input-border); background: var(--input-bg); border-radius: var(--radius); padding: 1rem; } /* Scoped to the type radio specifically (a direct child) — the nested all_clicks radios inside .import-shape-choice must NOT trigger this. */ .import-type-card:has(> .import-type-card__head input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--primary-soft); } .import-type-card__head { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; } .import-type-card__head input[type="radio"] { accent-color: var(--primary); flex-shrink: 0; } .import-type-card__title { font-weight: 600; color: var(--fg); } .import-type-card__desc { margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted-fg); line-height: 1.4; } .import-type-card > .link { display: inline-block; margin-top: 0.6rem; } .import-shape-choice { margin-top: 0.85rem; padding: 0.75rem; border-radius: var(--radius-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 0.45rem; } .import-shape-choice .field__label { margin-bottom: 0; font-size: 0.8rem; } .import-shape-choice .field__hint { margin-top: 0.2rem; } /* ---------- CSV import: field-mapping table ---------- */ .map-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border-soft); } .map-row:last-child { border-bottom: none; } .map-row__field { display: flex; align-items: baseline; gap: 0.4rem; } .map-row__field-name { font-weight: 600; color: var(--fg); font-size: 0.9rem; } .map-row__hint { margin-top: 0.2rem; font-size: 0.75rem; color: var(--muted-fg); } .map-row__arrow { color: var(--muted-fg); flex-shrink: 0; } .required-tag { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--danger); } .optional-tag { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-fg); } /* ---------- Two-column dashboard layout ---------- */ .dash-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 1024px) { .dash-grid--2col { grid-template-columns: 1.6fr 1fr; align-items: start; } }