/* ======================================================================
NICODE design system — light theme, gradient accents, Inter
====================================================================== */
:root {
/* Surfaces (light theme) */
--bg-primary: #ffffff;
--bg-secondary: #f7f7fa;
--bg-elevated: #ffffff;
--bg-hover: #f0f0f5;
--bg-card-deep: #fafafd;
/* Borders */
--border: #e6e6ec;
--border-strong: #d4d4dc;
/* Text */
--text-primary: #0a0a14;
--text-secondary: #5a5a6a;
--text-muted: #8a8a98;
/* Brand gradient (kept) */
--accent-pink: #ff5070;
--accent-gradient: linear-gradient(135deg, #ff5070 0%, #ff7050 50%, #b070f0 100%);
--accent-gradient-hover: linear-gradient(135deg, #ff6080 0%, #ff8060 50%, #c080ff 100%);
/* Status / severity */
--severity-high: #ff5070;
--severity-medium: #ffa050;
--severity-low: #6070a0;
--status-success: #50d090;
--status-warning: #ffa050;
--status-danger: #ff5070;
/* Shadows (softened for light theme) */
--shadow-sm: 0 2px 8px rgba(15, 15, 30, 0.06);
--shadow-md: 0 4px 16px rgba(15, 15, 30, 0.08);
--shadow-glow: 0 0 32px rgba(176, 112, 240, 0.18);
/* Radii */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
/* Layout */
--sidebar-width: 240px;
--topbar-height: 60px;
--content-max: 1400px;
}
/* ----- Reset / base ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 14px;
line-height: 1.5;
background: var(--bg-primary);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-pink); }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
/* ----- Cosmos background (subtle, only on dashboard hero) ----- */
.cosmos-bg {
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(circle at 15% 20%, rgba(255, 80, 112, 0.06) 0%, transparent 40%),
radial-gradient(circle at 85% 80%, rgba(176, 112, 240, 0.06) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(80, 128, 240, 0.03) 0%, transparent 60%);
}
/* ----- Layout: top bar + sidebar + main ----- */
/* `minmax(0, 1fr)` not plain `1fr` so wide children (data tables, code blocks)
can't blow out the main column and force horizontal page scroll. Without
this, a 1400px-wide table inside .table-wrap pushes the entire layout. */
.app-shell { min-height: 100vh; display: grid; grid-template-rows: var(--topbar-height) 1fr; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-areas: "topbar topbar" "sidebar main"; }
.main { min-width: 0; } /* belt-and-suspenders: also lets flex/grid children shrink below intrinsic size */
.topbar {
grid-area: topbar;
display: flex; align-items: center; justify-content: space-between;
padding: 0 24px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 10;
}
.topbar-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.topbar-logo img { width: 40px; height: 40px; border-radius: 8px; display: block; }
.topbar-logo .ni-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border: 1.5px solid var(--text-primary);
border-radius: 8px;
font-family: 'Inter', monospace;
font-weight: 700;
letter-spacing: -0.5px;
}
.topbar-logo .code-mark { color: var(--text-secondary); letter-spacing: 1px; }
.topbar-logo .code-mark::after { content: '.'; color: var(--accent-pink); }
.topbar-actions { display: flex; align-items: center; gap: 16px; color: var(--text-secondary); font-size: 13px; }
.topbar-actions a { color: var(--text-secondary); }
.topbar-actions a:hover { color: var(--text-primary); }
.sidebar {
grid-area: sidebar;
background: var(--bg-secondary);
border-right: 1px solid var(--border);
padding: 16px 12px;
overflow-y: auto;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 14px;
font-weight: 500;
transition: all 0.15s ease;
}
.sidebar-nav a:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-nav a.active { background: var(--bg-hover); color: var(--text-primary); position: relative; }
.sidebar-nav a.active::before {
content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
background: var(--accent-gradient);
border-radius: 0 3px 3px 0;
}
.sidebar-nav a .icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; }
.main { grid-area: main; padding: 32px; max-width: var(--content-max); width: 100%; margin: 0 auto; }
/* ----- Page heading ----- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.page-subtitle { color: var(--text-secondary); font-size: 14px; margin-top: 4px; }
/* ----- Cards ----- */
.card {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
transition: border-color 0.2s ease;
}
.card:hover { border-color: var(--border-strong); }
.card-elevated {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px;
}
/* ===== Dashboard refined components ====================================
Hero pair (Nowe leady + Skanowane strony) renders a big number with a
sparkline trail, mini stat row, Stan kampanii sub-stats, Google Places
progress bars, and the Skaner section. Everything below is scoped with
`dash-` so it can't bleed into other pages.
======================================================================== */
.dash-hero-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
margin-bottom: 16px;
}
@media (max-width: 720px) { .dash-hero-grid { grid-template-columns: 1fr; } }
.dash-hero-card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 22px 22px 18px;
display: flex; flex-direction: column; gap: 10px;
transition: border-color 0.15s ease;
}
.dash-hero-card:hover { border-color: var(--border-strong); }
.dash-hero-label {
font-size: 11px; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.6px;
}
.dash-hero-row {
display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.dash-hero-value { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: var(--text-primary); }
.dash-hero-spark { display: block; flex-shrink: 0; }
.dash-hero-trend { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--text-muted); }
.dash-hero-trend-up { color: var(--status-success); font-weight: 600; }
.dash-hero-trend-down { color: var(--severity-high); font-weight: 600; }
.dash-hero-trend-neutral { color: var(--text-muted); font-weight: 600; }
/* Pair grid: Stan kampanii + Google Places side-by-side, 50/50, with each
block living in its own card-elevated. Stacks below 900px. */
.dash-pair-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
align-items: stretch;
}
@media (max-width: 900px) { .dash-pair-grid { grid-template-columns: 1fr; } }
.dash-pair-grid > .card-elevated { display: flex; flex-direction: column; }
/* Stan kampanii — three sub-stats, each its own bordered cell so they read
as parallel cards inside the parent .card-elevated. Gap separates them. */
.dash-substat-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 720px) { .dash-substat-grid { grid-template-columns: 1fr; } }
.dash-substat {
padding: 14px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-secondary);
}
.dash-substat-value { font-size: 26px; font-weight: 800; line-height: 1; color: var(--text-primary); letter-spacing: -0.5px; }
.dash-substat-label { font-size: 11px; color: var(--text-muted); margin-top: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
/* Google Places progress bars */
.dash-progress-row { margin-bottom: 14px; }
.dash-progress-row:last-child { margin-bottom: 0; }
.dash-progress-head {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 12px; margin-bottom: 6px;
}
.dash-progress-head-label { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.dash-progress-head-value { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-progress-track {
height: 6px;
background: var(--bg-hover);
border-radius: 3px;
overflow: hidden;
}
.dash-progress-fill { height: 100%; background: var(--text-primary); border-radius: 3px; transition: width 0.3s ease; }
.dash-progress-fill.is-warn { background: var(--severity-medium); }
.dash-progress-fill.is-danger { background: var(--severity-high); }
.dash-progress-fill.is-gradient { background: var(--accent-gradient); }
.dash-progress-meta {
display: flex; justify-content: space-between;
font-size: 11px; color: var(--text-muted);
margin-top: 12px; padding-top: 12px;
border-top: 1px solid var(--border);
}
/* Skaner header badge (worker count) */
.dash-scanner-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
background: var(--bg-hover);
border-radius: 999px;
font-size: 11px; font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.5px;
}
.dash-scanner-badge::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--status-success);
box-shadow: 0 0 0 3px rgba(80, 208, 144, 0.18);
}
/* Worker rows (refined version of scanner_status list) */
.dash-worker-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.dash-worker-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13px;
}
.dash-worker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-pink); flex-shrink: 0; }
.dash-worker-query { color: var(--text-primary); font-weight: 500; }
.dash-worker-sep { color: var(--text-muted); }
.dash-worker-arrow { color: var(--text-muted); margin: 0 4px; }
.dash-worker-target { color: var(--text-secondary); word-break: break-all; }
/* ----- Stat cards (dashboard) — mimics the "100+ Projektów" style ----- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px 20px;
text-align: left;
}
.stat-number {
font-size: 40px;
font-weight: 800;
letter-spacing: -1.5px;
line-height: 1;
background: var(--accent-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
}
.stat-label { color: var(--text-secondary); font-size: 13px; margin-top: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
/* ----- Buttons ----- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 20px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
border: 0;
white-space: nowrap;
}
.btn-primary { background: var(--accent-gradient); color: white; }
.btn-primary:hover { background: var(--accent-gradient-hover); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--text-secondary); }
.btn-ghost { background: transparent; color: var(--text-secondary); padding: 6px 12px; }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-danger { background: transparent; color: var(--severity-high); border: 1px solid rgba(255, 80, 112, 0.3); }
.btn-danger:hover { background: rgba(255, 80, 112, 0.1); }
.btn-dark { background: #0a0a14; color: #ffffff; }
.btn-dark:hover { background: #1a1a24; transform: translateY(-1px); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
/* ----- Forms ----- */
.form-group { margin-bottom: 16px; }
.form-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.form-input, .form-select, .form-textarea {
width: 100%;
padding: 10px 14px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: inherit;
font-size: 14px;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none;
border-color: var(--text-primary);
box-shadow: 0 0 0 3px rgba(10, 10, 20, 0.08);
}
.form-textarea { min-height: 120px; resize: vertical; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 13px; }
.form-help { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
/* ----- Tables ----- */
.table-wrap { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 16px; text-align: left; font-size: 13px; }
thead th { background: var(--bg-elevated); color: var(--text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; border-bottom: 1px solid var(--border); }
tbody tr { border-top: 1px solid var(--border); transition: background 0.15s ease; }
tbody tr:hover { background: var(--bg-hover); }
tbody tr:first-child { border-top: 0; }
td.numeric, th.numeric { text-align: right; font-variant-numeric: tabular-nums; }
td .domain { font-weight: 500; }
td .domain a:hover { color: var(--accent-pink); }
/* ----- Status badges / severity chips ----- */
.badge {
display: inline-flex; align-items: center;
padding: 3px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-new { background: var(--bg-hover); color: var(--text-secondary); }
.badge-new .badge-label {
background: var(--accent-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
}
.badge-send { background: var(--accent-gradient); color: white; }
.badge-skip { background: rgba(96, 96, 112, 0.2); color: var(--text-muted); }
.badge-later { background: rgba(255, 160, 80, 0.15); color: var(--severity-medium); }
.badge-done { background: rgba(80, 208, 144, 0.15); color: var(--status-success); }
.chip {
display: inline-flex; align-items: center;
padding: 3px 10px;
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 500;
border: 1px solid var(--border);
background: var(--bg-elevated);
color: var(--text-secondary);
margin: 2px 4px 2px 0;
}
.chip-high { border-color: rgba(255, 80, 112, 0.4); color: var(--severity-high); background: rgba(255, 80, 112, 0.08); }
.chip-medium { border-color: rgba(255, 160, 80, 0.4); color: var(--severity-medium); background: rgba(255, 160, 80, 0.08); }
.chip-low { border-color: rgba(96, 112, 160, 0.4); color: var(--severity-low); background: rgba(96, 112, 160, 0.08); }
.chip-code { font-family: 'JetBrains Mono', monospace; font-size: 10px; }
/* Sygnały row chips on prospect list — FlowDesk on dark with gradient text,
ancient on neutral grey. Inner .chip-label gets the gradient because
`background-clip: text` clips both color+image, so we can't put grey bg
and gradient text on the same element. */
.chip-flowdesk { background: #0a0a14; border-color: #0a0a14; color: #ffffff; }
.chip-flowdesk .chip-label { color: #ffffff; font-weight: 700; }
.chip-ancient { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); }
.chip-go { background: #ffffff; border-color: var(--text-primary); color: var(--text-primary); }
/* ----- Issue groups (prospect detail) ----- */
.issue-group { margin-bottom: 24px; }
.issue-group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.issue-group-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.issue-group-count { color: var(--text-muted); font-size: 12px; }
.issue-list { list-style: none; }
.issue-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.issue-item:last-child { border-bottom: 0; }
/* ----- Login ----- */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; padding: 36px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.login-logo { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 28px; font-weight: 700; font-size: 22px; }
.login-logo img { width: 40px; height: 40px; border-radius: 8px; display: block; }
.login-logo .ni-mark { width: 40px; height: 40px; border: 1.5px solid var(--text-primary); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.login-error { background: rgba(255, 80, 112, 0.08); border: 1px solid rgba(255, 80, 112, 0.3); color: var(--severity-high); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; }
/* ----- Flash / empty states ----- */
.empty-state { padding: 64px 24px; text-align: center; color: var(--text-muted); }
.empty-state-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
.empty-state-text { font-size: 14px; }
/* ----- Filter bar ----- */
.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar .form-input, .filter-bar .form-select { width: auto; padding: 8px 12px; font-size: 13px; }
/* ----- Score color (used inline) ----- */
.score-high { color: var(--severity-high); font-weight: 700; }
.score-mid { color: var(--severity-medium); font-weight: 600; }
.score-low { color: var(--text-secondary); }
/* ----- Inline action group (e.g. Send/Skip/Later buttons) ----- */
.action-group { display: inline-flex; gap: 4px; }
/* ----- HTMX-loaded swap target ----- */
.htmx-swapping { opacity: 0.5; transition: opacity 0.15s; }
.htmx-settling { opacity: 1; }
/* ===== PageSpeed Insights card ===== */
.psi-card { padding: 20px; }
.psi-card-header {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 16px; padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.psi-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 6px;
background: var(--accent-gradient); color: white; font-size: 14px;
}
.psi-strategies {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 900px) { .psi-strategies { grid-template-columns: 1fr; } }
.psi-strategy {
border: 1px solid var(--border); border-radius: 8px; padding: 14px;
background: var(--bg-card-deep, #fafafd);
}
.psi-strategy-label {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
color: var(--text-muted); margin-bottom: 12px;
}
/* 4 score gauges */
.psi-scores {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px;
}
.psi-gauge {
text-align: center; padding: 12px 4px; border-radius: 6px;
border: 1px solid var(--border);
}
.psi-gauge-value { font-size: 22px; font-weight: 800; line-height: 1; }
.psi-gauge-label {
font-size: 10px; color: var(--text-muted); margin-top: 6px;
text-transform: uppercase; letter-spacing: 0.4px;
}
.psi-gauge-good { border-color: rgba(80, 200, 120, 0.5); background: rgba(80, 200, 120, 0.07); }
.psi-gauge-good .psi-gauge-value { color: #50c878; }
.psi-gauge-mid { border-color: rgba(255, 160, 80, 0.5); background: rgba(255, 160, 80, 0.07); }
.psi-gauge-mid .psi-gauge-value { color: var(--severity-medium); }
.psi-gauge-poor { border-color: rgba(255, 80, 112, 0.5); background: rgba(255, 80, 112, 0.07); }
.psi-gauge-poor .psi-gauge-value { color: var(--severity-high); }
.psi-gauge-na { opacity: 0.4; }
.psi-gauge-na .psi-gauge-value { color: var(--text-muted); }
/* CWV row */
.psi-cwv {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
margin-bottom: 14px;
}
.psi-cwv-cell {
text-align: center; padding: 8px 4px; border-radius: 5px;
border: 1px solid var(--border);
}
.psi-cwv-label {
font-size: 9px; color: var(--text-muted); text-transform: uppercase;
letter-spacing: 0.5px; margin-bottom: 4px;
}
.psi-cwv-value { font-size: 13px; font-weight: 600; }
.psi-bucket-good { border-color: rgba(80, 200, 120, 0.4); }
.psi-bucket-good .psi-cwv-value { color: #50c878; }
.psi-bucket-needs-improvement { border-color: rgba(255, 160, 80, 0.4); }
.psi-bucket-needs-improvement .psi-cwv-value { color: var(--severity-medium); }
.psi-bucket-poor { border-color: rgba(255, 80, 112, 0.4); }
.psi-bucket-poor .psi-cwv-value { color: var(--severity-high); }
.psi-bucket-na { opacity: 0.4; }
.psi-bucket-na .psi-cwv-value { color: var(--text-muted); }
/* Opportunities */
.psi-opps-title {
font-size: 11px; color: var(--text-muted); text-transform: uppercase;
letter-spacing: 0.5px; margin-bottom: 6px;
}
.psi-opps-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 4px;
}
.psi-opps-list li {
display: flex; gap: 10px; font-size: 12px; color: var(--text-secondary);
align-items: baseline;
}
.psi-opp-savings {
flex-shrink: 0; min-width: 50px;
font-family: 'JetBrains Mono', monospace; font-weight: 600;
color: var(--accent-pink); font-size: 11px;
}
.psi-opp-title { line-height: 1.3; }
.psi-empty { color: var(--text-muted); font-size: 12px; padding: 20px 0; text-align: center; }
/* ===== Responsive breakpoints ============================================
Tablet (≤900px): sidebar collapses to a top row of horizontal pills,
main padding shrinks, page-header stacks the action group below the title.
Phone (≤640px): everything single-column, tables scroll horizontally,
prospect detail's sidebar drops below content, PSI gauges go 2×2 grid.
The viewport is already set in base.html / login.html.
======================================================================== */
/* ==== Tablet / landscape phone (≤900px) ==================================
Sidebar collapses to a horizontal scrollable nav row above main content.
Padding shrinks, page header stacks. Tables already become scroll
containers because the data tables are 6-8 columns wide and crushing
them down doesn't help — let the user pan instead. */
@media (max-width: 900px) {
.app-shell {
grid-template-rows: var(--topbar-height) auto 1fr;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"topbar"
"sidebar"
"main";
}
.sidebar {
border-right: none;
border-bottom: 1px solid var(--border);
padding: 8px 12px;
overflow-x: auto;
}
.sidebar-nav {
flex-direction: row;
gap: 4px;
flex-wrap: nowrap;
overflow-x: auto;
}
.sidebar-nav a {
padding: 8px 12px;
font-size: 13px;
white-space: nowrap;
border-radius: var(--radius-sm);
}
.sidebar-nav a.active::before { display: none; }
.sidebar-nav a.active { background: var(--accent-gradient); color: white; }
.topbar { padding: 0 14px; }
.topbar-actions { flex-wrap: wrap; }
.main { padding: 20px 16px; }
.page-header { flex-direction: column; align-items: stretch; gap: 16px; }
.page-title { font-size: 22px; }
.action-group { flex-wrap: wrap; }
/* Tables: the actual class in the templates is .table-wrap (NOT
.table-wrapper). The wrapper has overflow:hidden by default which would
cut off wide tables; we re-enable horizontal scrolling here. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 700px; }
table th, table td { white-space: nowrap; }
/* Prospect detail's 1fr/320px sidebar drops below main content. */
.main > div[style*="grid-template-columns: 1fr 320px"],
.main > div[style*="grid-template-columns:1fr 320px"] {
grid-template-columns: 1fr !important;
}
/* The 4-up / 5-up summary block on prospect detail. The detail KPI strip is
5 cells (Score, Problemy, Czas, Bezpieczeństwo, Ostatni skan) — matching
repeat(5, 1fr) literally so the inline style attribute gets overridden.
repeat(4, 1fr) kept for legacy callers. */
div[style*="grid-template-columns:repeat(4, 1fr)"],
div[style*="grid-template-columns: repeat(4, 1fr)"],
div[style*="grid-template-columns:repeat(5, 1fr)"],
div[style*="grid-template-columns: repeat(5, 1fr)"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
/* The KPI numerals are 32px in the inline style — that's fine on desktop
but crushes against the cell edge once we drop to 2 columns on a phone.
Tame them inside the prospect-detail summary specifically. */
div[style*="grid-template-columns:repeat(5, 1fr)"] > div > div[style*="font-size:32px"],
div[style*="grid-template-columns: repeat(5, 1fr)"] > div > div[style*="font-size:32px"] {
font-size: 24px !important;
}
/* The "Generator zapytań" + "Filter bar" + "Single add" forms in
queries/list.html cram 5-6 form fields onto one row. Inline styles win
over the cascade unless we use !important; matching the literal strings
used in those templates. */
.card-elevated form > div[style*="grid-template-columns:"],
.card-elevated form[style*="grid-template-columns:"] {
grid-template-columns: 1fr !important;
}
.card-elevated form > div[style*="grid-template-columns:"] > * { width: 100%; }
/* Inline header rows that put title + action group on the same line. */
.card-elevated > div[style*="justify-content:space-between"],
.card-elevated > div[style*="justify-content: space-between"] {
flex-direction: column;
align-items: stretch !important;
}
/* Inline filter bars on prospects/list (.filter-bar already wraps but
a numeric "Min. score" input has inline width:120px that fights it). */
.filter-bar input[style*="width:"] { width: 100% !important; }
/* Pagination footer keeps wrapping cleanly. */
body { -webkit-text-size-adjust: 100%; }
}
/* ==== Phone (≤640px) =====================================================
Single-column everything. Tighter padding. iOS-no-zoom on inputs (must be
≥16px to avoid Safari auto-zoom on focus). Buttons in action groups grow
to fill row width. */
@media (max-width: 640px) {
.topbar { padding: 0 12px; }
.topbar-actions { gap: 8px; font-size: 12px; }
.main { padding: 14px 10px; }
.page-title { font-size: 18px; }
.page-subtitle { font-size: 12px; }
.card, .card-elevated { padding: 14px; }
/* Tighter table cells on phone — already scrollable from the 900px rule. */
.table-wrap table { min-width: 600px; }
table th, table td { padding: 8px 10px; font-size: 12px; }
/* PSI card: single column, gauges 2×2, CWV 3-wide so cells don't crush. */
.psi-strategies { grid-template-columns: 1fr; }
.psi-scores { grid-template-columns: repeat(2, 1fr); }
.psi-cwv { grid-template-columns: repeat(3, 1fr); }
.psi-card { padding: 14px; }
/* Buttons: full-width-friendly inside action groups. */
.btn { padding: 10px 14px; font-size: 13px; }
.action-group .btn { flex: 1 1 auto; }
/* Login card: full-width with breathing room. */
.login-card { padding: 24px 20px; max-width: 100%; margin: 16px; }
/* iOS Safari auto-zooms focused inputs <16px. Bump everything to 16px. */
.form-input, .form-select, .form-textarea { font-size: 16px; }
/* Long values / code chips don't blow past viewport. */
code, .chip-code { word-break: break-all; }
/* Card layout for tables marked .table-cards-mobile (currently only the
leads list, which is 9 columns wide — horizontal scroll is genuinely
unusable on a phone). Desktop/tablet keep normal table rendering.
Each | needs a `data-label="..."` attribute; without it the row
just renders without a label column (still readable). */
.table-cards-mobile { border-radius: 0; border: none; overflow: visible; background: transparent; }
.table-cards-mobile table { display: block; min-width: 0; }
.table-cards-mobile thead { display: none; }
.table-cards-mobile tbody { display: block; }
.table-cards-mobile tr {
display: block;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 14px;
margin-bottom: 12px;
}
.table-cards-mobile tr:hover { border-color: var(--border-strong); }
.table-cards-mobile td {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
padding: 6px 0;
border: none !important;
text-align: right;
white-space: normal;
font-size: 13px;
}
.table-cards-mobile td.numeric { text-align: right; }
.table-cards-mobile td::before {
content: attr(data-label);
flex-shrink: 0;
color: var(--text-muted);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.6px;
text-align: left;
padding-top: 2px;
}
/* Cells without a data-label (rare): hide the empty pseudo-label. */
.table-cards-mobile td:not([data-label])::before { display: none; }
/* Action-group buttons span the row width. */
.table-cards-mobile td[data-label="Akcje"] { flex-direction: column; align-items: stretch; gap: 6px; }
.table-cards-mobile td[data-label="Akcje"]::before { text-align: left; padding-bottom: 4px; }
.table-cards-mobile td[data-label="Akcje"] .action-group { display: flex; gap: 6px; flex-wrap: wrap; }
.table-cards-mobile td[data-label="Akcje"] .action-group .btn { flex: 1 1 30%; }
/* "Top problemy" chips wrap nicely. */
.table-cards-mobile td[data-label="Top problemy"] {
flex-direction: column; align-items: stretch; gap: 6px;
}
.table-cards-mobile td[data-label="Top problemy"]::before { text-align: left; }
/* Domain link gets full row to breathe. */
.table-cards-mobile td.domain {
flex-direction: column; align-items: stretch; gap: 4px;
}
.table-cards-mobile td.domain::before { text-align: left; }
.table-cards-mobile td.domain a { font-size: 14px; font-weight: 600; word-break: break-all; }
/* Settings page: the "Opis / wartość" cell holds a description + a long
value (API key / proxy list / etc). Both want full row width. */
.table-cards-mobile td[data-label="Opis / wartość"] {
flex-direction: column; align-items: stretch; gap: 4px;
}
.table-cards-mobile td[data-label="Opis / wartość"]::before { text-align: left; }
/* Settings page: the "Nowa wartość" cell holds a form (input + button).
Stack as full-width input above button so neither gets squeezed. */
.table-cards-mobile td[data-label="Nowa wartość"] {
flex-direction: column; align-items: stretch; gap: 6px;
}
.table-cards-mobile td[data-label="Nowa wartość"]::before { text-align: left; }
.table-cards-mobile td[data-label="Nowa wartość"] form {
flex-direction: column !important; gap: 6px !important; width: 100%;
}
.table-cards-mobile td[data-label="Nowa wartość"] .form-input { width: 100%; }
.table-cards-mobile td[data-label="Nowa wartość"] button { width: 100%; }
/* Queries page: Akcje cell has 3 separate |