/* Logic8 - Modern polish layer.
Loaded AFTER app.css. Elevates buttons, inputs, checkboxes, radios, selects,
tables, cards, pills and modals to a Linear/Stripe-quality feel WITHOUT
renaming any classes. Designed to be additive - any rule here either adds
missing styling (e.g. custom checkboxes) or refines an existing one. */
/* ==========================================================================
TOKEN REFINEMENTS - subtler shadows, tighter radii, refined motion
========================================================================== */
:root {
/* Tighter radii feel more premium than fully-rounded pills everywhere */
--r-xs: 4px;
--r-input: 8px;
--r-btn: 10px;
--r-card: 14px;
--r-modal: 16px;
/* Softer, layered shadows (less colored glow, more neutral depth) */
--shadow-soft-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
--shadow-soft-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-soft-lg: 0 16px 40px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
--shadow-soft-xl: 0 32px 64px rgba(15, 23, 42, 0.18), 0 8px 16px rgba(15, 23, 42, 0.08);
/* Focus ring - 3-layer for accessible high-contrast focus state */
--focus-ring: 0 0 0 1px var(--bg-elevated), 0 0 0 3px var(--accent);
/* Refined easing curves */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
[data-theme='dark'] {
--shadow-soft-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
--shadow-soft-md: 0 6px 18px rgba(0, 0, 0, 0.34), 0 1px 3px rgba(0, 0, 0, 0.20);
--shadow-soft-lg: 0 22px 48px rgba(0, 0, 0, 0.50), 0 6px 14px rgba(0, 0, 0, 0.26);
--shadow-soft-xl: 0 36px 64px rgba(0, 0, 0, 0.60), 0 10px 20px rgba(0, 0, 0, 0.30);
--focus-ring: 0 0 0 1px var(--bg-base), 0 0 0 3px var(--accent);
}
/* ==========================================================================
BASE TYPE TIGHTENING
========================================================================== */
body {
/* Variable-font features for a modern feel: cv11 (alternate digits), ss01
(alternate punctuation), tnum (tabular numbers in tables/totals) */
font-feature-settings: 'cv11', 'ss01', 'cv02', 'cv05';
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
h1 { letter-spacing: -0.025em; line-height: 1.15; }
h2 { letter-spacing: -0.018em; line-height: 1.2; }
h3 { letter-spacing: -0.012em; line-height: 1.3; }
.label { letter-spacing: 0.06em; font-size: 11px; }
/* ==========================================================================
BUTTONS - rounded rects, sharper hover, no more full pills
========================================================================== */
.btn {
border-radius: var(--r-btn);
padding: 9px 16px;
font-size: 13.5px;
letter-spacing: -0.005em;
box-shadow: var(--shadow-soft-sm);
transition:
background var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out);
}
.btn:hover { box-shadow: var(--shadow-soft-md); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-soft-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-soft-md); }
.btn-primary {
background: var(--brand-accent-gradient);
box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 14px rgba(0,192,165,0.25);
}
.btn-primary:hover {
background: linear-gradient(135deg, #00D5B6 0%, #02A2EE 100%);
box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px rgba(0,192,165,0.35);
}
.btn-success { background: var(--green); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 14px rgba(16,185,129,0.25); }
.btn-success:hover { background: #0EA372; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px rgba(16,185,129,0.35); }
.btn-danger { background: var(--red); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 14px rgba(239,68,68,0.25); }
.btn-danger:hover { background: #DC2626; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px rgba(239,68,68,0.35); }
.btn-warn { background: var(--gold-gradient); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 14px rgba(245,176,65,0.25); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--bg-card); border-color: var(--border); box-shadow: none; transform: none; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.btn-icon, .btn.btn-icon { padding: 0; width: 36px; height: 36px; border-radius: 10px; }
/* ==========================================================================
INPUTS / SELECTS / TEXTAREAS - tighter, sharper focus
========================================================================== */
.input, .select, .textarea {
border-radius: var(--r-input);
padding: 10px 13px;
font-size: 14px;
line-height: 1.4;
transition:
border-color var(--t-fast) var(--ease-out),
background var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out);
box-shadow: var(--shadow-soft-sm);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
.input:hover:not(:focus):not(:disabled),
.select:hover:not(:focus):not(:disabled),
.textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.input:disabled, .select:disabled, .textarea:disabled {
opacity: 0.55; cursor: not-allowed;
background: var(--bg-card-hover);
}
/* Custom select chevron - replaces the browser default */
.select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 13px center;
background-size: 12px 12px;
padding-right: 36px;
cursor: pointer;
}
.select::-ms-expand { display: none; }
[data-theme='dark'] .select {
background-image: url("data:image/svg+xml;utf8,");
}
/* Date / time inputs - tame the browser controls */
input[type="date"], input[type="time"], input[type="datetime-local"] {
font-family: inherit;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.6;
transition: opacity var(--t-fast);
filter: invert(0);
}
[data-theme='dark'] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme='dark'] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme='dark'] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); }
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
/* Number input - hide spinner unless hovered (cleaner default) */
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* --- Consistent control height (site-wide row alignment fix) ----------------
Text inputs, selects and native date/time pickers are all sized by padding,
but WebKit gives date/time inputs their own intrinsic height and does NOT
vertically centre the editable text. The result: a date field sits a touch
taller and off-baseline next to a text input or select in the same row.
Pin every control to one height and centre the native date/time text so any
row of mixed fields lines up — everywhere on the site, not page by page. */
.input, .select,
input[type="date"], input[type="time"], input[type="datetime-local"] {
min-height: 42px;
}
input[type="date"], input[type="time"], input[type="datetime-local"] {
display: inline-flex;
align-items: center;
}
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
padding: 0;
}
/* Input groups - currency + quantity affordances */
.input-group {
position: relative;
display: flex;
align-items: stretch;
}
.input-group .input-prefix,
.input-group .input-suffix {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 13px;
font-weight: 600;
pointer-events: none;
user-select: none;
}
.input-group .input-prefix { left: 12px; }
.input-group .input-suffix { right: 13px; }
.input-group .input.has-prefix { padding-left: 28px; }
.input-group .input.has-suffix { padding-right: 36px; }
/* ==========================================================================
CUSTOM CHECKBOXES + RADIOS - the missing piece in the original system
========================================================================== */
input[type="checkbox"]:not([data-no-style]),
input[type="radio"]:not([data-no-style]) {
appearance: none;
-webkit-appearance: none;
display: inline-grid;
place-content: center;
width: 18px;
height: 18px;
margin: 0;
background: var(--bg-input);
border: 1.5px solid var(--border-strong);
cursor: pointer;
transition:
background var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out);
flex-shrink: 0;
vertical-align: middle;
position: relative;
}
input[type="checkbox"]:not([data-no-style]) { border-radius: 5px; }
input[type="radio"]:not([data-no-style]) { border-radius: 50%; }
input[type="checkbox"]:not([data-no-style]):hover,
input[type="radio"]:not([data-no-style]):hover {
border-color: var(--accent);
}
input[type="checkbox"]:not([data-no-style]):focus-visible,
input[type="radio"]:not([data-no-style]):focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
input[type="checkbox"]:not([data-no-style]):checked,
input[type="radio"]:not([data-no-style]):checked {
background: var(--brand-accent-gradient);
border-color: transparent;
box-shadow: 0 2px 6px rgba(0,192,165,0.25);
}
/* CSS-drawn check - rotated 45deg L-shape */
input[type="checkbox"]:not([data-no-style]):checked::after {
content: '';
width: 5px;
height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg) translate(-1px, -1px);
}
/* Radio inner dot */
input[type="radio"]:not([data-no-style]):checked::after {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: white;
}
input[type="checkbox"]:not([data-no-style]):disabled,
input[type="radio"]:not([data-no-style]):disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Indeterminate state for "select all" boxes */
input[type="checkbox"]:not([data-no-style]):indeterminate {
background: var(--brand-accent-gradient);
border-color: transparent;
}
input[type="checkbox"]:not([data-no-style]):indeterminate::after {
content: '';
width: 8px;
height: 2px;
background: white;
border-radius: 1px;
transform: none;
border: 0;
}
/* Checkbox/radio label - aligns the control with a label nicely */
.checkbox-label, .radio-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
cursor: pointer;
color: var(--text-body);
user-select: none;
line-height: 1.4;
}
.checkbox-label:hover, .radio-label:hover { color: var(--text-primary); }
.checkbox-label input, .radio-label input { cursor: pointer; }
/* ==========================================================================
TOGGLE SWITCH - new component, opt-in via .switch class
Use:
========================================================================== */
.switch {
position: relative;
display: inline-block;
width: 38px;
height: 22px;
flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
position: absolute;
inset: 0;
background: var(--border-strong);
border-radius: 999px;
cursor: pointer;
transition: background var(--t-base) var(--ease-out);
}
.switch span::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
background: white;
border-radius: 50%;
transition: transform var(--t-base) var(--ease-out);
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.switch input:checked + span { background: var(--brand-accent-gradient); }
.switch input:checked + span::before { transform: translateX(16px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.switch input:disabled + span { opacity: 0.5; cursor: not-allowed; }
/* ==========================================================================
PILLS / STATUS - tighter, lowercase, more refined
========================================================================== */
.pill {
text-transform: none;
letter-spacing: 0;
font-weight: 600;
font-size: 11.5px;
padding: 3px 9px;
line-height: 1.5;
border-radius: 6px;
}
.pill-brand { box-shadow: 0 2px 8px rgba(0,192,165,0.20); }
/* Capitalize first letter of any pill content for sentence case */
.pill::first-letter { text-transform: uppercase; }
/* Status pills - subtle dot prefix for at-a-glance state */
.status-Done::before, .status-Achieved::before, .status-Approved::before, .status-Implemented::before,
.status-active::before, .status-paid::before, .status-accepted::before, .status-won::before,
.status-OnTrack::before, .status-ToDo::before, .status-qualified::before,
.status-AtRisk::before, .status-Blocked::before, .status-Snoozed::before, .status-overdue::before, .status-on_hold::before,
.status-OffTrack::before, .status-Declined::before, .status-declined::before, .status-lost::before, .status-churned::before, .status-void::before,
.status-InProgress::before, .status-in_progress::before, .status-viewed::before,
.status-NotStarted::before, .status-Backlog::before, .status-draft::before, .status-new::before, .status-lead::before, .status-planning::before, .status-queued::before, .status-sent::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 6px;
background: currentColor;
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);
}
/* New status mappings for invoice/proposal/client/deal/project flows */
.status-active, .status-paid, .status-accepted, .status-won { background: var(--green-soft); color: var(--green); }
.status-overdue, .status-declined, .status-lost, .status-churned { background: var(--red-soft); color: var(--red); }
.status-draft, .status-new, .status-lead, .status-planning, .status-queued { background: var(--bg-card-hover); color: var(--text-secondary); }
.status-sent, .status-qualified, .status-viewed, .status-in_progress { background: var(--accent-soft); color: var(--accent); }
.status-on_hold { background: var(--orange-soft); color: var(--orange); }
.status-void, .status-cancelled, .status-expired { background: var(--bg-card-hover); color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.status-completed { background: var(--purple-soft); color: var(--purple); }
/* ==========================================================================
CARDS - subtler depth + smoother hover
========================================================================== */
.card {
border-radius: var(--r-card);
box-shadow: var(--shadow-soft-sm);
transition:
border-color var(--t-fast) var(--ease-out),
transform var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
.card.hoverable:hover {
border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
transform: translateY(-2px);
box-shadow: var(--shadow-soft-lg);
}
/* Stat tile - cleaner, no more left stripe (it competed with card border) */
.stat-tile {
border-radius: var(--r-card);
box-shadow: var(--shadow-soft-sm);
padding: 18px 20px;
}
.stat-tile::before { display: none; }
.stat-tile::after { display: none; }
.stat-tile:hover { box-shadow: var(--shadow-soft-md); }
.stat-tile .stat-value { font-size: 26px; letter-spacing: -0.025em; font-feature-settings: 'tnum'; }
.stat-tile .stat-label { font-size: 10.5px; letter-spacing: 0.10em; }
/* ==========================================================================
TABLES - tighter rows, cleaner headers, hover rows
========================================================================== */
.table-wrap {
border-radius: var(--r-card);
box-shadow: var(--shadow-soft-sm);
/* Scroll horizontally when the table is wider than the viewport so the last
column is never truncated. Vertical stays clipped as before. */
overflow-x: auto;
overflow-y: hidden;
/* Thin scrollbar, hidden until the user hovers the table. */
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.table-wrap:hover,
.table-wrap:focus-within {
scrollbar-color: var(--border-strong) transparent;
}
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
transition: background var(--t-fast);
}
.table-wrap:hover::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--text-muted) 55%, transparent);
background-clip: padding-box;
}
/* Top scrollbar proxy: a thin strip inserted above the table by table-scroll.js.
It mirrors the table's horizontal scroll so you can scroll wide tables from
the top without scrolling to the bottom first. Same hover-reveal behaviour. */
.table-scroll-top {
overflow-x: auto;
overflow-y: hidden;
height: 10px;
margin-top: 22px;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.table-scroll-top:hover,
.table-scroll-top:focus-within {
scrollbar-color: var(--border-strong) transparent;
}
.table-scroll-top::-webkit-scrollbar { height: 10px; }
.table-scroll-top::-webkit-scrollbar-track { background: transparent; }
.table-scroll-top::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
.table-scroll-top:hover::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--text-muted) 55%, transparent);
background-clip: padding-box;
}
.table-scroll-top-inner { height: 1px; }
/* When a top proxy precedes the table, sit them flush (the proxy takes the gap). */
.table-scroll-top + .table-wrap { margin-top: 0; }
table.data {
font-size: 13.5px;
}
table.data th, table.data td {
padding: 11px 16px;
border-bottom: 1px solid var(--border);
}
table.data thead th {
font-size: 10.5px;
letter-spacing: 0.10em;
font-weight: 700;
padding: 10px 16px;
border-bottom: 1px solid var(--border-strong);
background: var(--bg-elevated);
}
table.data tbody tr {
transition: background var(--t-fast) var(--ease-out);
}
table.data tbody tr:hover { background: var(--bg-card-hover); }
table.data tbody td { font-feature-settings: 'tnum'; vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
/* Number / currency cells right-align with tabular numbers */
table.data td.num, table.data th.num { text-align: right; }
/* ==========================================================================
SALES DASHBOARD (/sales) — zone labels, KPI row, mini bar charts
========================================================================== */
/* Zone divider label: NOW / FLOW / WORK */
.dash-zone-label {
margin: 26px 0 14px;
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
}
.dash-zone-label:first-child { margin-top: 4px; }
.dash-zone-note {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--text-muted);
font-size: 12px;
}
/* NOW: four KPI tiles forced onto one row, 2x2 when narrow */
.kpi-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 880px) {
.kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* FLOW / WORK: responsive two-up card grid */
.dash-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: start;
}
@media (max-width: 760px) {
.dash-grid { grid-template-columns: 1fr; }
}
/* Shared row rhythm so Pipeline funnel and Conversion line up 1:1 */
.dash-kv,
.dash-bar-row {
min-height: 30px;
padding: 4px 0;
}
/* Key/value row used in Conversion + Revenue cliff */
.dash-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Unified label + value typography across both FLOW cards */
.dash-bar-label,
.dash-kv > span:first-child {
font-size: 13.5px;
font-weight: 500;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-bar-value,
.dash-kv > strong {
font-size: 13.5px;
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
font-feature-settings: 'tnum';
}
.dash-bar-value { text-align: right; }
.dash-bar-value .muted { font-weight: 500; }
/* Mini horizontal bar: label · track · trailing value */
.dash-bar-row {
display: grid;
grid-template-columns: 92px 1fr auto;
align-items: center;
gap: 10px;
}
.dash-bar-track {
height: 8px;
background: var(--bg-card-hover);
border-radius: 999px;
overflow: hidden;
}
.dash-bar-fill {
display: block;
height: 100%;
border-radius: 999px;
min-width: 2px;
transition: width var(--t-slow) var(--ease-out);
}
/* This week's priority list rows */
.dash-priority {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--border);
}
.dash-priority:last-child { border-bottom: 0; }
/* ==========================================================================
MODALS - more refined entrance + crisper edges
========================================================================== */
.modal-backdrop {
background: color-mix(in srgb, var(--bg-base) 78%, transparent);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
}
.modal {
border-radius: var(--r-modal);
box-shadow: var(--shadow-soft-xl);
border-color: var(--border-strong);
animation: modal-pop 280ms var(--ease-out);
}
@keyframes modal-pop {
from { opacity: 0; transform: scale(0.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header h2 { font-size: 16.5px; letter-spacing: -0.012em; }
.modal-footer { background: var(--bg-elevated); border-top-color: var(--border); }
/* ==========================================================================
TOAST - slide from bottom-right with subtle scale
========================================================================== */
.toast {
border-radius: var(--r-card);
box-shadow: var(--shadow-soft-lg);
border-color: var(--border-strong);
font-weight: 500;
animation: toast-pop 280ms var(--ease-out);
}
@keyframes toast-pop {
from { opacity: 0; transform: translateY(12px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ==========================================================================
KANBAN CARDS - tighten + match the new card radius
========================================================================== */
.kanban-card {
border-radius: 10px;
box-shadow: var(--shadow-soft-sm);
transition:
border-color var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out);
}
.kanban-card:hover { box-shadow: var(--shadow-soft-md); }
.kanban-col { border-radius: 12px; }
/* ==========================================================================
TOPBAR - frosted-glass, more refined search
========================================================================== */
.topbar {
padding: 13px 28px;
background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
}
.topbar .search input {
border-radius: var(--r-input);
font-size: 13.5px;
padding: 9px 14px 9px 38px;
box-shadow: var(--shadow-soft-sm);
}
/* Refined focus for topbar search */
.topbar .search input:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.icon-btn {
width: 36px;
height: 36px;
border-radius: 10px;
box-shadow: var(--shadow-soft-sm);
transition:
background var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out);
}
.icon-btn:hover { transform: translateY(-1px); }
.user-chip {
border-radius: 999px;
padding: 4px 14px 4px 4px;
box-shadow: var(--shadow-soft-sm);
}
/* ==========================================================================
SIDEBAR NAV - sharper active state, tighter spacing
========================================================================== */
.nav-item {
border-radius: 8px;
padding: 9px 12px;
font-size: 13.5px;
transition:
background var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out);
}
/* Active sub-item is now the milder soft-teal treatment - see
.nav-item.active in app.css. We deliberately leave the box-shadow to
the app.css rule so the left-stripe accent isn't overridden. */
.nav-label { font-size: 10px; letter-spacing: 0.12em; padding: 14px 12px 4px; }
/* ==========================================================================
FORMS - tighter row + label spacing
========================================================================== */
.field { gap: 0; }
.field .label { margin-bottom: 6px; }
.field-row { gap: 14px; }
.field + .field { margin-top: 16px; }
/* The rule above is for vertically stacked fields. Inside a horizontal .row
(two-column form layouts) the second field is also an adjacent sibling, so it
would inherit that top margin and sit lower than the first column. Reset it. */
.row > .field + .field { margin-top: 0; }
/* Field with help text below */
.field-help {
font-size: 12px;
color: var(--text-muted);
margin-top: 6px;
line-height: 1.45;
}
/* Inline error state */
.input.is-error, .select.is-error, .textarea.is-error {
border-color: var(--red);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.field-error {
font-size: 12px;
color: var(--red);
margin-top: 6px;
display: flex;
align-items: center;
gap: 4px;
}
/* ==========================================================================
PROGRESS BARS - smoother shimmer
========================================================================== */
.progress {
height: 6px;
border-radius: 999px;
background: var(--bg-card-hover);
border: none;
overflow: hidden;
position: relative;
}
.progress > div {
border-radius: 999px;
position: relative;
overflow: hidden;
}
.progress > div::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
animation: progress-shimmer 2.4s linear infinite;
}
@keyframes progress-shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
/* ==========================================================================
PAGE HEADER - tighter, more confident type
========================================================================== */
.page-header { margin-bottom: 22px; align-items: flex-start; }
.page-header .lede h1 { font-size: 24px; letter-spacing: -0.02em; }
.page-header .lede p { font-size: 13.5px; color: var(--text-muted); }
/* ==========================================================================
EMPTY STATES - more polished
========================================================================== */
.empty {
padding: 56px 28px;
background: linear-gradient(180deg, transparent, var(--bg-card-hover) 200%);
border-radius: var(--r-card);
border: 1px dashed var(--border-strong);
}
.empty svg {
width: 36px; height: 36px;
padding: 8px;
background: var(--accent-soft);
border-radius: 12px;
color: var(--accent);
opacity: 1;
}
/* ==========================================================================
CHIPS / TAGS - more subtle, monospace numbers
========================================================================== */
.tag {
font-feature-settings: 'tnum';
font-size: 11px;
padding: 2px 7px;
border-radius: var(--r-xs);
border: 1px solid var(--border);
background: var(--bg-input);
color: var(--text-secondary);
}
/* ==========================================================================
GRIDS - slightly tighter gaps, modern responsive
========================================================================== */
.grid-cards { gap: 14px; }
.grid-2 { gap: 16px; }
.grid-3 { gap: 16px; }
/* Force-5-across variant (e.g. the Expenses summary tiles). Falls back to the
normal auto-fill wrap on narrower viewports so tiles never get crushed. */
.grid-cards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1024px) {
.grid-cards-5 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
/* ==========================================================================
SUGGESTION CARDS - more refined left accent
========================================================================== */
.sugg-card { border-radius: var(--r-card); box-shadow: var(--shadow-soft-sm); }
.sugg-card::before { width: 3px; opacity: 0.85; }
/* ==========================================================================
HIGH-NUMBER DISPLAY - large currency / KPI value styling
========================================================================== */
.kpi-value {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--text-primary);
font-feature-settings: 'tnum';
line-height: 1.1;
}
/* ==========================================================================
SCROLLBAR - thinner, theme-aware
========================================================================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--text-muted) 50%, transparent);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* ==========================================================================
SELECTION
========================================================================== */
::selection {
background: color-mix(in srgb, var(--accent) 35%, transparent);
color: var(--text-primary);
}
/* ==========================================================================
FOCUS-VISIBLE EVERYWHERE - accessibility-first
========================================================================== */
*:focus { outline: none; }
*:focus-visible:not(.input):not(.select):not(.textarea):not(.btn):not(input):not(button):not([role='button']) {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* ==========================================================================
LINE-ITEM CARDS (proposals/invoices)
The line-item editor renders a small "card" per line. Make it feel polished.
========================================================================== */
[data-item-row] {
border-radius: 10px !important;
background: var(--bg-card-hover) !important;
border: 1px solid var(--border) !important;
transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
[data-item-row]:hover {
border-color: var(--border-strong) !important;
box-shadow: var(--shadow-soft-sm);
}
[data-item-row] .input { background: var(--bg-input); }
/* ==========================================================================
CARDS USED AS PANELS INSIDE THE EDITOR (settings sidebar etc)
========================================================================== */
.bp-editor {
border-radius: var(--r-input) !important;
box-shadow: var(--shadow-soft-sm);
/* Theme the editor surface natively (was a hard-coded white fallback that
rendered as a glaring white box in dark mode). */
background: var(--bg-input);
color: var(--text-primary);
transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.bp-editor:focus-within {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.bp-editor a { color: var(--accent); }
.bp-editor blockquote {
border-left: 3px solid var(--border-strong);
margin: 8px 0; padding: 4px 0 4px 14px; color: var(--text-secondary);
}
/* Quill rich-text editor (quill.snow.css ships a light theme) — re-skin so it
matches the dark UI wherever it's used. */
[data-theme='dark'] .ql-toolbar.ql-snow,
[data-theme='dark'] .ql-container.ql-snow {
border-color: var(--border) !important;
}
[data-theme='dark'] .ql-toolbar.ql-snow { background: var(--bg-card); }
[data-theme='dark'] .ql-container.ql-snow { background: var(--bg-input); }
[data-theme='dark'] .ql-editor { color: var(--text-primary); }
[data-theme='dark'] .ql-editor.ql-blank::before { color: var(--text-muted); }
[data-theme='dark'] .ql-snow .ql-stroke { stroke: var(--text-secondary); }
[data-theme='dark'] .ql-snow .ql-fill { fill: var(--text-secondary); }
[data-theme='dark'] .ql-snow .ql-picker { color: var(--text-secondary); }
[data-theme='dark'] .ql-snow .ql-picker-options {
background: var(--bg-card); border-color: var(--border) !important;
}
[data-theme='dark'] .ql-snow.ql-toolbar button:hover .ql-stroke,
[data-theme='dark'] .ql-snow .ql-toolbar button:hover .ql-stroke,
[data-theme='dark'] .ql-snow.ql-toolbar button.ql-active .ql-stroke {
stroke: var(--accent);
}
[data-theme='dark'] .ql-snow.ql-toolbar button:hover .ql-fill,
[data-theme='dark'] .ql-snow.ql-toolbar button.ql-active .ql-fill {
fill: var(--accent);
}
/* ==========================================================================
PILL + STATUS COLOUR REFRESH (small tweaks for dense readability)
========================================================================== */
.pill { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
/* Make status pill text capitalize cleanly */
.pill.status-Done, .pill.status-Achieved,
.pill.status-Approved, .pill.status-Implemented,
.pill.status-paid, .pill.status-accepted, .pill.status-won {
/* keep green */
}
/* ==========================================================================
AUTH SCREEN POLISH
========================================================================== */
.auth-form { gap: 14px; }
.auth-form h1 { font-size: 26px; letter-spacing: -0.025em; }
.auth-side .auth-quote { font-size: 22px; line-height: 1.4; letter-spacing: -0.012em; }
/* ==========================================================================
MODAL FORM - tighter spacing inside modal forms
========================================================================== */
.modal-body .field-row + .field-row { margin-top: 14px; }
/* Shared 2-column form grid used by goal/deal modals so all fields line up. */
.goal-form-grid,
.deal-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
align-items: start;
}
.goal-form-grid .field,
.deal-form-grid .field { margin: 0; min-width: 0; }
.goal-form-grid .field .input,
.goal-form-grid .field .select,
.deal-form-grid .field .input,
.deal-form-grid .field .select { width: 100%; }
/* Sectioned card inside a modal - groups related fields with a soft header */
.goal-card-section {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--r-card);
padding: 14px 16px;
}
.goal-card-section-head {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--text-secondary);
margin-bottom: 6px;
}
.goal-card-section-head i { width: 14px; height: 14px; color: var(--accent); }
.goal-card-section .field { margin: 0; }
/* Deal modal - the colour picker swatch should not be massive */
.deal-form-grid .field input[type="color"] { height: 38px; }
/* Modal body padding feels more spacious for form-heavy modals */
.modal-body form.col.gap-lg { gap: 18px; }
.modal-body form.col.gap-lg .field-row { gap: 14px 16px; }
/* ==========================================================================
BRAND SETTINGS PANEL - tight layout + extended palette
========================================================================== */
.brand-form { gap: 22px; }
.brand-section {
border: 1px solid var(--border);
background: var(--bg-elevated);
border-radius: var(--r-card);
padding: 16px 18px;
}
.brand-section-head {
display: flex; align-items: center; gap: 8px;
margin: 0 0 14px;
flex-wrap: wrap;
}
.brand-section-head i {
width: 16px; height: 16px;
color: var(--accent);
}
.brand-section-head h3 {
margin: 0;
font-size: 14px;
font-weight: 700;
letter-spacing: -0.005em;
}
.brand-section-sub {
font-size: 12px;
color: var(--text-muted);
margin-left: 4px;
font-weight: 500;
}
.brand-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
align-items: end;
}
.brand-grid-2 .field { margin: 0; min-width: 0; }
.brand-grid-2 .field .input { width: 100%; }
/* Swatches - 5 across on wide, wraps cleanly to 2-3 across on narrow */
.brand-swatch-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px 14px;
}
@media (max-width: 1100px) { .brand-swatch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .brand-swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brand-swatch {
display: flex; flex-direction: column; gap: 6px;
min-width: 0;
}
.brand-swatch .label { margin: 0 0 2px; }
.brand-swatch-row {
display: flex; align-items: center; gap: 8px;
min-width: 0;
}
.brand-swatch-row input[type="color"] {
flex: 0 0 36px;
width: 36px; height: 36px;
padding: 2px;
border-radius: 8px;
border: 1px solid var(--border);
cursor: pointer;
background: transparent;
}
.brand-swatch-hex {
flex: 1 1 auto; min-width: 0;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace !important;
font-size: 12.5px !important;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: 8px 10px !important;
}
.brand-swatch-hint {
display: block;
font-size: 11px;
color: var(--text-muted);
}
/* Live preview block + status pills */
.brand-preview {
border-radius: var(--r-card);
padding: 22px 24px;
color: white;
border: none;
position: relative;
overflow: hidden;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
}
.brand-preview-title {
font-weight: 700;
font-size: 16px;
letter-spacing: -0.01em;
margin-bottom: 6px;
}
.brand-preview-sub {
font-size: 13px;
opacity: 0.92;
max-width: 540px;
line-height: 1.5;
}
.brand-preview-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.brand-pill {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
box-shadow: var(--shadow-soft-sm);
}
/* Logo row */
.brand-logo-row {
display: flex; align-items: center; gap: 16px;
flex-wrap: wrap;
}
.brand-logo-preview {
width: 140px; height: 64px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
}
.brand-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-logo-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.brand-logo-actions { display: flex; gap: 6px; flex-shrink: 0; }
.brand-save-row {
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid var(--border);
align-items: center;
}
/* ==========================================================================
PROPOSAL PUBLIC LINK + PREVIEW BUTTON - polished badge instead of bare
========================================================================== */
.proposal-public-link {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px 5px 12px;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-2, var(--accent)) 8%, transparent));
color: var(--accent);
font-size: 12.5px; font-weight: 600;
border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
border-radius: 999px;
text-decoration: none;
transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
box-shadow: var(--shadow-soft-sm);
}
.proposal-public-link:hover {
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2, var(--accent)) 14%, transparent));
transform: translateY(-1px);
box-shadow: var(--shadow-soft-md);
}
.proposal-public-link-copy {
display: inline-flex; align-items: center; justify-content: center;
margin-left: 4px;
width: 22px; height: 22px;
border: none; background: transparent;
color: inherit;
border-radius: 6px;
cursor: pointer;
opacity: 0.78;
transition: background var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.proposal-public-link-copy:hover {
background: color-mix(in srgb, var(--accent) 16%, transparent);
opacity: 1;
}
.proposal-preview-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px;
background: var(--bg-elevated);
color: var(--text-secondary);
font-size: 12.5px; font-weight: 600;
border: 1px solid var(--border);
border-radius: 999px;
cursor: pointer;
transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.proposal-preview-btn:hover {
background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
color: var(--accent);
transform: translateY(-1px);
}
/* ==========================================================================
PRINT STYLES - clean PDF/print output
========================================================================== */
@media print {
.sidebar, .topbar, .chat-fab, .chat-panel, .toast-stack, .modal-backdrop { display: none !important; }
.content { padding: 0; max-width: none; }
body { background: white; color: black; }
.card { box-shadow: none; border-color: #E2E8F0; }
}
/* ==========================================================================
2026 POLISH LAYER
Additive refinements that lift the existing design - depth, motion,
micro-interactions. Loaded after app.css; nothing here changes layout
or replaces existing components.
========================================================================== */
/* Animated aurora - the body's background mesh drifts slowly so the page
feels alive without competing with content. */
@keyframes l8-aurora-drift {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-2%, -1.5%, 0) scale(1.04); }
100% { transform: translate3d(0, 0, 0) scale(1); }
}
body::before {
animation: l8-aurora-drift 42s ease-in-out infinite;
/* NOTE: no will-change/transform promotion here — on Chrome it created a
containing block that pushed modal