/* ========================================================================== Google Reviews CRM v3 — Design System Manrope + segmented topbar nav + light/dark tokens. Load order: this file after Manrope tags in each template . ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; } a { color: var(--teal); text-decoration: none; } a:hover { color: var(--teal); opacity: 0.85; } select, textarea, input, button { font-family: 'Manrope', system-ui, -apple-system, sans-serif; } textarea::placeholder, input::placeholder { color: var(--faint); } /* ── Design tokens ──────────────────────────────────────────────────── */ :root { --bg:#f4f5f7; --surface:#ffffff; --sunken:#f6f7f8; --sunken2:#fafbfb; --pill:#f2f3f5; --text:#141719; --text2:#4a5155; --text3:#61686d; --muted:#8b9296; --faint:#98a0a5; --dash:#c6cbce; --line:#f0f1f3; --border:#e6e8ea; --shadow:0 1px 2px rgba(20,23,25,0.08); --teal:#0f7a68; --tealBg:#e6f3f0; --amber:#8a5b12; --amberBg:#faf1e2; --red:#9e352a; --redBg:#fbeeec; /* NOTE: --slate and --muted currently differ (--muted: #8b9296 vs --slate: #6b7480) - templates use --slate for the neutral status dot/tag, --muted for other UI text. Keep both, do not merge. */ --green:#14604b; --greenBg:#e9f2ee; --blue:#3d5aa8; --blueBg:#eef1fa; --indigo:#4b52a8; --slate:#6b7480; --slateBg:#eef0f1; --invBg:#141719; --invFg:#ffffff; --overlay:rgba(20,23,25,0.35); /* Radius scale — consolidated component tier */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; /* Shadow scale — soft modern elevation */ --shadow-xs: 0 1px 2px rgba(20,23,25,0.08); /* same value as --shadow */ --shadow-sm: 0 2px 6px -2px rgba(20,23,25,0.07), 0 1px 2px rgba(20,23,25,0.04); --shadow-md: 0 10px 24px -10px rgba(20,23,25,0.14), 0 2px 6px -2px rgba(20,23,25,0.06); --shadow-lg: 0 26px 60px -24px rgba(20,23,25,0.22), 0 8px 20px -10px rgba(20,23,25,0.10); /* v2-compat aliases — keep old inline styles working */ --accent: var(--teal); --accent2: var(--teal); --success: var(--green); --warning: var(--amber); --danger: var(--red); --info: var(--blue); --card: var(--surface); --card2: var(--sunken); --sidebar: var(--surface); } html[data-theme="dark"] { --bg:#0e1113; --surface:#171b1e; --sunken:#20262a; --sunken2:#14181b; --pill:#20262a; --text:#eef1f2; --text2:#b6bfc4; --text3:#9aa4aa; --muted:#7d878d; --faint:#6b757b; --dash:#495157; --line:#232a2e; --border:#2b3338; --shadow:0 1px 2px rgba(0,0,0,0.45); --teal:#4ecfb3; --tealBg:#14302b; --amber:#e6b463; --amberBg:#2c2416; --red:#ef8f80; --redBg:#2d1a17; /* NOTE: --slate and --muted currently differ (--muted: #7d878d vs --slate: #8b959f) - templates use --slate for the neutral status dot/tag, --muted for other UI text. Keep both, do not merge. */ --green:#5fd3ab; --greenBg:#16302a; --blue:#9db4f0; --blueBg:#1a2237; --indigo:#a3a8f0; --slate:#8b959f; --slateBg:#252b2f; --invBg:#eef1f2; --invFg:#141719; --overlay:rgba(0,0,0,0.6); --shadow-xs: 0 1px 2px rgba(0,0,0,0.45); /* same value as --shadow */ --shadow-sm: 0 2px 6px -2px rgba(0,0,0,0.35); --shadow-md: 0 10px 24px -10px rgba(0,0,0,0.50); --shadow-lg: 0 26px 60px -24px rgba(0,0,0,0.55); } /* ── App shell / layout ─────────────────────────────────────────────── */ .app-shell { min-height: 100vh; background: var(--bg); color: var(--text); display: flex; flex-direction: column; } .page { padding: 20px 26px 30px; display: flex; flex-direction: column; gap: 28px; } /* ── Topbar / segmented nav pill ────────────────────────────────────── */ .topbar { flex: none; min-height: 64px; display: flex; align-items: center; gap: 20px; padding: 8px 20px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; } .topbar-brand { display: flex; align-items: center; gap: 10px; flex: none; } .topbar-brand-mark { width: 26px; height: 30px; flex: none; object-fit: contain; display: block; } .topbar-brand-name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; } .topbar-nav { display: flex; align-items: center; gap: 5px; background: var(--pill); border-radius: var(--radius-md); padding: 4px; flex: none; } .topbar-nav-item { font-size: 14px; font-weight: 700; border-radius: var(--radius-sm); padding: 7px 14px; display: flex; align-items: center; gap: 7px; cursor: pointer; background: transparent; color: var(--text3); box-shadow: none; white-space: nowrap; } .topbar-nav-item.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .topbar-nav-badge { font-size: 11.5px; font-weight: 700; color: var(--amber); background: var(--amberBg); border-radius: 7px; padding: 2px 7px; } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 380px; justify-content: flex-end; } .topbar-search { display: flex; align-items: center; gap: 9px; background: var(--pill); border: none; border-radius: 11px; padding: 10px 14px; flex: 1 1 150px; min-width: 80px; max-width: 270px; overflow: hidden; color: var(--text); font-size: 13.5px; font-weight: 500; outline: none; } .topbar-search::placeholder { color: var(--faint); } .topbar-search-icon { color: var(--faint); font-size: 13px; } .theme-chip-group { display: flex; align-items: center; gap: 4px; background: var(--pill); border-radius: 11px; padding: 4px; flex: none; } .theme-chip { width: 30px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; border: none; background: transparent; color: var(--faint); } .theme-chip.active { background: var(--teal); color: var(--invFg); box-shadow: var(--shadow); } /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn { font-size: 13px; font-weight: 600; border-radius: var(--radius-sm); padding: 9px 13px; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1.3; background: var(--sunken); color: var(--text2); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--teal); color: var(--invFg); font-weight: 700; } .btn-dark { background: var(--invBg); color: var(--invFg); font-weight: 700; } .btn-danger { background: var(--redBg); color: var(--red); font-weight: 700; } .btn-teal-tint { background: var(--tealBg); color: var(--teal); font-weight: 700; } .btn-sm { padding: 7px 11px; font-size: 12.5px; border-radius: var(--radius-sm); } .btn-icon-only { padding: 9px; } /* ── Stat cards ──────────────────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .stat-grid-5 { display: grid; grid-template-columns: repeat(4, 1fr) 1.5fr; gap: 14px; } @media (max-width: 900px) { .stat-grid-5 { grid-template-columns: repeat(2, 1fr); } } .stat-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 18px; display: flex; align-items: center; gap: 14px; } .stat-card-col { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 15px 18px; display: flex; flex-direction: column; gap: 5px; } .stat-icon { width: 38px; height: 38px; flex: none; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 15px; } .stat-icon-blue { background: var(--blueBg); color: var(--blue); } .stat-icon-slate { background: var(--sunken); color: var(--text3); } .stat-icon-amber { background: var(--amberBg); color: var(--amber); } .stat-icon-green { background: var(--greenBg); color: var(--green); } .stat-icon-red { background: var(--redBg); color: var(--red); } .stat-icon-teal { background: var(--tealBg); color: var(--teal); } .stat-body { display: flex; flex-direction: column; gap: 3px; } .stat-label { font-size: 12.5px; font-weight: 600; color: var(--muted); } .stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text); } .stat-value-sm { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text); } .stat-value-teal { color: var(--teal); } .stat-value-red { color: var(--red); } .stat-value-green { color: var(--green); } .stat-value-amber { color: var(--amber); } .stat-sub { font-size: 12.5px; font-weight: 500; color: var(--text3); } .stat-distribution-bar { height: 7px; border-radius: 99px; background: var(--sunken); overflow: hidden; display: flex; } /* Clickable stat-card affordance */ .stat-card, .stat-card-col { transition: box-shadow .15s ease, transform .15s ease, background-color .15s ease; } .stat-card.clickable, .stat-card-col.clickable { cursor: pointer; } .stat-card.clickable:hover, .stat-card-col.clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); background: var(--sunken); } .stat-card.clickable:active, .stat-card-col.clickable:active { transform: translateY(0); box-shadow: var(--shadow-sm); } /* ── Cards ───────────────────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; } .card-pad { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; } .card-header { flex: none; display: flex; align-items: center; gap: 11px; padding: 16px 20px 12px; flex-wrap: wrap; } .card-title { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; } .card-title-sm { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; } .card-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .card-note { font-size: 13px; font-weight: 500; color: var(--muted); } /* Detail-page hero card */ .hero-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px 22px; display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .hero-back { font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; background: none; border: none; padding: 0; display: inline-flex; align-items: center; gap: 4px; } .hero-title { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; } .hero-sub { font-size: 13.5px; font-weight: 500; color: var(--text3); } /* Key/value info tiles (Kontaktdaten) */ .kv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 900px) { .kv-grid { grid-template-columns: 1fr 1fr; } } .kv-tile { background: var(--sunken); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; } .kv-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--muted); } .kv-value { font-size: 14.5px; font-weight: 600; color: var(--text); } /* ── Badges / tags / pills ──────────────────────────────────────────── */ .badge-count { font-size: 12.5px; font-weight: 700; border-radius: var(--radius-sm); padding: 4px 10px; } .badge-count-teal { color: var(--teal); background: var(--tealBg); } .badge-count-red { color: var(--red); background: var(--redBg); } .badge-count-amber { color: var(--amber); background: var(--amberBg); } .badge-count-muted { color: var(--text3); background: var(--pill); } .tag { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: var(--radius-sm); padding: 5px 12px; white-space: nowrap; } .tag-amber { color: var(--amber); background: var(--amberBg); } .tag-blue { color: var(--blue); background: var(--blueBg); } .tag-green { color: var(--green); background: var(--greenBg); } .tag-red { color: var(--red); background: var(--redBg); } .tag-indigo { color: var(--indigo); background: var(--blueBg); } .tag-teal { color: var(--teal); background: var(--tealBg); } .tag-muted { color: var(--text3); background: var(--pill); } .tag-slate { color: var(--slate); background: var(--slateBg); } .pill-num { display: inline-block; min-width: 26px; text-align: center; font-size: 13px; font-weight: 700; border-radius: 99px; padding: 4px 8px; } .pill-num-red { background: var(--redBg); color: var(--red); } .pill-num-muted { background: var(--pill); color: var(--muted); } .dash { color: var(--dash); } /* ── Filters ─────────────────────────────────────────────────────────── */ .filter-bar { flex: none; display: flex; align-items: center; gap: 7px; padding: 0 20px 14px; flex-wrap: wrap; } .filter-text { display: flex; align-items: center; background: var(--sunken); border: none; border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--text2); outline: none; } .filter-text::placeholder { color: var(--faint); } .select-wrap { position: relative; display: inline-block; } .select-plain { appearance: none; background: var(--sunken); border: none; color: var(--text2); font-size: 13px; font-weight: 600; padding: 9px 28px 9px 12px; border-radius: var(--radius-sm); outline: none; cursor: pointer; } .select-plain-light { background: var(--surface); } .select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 9px; color: var(--faint); pointer-events: none; } /* ── Filter flyout ───────────────────────────────────────────────────── */ .filter-flyout-wrap { position: relative; display: inline-block; } .filter-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text2); cursor: pointer; font-size: 13px; font-weight: 600; transition: background .15s ease, border-color .15s ease, color .15s ease; } .filter-trigger:hover { background: var(--sunken); } .filter-trigger.has-active { border-color: var(--teal); color: var(--teal); } .filter-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--teal); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; display: none; } .filter-badge.show { display: inline-block; } .filter-flyout { /* position:fixed (not absolute) so it escapes .card's overflow:hidden clipping — top/left are computed in JS from the trigger button's position when opened. */ position: fixed; z-index: 60; width: 520px; max-width: calc(100vw - 40px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 18px; display: none; } .filter-flyout.open { display: block; } .filter-flyout-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 12px; } .filter-flyout-field { display: flex; flex-direction: column; gap: 4px; } .filter-flyout-field label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .filter-flyout-field .select-plain, .filter-flyout-field .filter-text { width: 100%; } .filter-flyout-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; } .filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--sunken); font-size: 12px; font-weight: 600; color: var(--text2); } .filter-chip button { border: none; background: none; cursor: pointer; color: var(--text3); padding: 0; line-height: 1; font-size: 13px; } .filter-chip button:hover { color: var(--red); } @media (max-width: 900px) { .filter-flyout { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 70vh; overflow-y: auto; } } /* ── Pill-select with status dot ────────────────────────────────────── */ .st-wrap { position: relative; display: inline-block; } select.st { appearance: none; background: var(--sunken); border: none; color: var(--text); font-size: 13.5px; font-weight: 700; padding: 11px 30px 11px 26px; border-radius: 11px; outline: none; cursor: pointer; } .st-wrap .st-dot { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; pointer-events: none; } .st-wrap .st-caret { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 9px; color: var(--faint); pointer-events: none; } /* Table-cell variant: full width select, tighter padding, side inset via --st-pad */ .st-wrap-cell { position: relative; width: 100%; padding-left: var(--st-pad, 20px); padding-right: var(--st-pad, 20px); } .st-wrap-cell select.st { width: 100%; font-size: 13px; font-weight: 600; padding: 10px 28px 10px 24px; border-radius: 10px; } .st-wrap-cell .st-dot { left: calc(var(--st-pad, 20px) + 10px); } .st-wrap-cell .st-caret { right: calc(var(--st-pad, 20px) + 8px); } /* Status dot color modifiers — reuse across contact status + review status */ .dot-green { background: var(--green); } .dot-red { background: var(--red); } .dot-amber { background: var(--amber); } .dot-blue { background: var(--blue); } .dot-teal { background: var(--teal); } .dot-indigo { background: var(--indigo); } .dot-slate { background: var(--slate); } /* ── Bulk selection bar ──────────────────────────────────────────────── */ .bulk-bar { flex: none; margin: 0 20px 14px; display: flex; align-items: center; gap: 10px; background: var(--tealBg); border-radius: var(--radius-md); padding: 11px 14px; flex-wrap: wrap; } .bulk-count { font-size: 13.5px; font-weight: 700; color: var(--teal); } .bulk-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ── Checkbox pseudo-box ─────────────────────────────────────────────── */ .chk { display: inline-block; width: 16px; height: 16px; border-radius: 5px; cursor: pointer; border: 1.5px solid var(--dash); background: transparent; } .chk.checked { background: var(--teal); border-color: var(--teal); } /* ── Tables ──────────────────────────────────────────────────────────── */ .table-scroll { overflow-x: auto; overflow-y: hidden; } .table-head { display: grid; align-items: center; height: 36px; flex: none; padding: 0 20px; background: var(--sunken2); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); border-top: 1px solid var(--line); } .table-row { display: grid; align-items: center; padding: 0 20px; border-top: 1px solid var(--line); } .table-row-pad { display: grid; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); } /* Grid templates matching each table's columns */ .grid-contacts { grid-template-columns: 44px minmax(240px,1.9fr) 104px 96px 250px 116px 132px 126px 116px 44px; min-width: 1308px; } .grid-reviews { grid-template-columns: 150px 170px 130px 106px minmax(220px,1fr) 210px 110px; min-width: 1136px; } .grid-invoices { grid-template-columns: 150px minmax(200px,1fr) 128px 128px 132px 128px 250px; min-width: 1156px; } .contacts-row { height: 68px; } .invoices-row { height: 60px; } .th-right { text-align: right; } .th-center { text-align: center; } /* Two-line primary cell (name + city/meta) */ .cell-primary { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; padding-right: 20px; cursor: pointer; } .cell-primary-top { display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; } .cell-name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cell-sub { font-size: 12.5px; font-weight: 500; color: var(--muted); } .cell-value { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .cell-meta { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text3); } /* Pagination footer */ .table-footer { flex: none; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text3); flex-wrap: wrap; gap: 8px; } .pager { display: flex; gap: 7px; align-items: center; } .pager-btn { background: var(--sunken); border: none; border-radius: 9px; padding: 7px 12px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text3); } .pager-btn.active { background: var(--invBg); color: var(--invFg); } /* ── Forms (detail / settings pages) ────────────────────────────────── */ .field-row { display: flex; align-items: flex-start; gap: 14px; } .field-label { flex: 1; display: flex; flex-direction: column; gap: 2px; } .field-label-title { font-size: 13.5px; font-weight: 700; } .field-label-hint { font-size: 12.5px; font-weight: 500; color: var(--muted); } .input-plain, textarea.input-plain { background: var(--sunken); border: none; border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-weight: 600; padding: 10px 12px; outline: none; } .input-bordered { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-weight: 700; padding: 8px 10px; outline: none; } textarea.input-plain { resize: none; line-height: 1.5; } /* Rich text editor (Quill) shell */ .editor-shell { border-radius: var(--radius-md); background: var(--sunken); overflow: hidden; } .editor-toolbar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); } .editor-toolbar-btn { width: 28px; height: 26px; border-radius: 7px; color: var(--text3); display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; background: none; border: none; } .editor-toolbar-btn.active { background: var(--surface); color: var(--teal); font-weight: 800; } .editor-body, .ql-container.editor-body { background: transparent; border: none !important; color: var(--text); font-size: 14px; line-height: 1.6; } .editor-body .ql-editor { padding: 14px; min-height: 132px; } /* Theme-aware Quill instance — wrap any Quill target div in this class */ .editor-quill-wrap .ql-toolbar { background: var(--sunken); border: none; border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; } .editor-quill-wrap .ql-container { background: var(--sunken); border: none; font-size: 14px; border-radius: 0 0 12px 12px; } .editor-quill-wrap .ql-editor { color: var(--text); line-height: 1.65; min-height: 140px; } .editor-quill-wrap .ql-editor p { margin-bottom: 6px; } .editor-quill-wrap .ql-snow .ql-stroke { stroke: var(--muted); } .editor-quill-wrap .ql-snow .ql-fill { fill: var(--muted); } .editor-quill-wrap .ql-snow .ql-picker { color: var(--muted); } .editor-quill-wrap .ql-snow.ql-toolbar button:hover .ql-stroke, .editor-quill-wrap .ql-snow .ql-toolbar button:hover .ql-stroke { stroke: var(--teal); } .editor-quill-wrap .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--teal); } /* Status text panels (Systemzustände) */ .status-panel { display: flex; align-items: center; gap: 10px; border-radius: var(--radius-md); padding: 12px 14px; font-size: 13.5px; font-weight: 600; } .status-panel-teal { background: var(--tealBg); color: var(--teal); } .status-panel-green { background: var(--greenBg); color: var(--green); } .status-panel-red { background: var(--redBg); color: var(--red); } .status-panel-empty { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 20px; font-size: 13.5px; font-weight: 500; color: var(--muted); } /* ── Modal ───────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px; overflow: auto; z-index: 20; } .modal-box { width: 660px; max-width: 100%; background: var(--surface); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); } .modal-header { padding: 20px 22px; display: flex; align-items: flex-start; gap: 14px; border-bottom: 1px solid var(--line); } .modal-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; } .modal-sub { font-size: 12.5px; font-weight: 500; color: var(--muted); } .modal-close { margin-left: auto; width: 32px; height: 32px; border-radius: 10px; background: var(--sunken); color: var(--text3); display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; border: none; } .modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; } .modal-footer { padding: 16px 22px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); } .modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .modal-box-wide { width: 700px; } /* Labeled form fields inside modals (label above input) */ .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .modal-grid-2 .input-plain, .modal-grid-2 select.input-plain { width: 100%; } .form-error { font-size: 13px; font-weight: 600; color: var(--red); background: var(--redBg); border-radius: 10px; padding: 10px 12px; } /* Invoice-modal review checklist */ .inv-review-list { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; } .inv-review-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12.5px; transition: opacity 0.25s, background 0.3s; } .inv-review-row:last-child { border-bottom: none; } .inv-review-row:hover { background: var(--sunken); } .inv-review-row input[type="checkbox"] { accent-color: var(--teal); width: 16px; height: 16px; flex: none; } .inv-review-stars { font-weight: 700; color: var(--amber); flex: none; white-space: nowrap; } .inv-review-author { font-weight: 700; flex: none; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inv-review-date { color: var(--muted); flex: none; white-space: nowrap; } .inv-review-text { color: var(--text2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inv-review-empty { padding: 14px; font-size: 12.5px; color: var(--muted); text-align: center; } .inv-review-divider { padding: 6px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--sunken2); border-bottom: 1px solid var(--line); } /* ── Layout helpers ──────────────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .grid-detail-lower { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; } .stack-14 { display: flex; flex-direction: column; gap: 16px; } /* Contact detail: compact 2x2 stat grid + Interne Notizen side by side, same row */ .stat-notes-row { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 16px; align-items: stretch; } .stat-grid-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Google-Maps-artiges Sterne-Verteilungs-Balkendiagramm (Akquise-Lösch-Kalkulation) */ .rating-bars { display: flex; flex-direction: column; gap: 7px; } .rating-bar-row { display: flex; align-items: center; gap: 9px; } .rating-bar-label { width: 11px; flex: none; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--text2); } .rating-bar-track { flex: 1; height: 8px; border-radius: 99px; background: var(--sunken); overflow: hidden; } .rating-bar-fill { height: 100%; border-radius: 99px; background: var(--amber); } .rating-bar-count { width: 32px; flex: none; text-align: right; font-size: 12px; font-weight: 600; color: var(--muted); } @media (max-width: 1000px) { .grid-2, .grid-detail-lower, .stat-notes-row { grid-template-columns: 1fr; } } /* ── Akquise-Pipeline (Kanban-Board) ────────────────────────────────── */ .akquise-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: start; } .akquise-column { background: var(--sunken2); border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 140px; } .akquise-column-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 0 2px; } .akquise-card { background: var(--surface); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 6px; } .akquise-card-name { font-weight: 700; font-size: 13.5px; color: var(--text); text-decoration: none; } .akquise-card-name:hover { color: var(--teal); } .akquise-card-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .akquise-card-phone { font-size: 12px; color: var(--teal); text-decoration: none; font-weight: 600; } .akquise-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .akquise-empty { font-size: 12.5px; color: var(--muted); text-align: center; padding: 18px 8px; } @media (max-width: 1400px) { .akquise-board { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1100px) { .akquise-board { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .akquise-board { grid-template-columns: 1fr; } } /* ── Utility ─────────────────────────────────────────────────────────── */ /* !important so it reliably wins over component rules like .modal-overlay's own display:flex, regardless of source order — same convention as Bootstrap's .d-none / Tailwind's .hidden. */ .hidden { display: none !important; }