/* BTL Lead Generator — shared design tokens & components (all pages). Archetype: "sales operations cockpit" / Workbench — a quiet, dense tool for daily use, not a marketing template. Navy = brand, green = success only, amber = limit/risk, red = errors only. One accent hue, restrained shadows and radii, no gradients, no emoji as the sole signal on interactive controls. */ :root { /* Color — OKLCH tokens only; never hex/rgb in component rules below */ --c-navy-900: oklch(22% 0.06 260); --c-navy-800: oklch(27% 0.07 260); --c-navy-700: oklch(33% 0.09 258); --c-bg: oklch(97% 0.003 260); --c-surface: oklch(100% 0 0); --c-border: oklch(90% 0.006 260); --c-border-strong: oklch(83% 0.01 260); --c-text: oklch(24% 0.02 260); --c-text-muted: oklch(52% 0.02 260); --c-success: oklch(50% 0.12 150); --c-success-bg: oklch(95% 0.03 150); --c-warning: oklch(48% 0.13 60); --c-warning-bg: oklch(96% 0.04 70); --c-danger: oklch(45% 0.17 25); --c-danger-bg: oklch(95% 0.02 25); --c-info: oklch(45% 0.13 250); --c-info-bg: oklch(95% 0.02 250); --c-neutral-bg: oklch(96% 0.004 260); --c-focus: oklch(55% 0.15 250); /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* Shape — restrained, not "rounded everything" */ --radius-sm: 4px; --radius-md: 6px; /* Elevation — exactly 3 levels, used consistently, never more */ --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.06); --shadow-2: 0 4px 6px oklch(0% 0 0 / 0.08); --shadow-3: 0 10px 15px oklch(0% 0 0 / 0.12); /* Type */ --font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; } /* Dark mode — driven by [data-bs-theme] on (set by static/theme-toggle.js), which also flips every stock Bootstrap component (cards, tables, alerts, badges, forms, modals) for free. Navy brand tokens stay put in both modes — the header/table-head/log-panel are meant to read as "always navy". */ :root[data-bs-theme="dark"] { --c-bg: oklch(20% 0.012 260); --c-surface: oklch(25% 0.014 260); --c-border: oklch(33% 0.014 260); --c-border-strong: oklch(42% 0.016 260); --c-text: oklch(93% 0.004 260); --c-text-muted: oklch(70% 0.012 260); --c-success: oklch(72% 0.13 150); --c-success-bg: oklch(30% 0.06 150); --c-warning: oklch(76% 0.13 70); --c-warning-bg: oklch(32% 0.07 70); --c-danger: oklch(72% 0.15 25); --c-danger-bg: oklch(30% 0.07 25); --c-info: oklch(76% 0.11 250); --c-info-bg: oklch(30% 0.06 250); --c-neutral-bg: oklch(28% 0.012 260); --c-focus: oklch(75% 0.13 250); } html, body { overflow-x: clip; } html { /* Mírné zvětšení celého textu — Bootstrap i naše tokeny jsou v rem/em, takže se to promítne konzistentně všude (nadpisy, popisky, tlačítka). */ font-size: 107%; } body { background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); } /* Visible, instant focus ring everywhere — never animated, never skipped */ :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; transition: none; } /* No two-line clickable text: a button/link wraps to the next flex row as a whole, never breaks its own label mid-word */ .btn { white-space: nowrap; } h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; } /* ── Bootstrap surface tokens (cards, buttons keep Bootstrap layout, colors/shadows/radius are locked to our tokens) ──────────────────── */ .card { border-color: var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); } .card-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); font-weight: 600; } .btn-primary { background: var(--c-navy-700); border-color: var(--c-navy-700); } .btn-primary:hover { background: var(--c-navy-800); border-color: var(--c-navy-800); } /* ── Compact page header, shared by dashboard / settings / lead detail ─ */ .app-header, .page-header { background: var(--c-navy-900); padding: var(--sp-3) 0; margin-bottom: 0; } .app-header .brand, .page-header .brand { color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: 0.2px; white-space: nowrap; } .app-header .btn, .app-header .form-select, .page-header .btn { font-size: 0.8125rem; } .btn-header-primary { background: var(--c-success); border-color: var(--c-success); color: #fff; font-weight: 600; } .btn-header-primary:hover { background: oklch(44% 0.12 150); border-color: oklch(44% 0.12 150); color: #fff; } .btn-header-ghost { background: transparent; border-color: oklch(100% 0 0 / 0.35); color: oklch(100% 0 0 / 0.9); } .btn-header-ghost:hover { background: oklch(100% 0 0 / 0.12); border-color: oklch(100% 0 0 / 0.55); color: #fff; } .app-header select.form-select { background-color: oklch(100% 0 0 / 0.08); border-color: oklch(100% 0 0 / 0.3); color: #fff; } .app-header select.form-select option { color: #000; } /* ── Status strip ───────────────────────────────────────────────────── */ .status-strip { background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding: var(--sp-3) 0; } .status-strip .strip-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); } .stat-chip { display: flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; } .stat-chip .stat-value { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-text); } .stat-chip .stat-label { font-size: 0.75rem; color: var(--c-text-muted); } .status-strip.strip-warning { background: var(--c-warning-bg); } .status-strip.strip-danger { background: var(--c-danger-bg); } .strip-alert { margin-left: auto; font-size: 0.8125rem; font-weight: 600; } .strip-alert.text-danger { color: var(--c-danger) !important; } .strip-alert.text-warning { color: var(--c-warning) !important; } .mini-progress { width: 90px; height: 6px; background: var(--c-neutral-bg); border-radius: 3px; overflow: hidden; } .mini-progress > div { height: 100%; } .mini-progress .bar-success { background: var(--c-success); } .mini-progress .bar-warning { background: var(--c-warning); } .mini-progress .bar-danger { background: var(--c-danger); } /* ── Toolbar (filters) ──────────────────────────────────────────────── */ .filter-toolbar { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); } .filter-toolbar .form-select, .filter-toolbar .form-control { font-size: 0.8125rem; } .filter-toolbar label.form-label-sm { font-size: 0.75rem; color: var(--c-text-muted); margin-bottom: 0; margin-right: var(--sp-1); } /* ── Status pills by key (semantic, not decorative) ────────────────── */ .status-pill { font-size: 0.6875rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .status-pill.pill-new { background: var(--c-neutral-bg); color: var(--c-text-muted); border-color: var(--c-border); } .status-pill.pill-progress { background: var(--c-info-bg); color: var(--c-info); } .status-pill.pill-success { background: var(--c-success-bg); color: var(--c-success); } .status-pill.pill-warning { background: var(--c-warning-bg); color: var(--c-warning); } .status-pill.pill-danger { background: var(--c-danger-bg); color: var(--c-danger); } .status-pill.pill-muted { background: var(--c-neutral-bg); color: var(--c-text-muted); } /* ── Table (main work surface) ──────────────────────────────────────── */ .leads-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); } .leads-toolbar { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-border); } .leads-table { margin-bottom: 0; font-size: 0.8125rem; } .leads-table thead th { background: var(--c-navy-900); color: #fff; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; border: none; vertical-align: middle; padding-top: var(--sp-2); padding-bottom: var(--sp-2); } .leads-table tbody tr { cursor: pointer; } .leads-table tbody tr:hover { background: var(--c-info-bg); } .leads-table td { vertical-align: middle; padding-top: var(--sp-2); padding-bottom: var(--sp-2); } .score-badge { font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 42px; text-align: center; display: inline-block; padding: 2px 6px; border-radius: var(--radius-sm); } .score-badge.score-high { background: var(--c-success-bg); color: var(--c-success); } .score-badge.score-mid { background: var(--c-warning-bg); color: var(--c-warning); } .score-badge.score-low { background: var(--c-neutral-bg); color: var(--c-text-muted); } .flag { font-size: 1.1rem; } /* ── Log panels (pipeline / push) ───────────────────────────────────── */ .log-panel { height: 260px; overflow-y: auto; background: var(--c-navy-900); color: oklch(88% 0.02 260); font-family: var(--font-mono); font-size: 0.75rem; padding: var(--sp-3); border-radius: var(--radius-sm); white-space: pre-wrap; } /* ── Modals aligned with dashboard tokens ───────────────────────────── */ .modal-content { border-radius: var(--radius-md); box-shadow: var(--shadow-3); } .modal-header.header-navy { background: var(--c-navy-900); color: #fff; } /* ── ROI modal: real data vs. estimate must never look the same ────── */ .metric-real { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--c-info); border-radius: var(--radius-sm); padding: var(--sp-3); } .metric-estimate { background: var(--c-warning-bg); border: 1px dashed var(--c-warning); border-radius: var(--radius-sm); padding: var(--sp-3); } .estimate-tag { display: inline-block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-warning); background: var(--c-surface); border: 1px solid var(--c-warning); border-radius: var(--radius-sm); padding: 1px 6px; margin-left: var(--sp-2); } /* ── Settings page: divisions & product picker ─────────────────────── */ .division-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); } .division-header .fs-5 { line-height: 1; } .product-item { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); height: 100%; transition: border-color 0.15s ease; } .product-item:hover { border-color: var(--c-border-strong); } .product-item:has(input:checked) { border-color: var(--c-navy-700); background: var(--c-info-bg); } .product-item .form-check-input { margin-top: 3px; } .save-bar { position: sticky; bottom: 0; background: var(--c-surface); border-top: 1px solid var(--c-border); padding: var(--sp-3) 0; box-shadow: 0 -4px 12px oklch(0% 0 0 / 0.06); } /* ── Lead detail page: email editor ─────────────────────────────────── */ #body_html_preview { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: var(--sp-4); background: var(--c-surface); min-height: 200px; } .tab-content { background: var(--c-surface); border: 1px solid var(--c-border); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); padding: var(--sp-4); } /* ── Mobile: table/nav scroll in their own box, page never does ─────── */ @media (max-width: 575.98px) { .app-header .container, .page-header .container, .status-strip .container, .container { padding-left: var(--sp-3); padding-right: var(--sp-3); } .status-strip .strip-inner { gap: var(--sp-3); } .filter-toolbar .row { row-gap: var(--sp-2); } .filter-toolbar .col-auto.ms-auto { margin-left: 0 !important; } .leads-toolbar, .leads-toolbar > div, .save-bar .container, .app-header .container > div { flex-wrap: wrap; } .mini-progress { width: 60px; } /* Touch targets: icon-only / dense buttons get room for a finger, not just a cursor */ .app-header .btn, .page-header .btn, .leads-toolbar .btn, .leads-table .btn { min-height: 38px; } }