/* ============================================================================ * CS COMMAND-CENTER — SPACIOUS SHELL (redesign-0718-101 · 2026-07-19 s1) * * Token-driven, swappable shell for the /cs backend. Ports the approved * mockup-dashboard.html (260px sidebar · big stat cards · Untitled-UI table). * * SAFETY / NON-BREAKAGE CONTRACT * - Everything here is namespaced (--csx-* tokens, .csx-* / .cs-sidebar classes). * It never redefines a GLOBAL token (--bg/--ink/--line/…) so unconverted * views keep rendering exactly as before. * - Loads AFTER main.css, so its scoped overrides win on ties. * - Two themes via data-theme on : LIGHT (ground #f6f6f4) + DARK * (ground #030303, cream ink). A future palette editor overrides ONE block. * - Unconverted /cs views still emit `.cs-main` (dark-only). While one is on * screen we PIN the shell tokens to dark (body:has(.cs-main)) so the sidebar * stays coherent with that view. The converted dashboard has NO `.cs-main`, * so it follows the light/dark toggle. * ==========================================================================*/ /* ───────────────────────── TOKENS · LIGHT (default) ─────────────────────── */ :root{ --csx-r-xs:4px; --csx-r-chip:8px; --csx-r-sm:10px; --csx-r-md:14px; --csx-r-lg:16px; --csx-r-btn:11px; --csx-r-pill:999px; --csx-ground:#f6f6f4; --csx-surface:#ffffff; --csx-surface-2:#fbfbf9; --csx-surface-hover:#f4f4f1; --csx-sidebar:#ffffff; --csx-ink:#1a1a1a; /* body text — never pure black */ --csx-ink-2:#6b7280; --csx-ink-3:#9ca3af; --csx-line:#e6e4df; --csx-line-2:#dedcd5; --csx-field-border:#dcdad4; /* visible input/select border (light) — polish 07-20: firmer hit area */ --csx-lane:#eeeeea; /* kanban column lane fill (light) */ --csx-nav-active:#eef1ee; --csx-accent:#3ee092; --csx-accent-ink:#1c1708; --csx-accent-hover:#33cf83; --csx-accent-soft:rgba(62,224,146,.16); --csx-accent-text:#0e7a4a; /* Canonical status palette (Gemini fix 2026-07-20). Chip bg = colour @10% * alpha in LIGHT; text = a DARKENED shade of the status colour so every chip * clears 4.5:1 on its own tint (verified). Base = the pure status colour, * used only for dots/bars (non-text). */ --csx-st-green:#35a05f; --csx-st-green-bg:rgba(53,160,95,.10); --csx-st-green-tx:#17703c; --csx-st-violet:#7b68d9; --csx-st-violet-bg:rgba(123,104,217,.10);--csx-st-violet-tx:#5544a8; --csx-st-amber:#ee8b2c; --csx-st-amber-bg:rgba(238,139,44,.10); --csx-st-amber-tx:#9a5a10; --csx-st-red:#e0301e; --csx-st-red-bg:rgba(224,48,30,.10); --csx-st-red-tx:#b3251a; --csx-st-slate:#64748b; --csx-st-slate-bg:rgba(100,116,139,.10); --csx-st-slate-tx:#47515f; /* Neutral service-chip / step surface — an ALPHA tint so it stays a visible * step over BOTH a resting row and a hovered row (no border needed). */ --csx-chip-step:rgba(26,26,26,.055); --csx-av-a-bg:#e6eefb; --csx-av-a-tx:#3b62b8; --csx-av-b-bg:#ece8fb; --csx-av-b-tx:#5a4bb8; --csx-av-c-bg:#e4f4ec; --csx-av-c-tx:#1f8b5b; --csx-av-d-bg:#fbeede; --csx-av-d-tx:#b06a1f; --csx-av-e-bg:#e6f1f4; --csx-av-e-tx:#2a7f92; --csx-shadow-card:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05); --csx-shadow-pop:0 16px 40px -12px rgba(16,24,40,.16); --csx-shadow-knob:0 1px 2px rgba(0,0,0,.3); /* toggle/switch knob — was a rogue inline shadow */ --csx-ring-mark:inset 0 0 0 1.5px rgba(10,31,20,.12); /* inner ring on the emerald brand-mark dot */ --csx-ease:cubic-bezier(.22,.61,.36,1); } /* ───────────────────────── TOKENS · DARK ──────────────────────────────── * Applied when the toggle picks dark, AND pinned whenever an unconverted * (dark-only) /cs view is on screen so the shell never mixes light+dark. */ html[data-theme="dark"], body:has(.cs-main){ --csx-ground:#030303; --csx-surface:#0a0a0b; --csx-surface-2:#0c0c0e; --csx-surface-hover:#0d0d0f; --csx-sidebar:#070708; --csx-ink:rgba(255,253,244,.90); /* cream — never pure white */ --csx-ink-2:rgba(255,253,244,.60); --csx-ink-3:rgba(255,253,244,.38); --csx-line:rgba(255,253,244,.06); --csx-line-2:rgba(255,253,244,.10); --csx-field-border:rgba(255,253,244,.20); /* visible input/select border (dark) — polish 07-20: firmer hit area */ --csx-lane:rgba(255,253,244,.04); /* kanban column lane fill (dark) */ --csx-nav-active:rgba(255,253,244,.06); --csx-accent-hover:#54e8a1; --csx-accent-soft:rgba(62,224,146,.15); --csx-accent-text:#3ee092; /* Same canonical hues; chip bg = colour @15% alpha, text = a brightened shade * that clears 4.5:1 on the near-black tint (verified). Dots/bars use the base. */ --csx-st-green:#35a05f; --csx-st-green-bg:rgba(53,160,95,.15); --csx-st-green-tx:#4ecb88; --csx-st-violet:#7b68d9; --csx-st-violet-bg:rgba(123,104,217,.15);--csx-st-violet-tx:#a99ceb; --csx-st-amber:#ee8b2c; --csx-st-amber-bg:rgba(238,139,44,.15); --csx-st-amber-tx:#f0a55a; --csx-st-red:#e0301e; --csx-st-red-bg:rgba(224,48,30,.15); --csx-st-red-tx:#ef7365; --csx-st-slate:#64748b; --csx-st-slate-bg:rgba(100,116,139,.15); --csx-st-slate-tx:#9aa6b8; --csx-chip-step:rgba(255,253,244,.07); --csx-av-a-bg:rgba(80,130,220,.18); --csx-av-a-tx:#a9c2f2; --csx-av-b-bg:rgba(123,104,217,.20);--csx-av-b-tx:#c0b4f2; --csx-av-c-bg:rgba(23,178,106,.18); --csx-av-c-tx:#7fdcb0; --csx-av-d-bg:rgba(238,139,44,.18); --csx-av-d-tx:#f2bd84; --csx-av-e-bg:rgba(42,127,146,.22); --csx-av-e-tx:#8fcdd9; --csx-shadow-card:0 1px 2px rgba(0,0,0,.4); --csx-shadow-pop:0 24px 60px -24px rgba(0,0,0,.7); --csx-shadow-knob:0 1px 2px rgba(0,0,0,.3); } /* ───────────────────────── SHELL LAYOUT ───────────────────────────────── * The sidebar is prepended to as #app-nav.cs-sidebar (so the router's * existing `#app-nav` cleanup removes it on route change). It is fixed; content * (.app-shell wrapping #view) is cleared with a left inset. Any /cs page * therefore inherits the sidebar with zero per-view layout code. */ body:has(.cs-sidebar){ background:var(--csx-ground); } body:has(#app-nav.cs-sidebar) .app-shell{ padding-left:260px; } body:has(.demo-banner) .cs-sidebar{ top:38px; height:calc(100vh - 38px); } .cs-sidebar{ position:fixed; left:0; top:0; z-index:60; width:260px; height:100vh; overflow-y:auto; background:var(--csx-sidebar); border-right:1px solid var(--csx-line); display:flex; flex-direction:column; padding:22px 16px 18px; font-family:var(--font-sans); transition:background-color .15s var(--csx-ease), border-color .15s var(--csx-ease); } .csx-ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;flex:none} .csx-ico-sm{width:16px;height:16px;stroke-width:1.9} .csx-ico-18{width:18px;height:18px} .csx-num{font-variant-numeric:tabular-nums} /* brand */ .csx-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 4px;margin-bottom:20px;text-decoration:none} .csx-brand .csx-mark{width:30px;height:30px;border-radius:9px;background:var(--csx-ground);display:grid;place-items:center;flex:none;border:1px solid var(--csx-line)} .csx-brand .csx-dot{width:13px;height:13px;border-radius:50%;background:var(--csx-accent);box-shadow:var(--csx-ring-mark)} .csx-brand .csx-wm{display:flex;flex-direction:column;line-height:1.05} .csx-brand .csx-wm b{font-size:15px;font-weight:700;letter-spacing:-.03em;color:var(--csx-ink)} .csx-brand .csx-wm span{font-size:11px;font-weight:500;color:var(--csx-ink-3);letter-spacing:0} /* search */ .csx-search{position:relative;margin-bottom:22px} .csx-search .csx-si{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--csx-ink-3)} .csx-search input{ width:100%;height:40px;padding:0 40px 0 38px;border-radius:var(--csx-r-btn); background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink); font-family:inherit;font-size:13.5px;letter-spacing:-.01em; } .csx-search input::placeholder{color:var(--csx-ink-3)} .csx-search input:focus{outline:none;border-color:var(--csx-line-2);background:var(--csx-surface)} .csx-search kbd{ position:absolute;right:11px;top:50%;transform:translateY(-50%); font-family:inherit;font-size:11px;font-weight:600;color:var(--csx-ink-3); width:20px;height:20px;display:grid;place-items:center; border:1px solid var(--csx-line);border-radius:6px;background:var(--csx-surface); } /* nav */ .csx-nav{display:flex;flex-direction:column;gap:2px;flex:1} .csx-nav-item{ position:relative;display:flex;align-items:center;gap:12px; padding:11px 12px;border-radius:var(--csx-r-btn); color:var(--csx-ink-2);font-size:14px;font-weight:500;letter-spacing:-.01em; text-decoration:none; transition:background-color .12s var(--csx-ease), color .12s var(--csx-ease); } .csx-nav-item .csx-ico{color:var(--csx-ink-3);transform:translateY(-.5px)} .csx-nav-item:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .csx-nav-item:hover .csx-ico{color:var(--csx-ink-2)} .csx-nav-item.is-active{background:var(--csx-nav-active);color:var(--csx-ink);font-weight:600} .csx-nav-item.is-active .csx-ico{color:var(--csx-ink)} .csx-nav-item.is-active::before{ content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%); width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--csx-accent); } .csx-nav-item .csx-count{ margin-left:auto;font-size:11.5px;font-weight:600;color:var(--csx-ink-2); background:var(--csx-chip-step);border:0; min-width:22px;height:20px;padding:0 6px;border-radius:var(--csx-r-pill); display:grid;place-items:center; } /* Emerald "new item" dot — pulses gently so a brand-new order/lead catches the * eye on the Bookings / Inbox nav. Sits before the count (or on its own). */ .csx-nav-item .csx-newdot{ margin-left:auto;width:8px;height:8px;border-radius:50%;flex:none; background:var(--csx-accent);box-shadow:0 0 0 3px var(--csx-accent-soft); animation:csx-pulse 2s var(--csx-ease) infinite; } .csx-nav-item .csx-newdot + .csx-count{margin-left:8px} @keyframes csx-pulse{0%,100%{opacity:1}50%{opacity:.32}} @media (prefers-reduced-motion:reduce){ .csx-nav-item .csx-newdot{animation:none} } /* sidebar footer — theme toggle + account chip */ .csx-side-foot{display:flex;flex-direction:column;gap:10px;margin-top:12px} .csx-acct{ display:flex;align-items:center;gap:11px;padding:10px; border-radius:var(--csx-r-btn);border:1px solid var(--csx-line);background:var(--csx-surface-2); text-decoration:none; } .csx-acct:hover{background:var(--csx-surface-hover)} .csx-acct .csx-av{width:34px;height:34px;border-radius:50%;background:var(--csx-av-c-bg);color:var(--csx-av-c-tx); display:grid;place-items:center;font-size:13px;font-weight:700;flex:none;letter-spacing:0} .csx-acct .csx-who{display:flex;flex-direction:column;line-height:1.2;min-width:0} .csx-acct .csx-who b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--csx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csx-acct .csx-who span{font-size:11.5px;color:var(--csx-ink-3)} .csx-acct .csx-chev{margin-left:auto;color:var(--csx-ink-3)} /* segmented light/dark toggle (shared by sidebar + dashboard header) */ .csx-seg{display:flex;gap:3px;padding:3px;background:var(--csx-surface-2);border:1px solid var(--csx-line);border-radius:var(--csx-r-btn)} .csx-seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px 8px;border-radius:8px; font-family:inherit;font-size:13px;font-weight:600;color:var(--csx-ink-3);letter-spacing:-.01em;cursor:pointer;border:0;background:none;flex:1} .csx-seg button .csx-ico-sm{color:var(--csx-ink-3)} .csx-seg button.on{background:var(--csx-surface);color:var(--csx-ink);box-shadow:var(--csx-shadow-card)} .csx-seg button.on .csx-ico-sm{color:var(--csx-ink)} html[data-theme="dark"] .csx-seg button.on, body:has(.cs-main) .csx-seg button.on{background:var(--csx-surface-hover)} .csx-side-foot .csx-seg button{padding:6px 8px;font-size:12px} /* ───────────────────────── MAIN CONTENT (dashboard) ───────────────────── * Rendered into #view. Max-width 1200, generous 40px padding — the mockup's * .main .wrap. Only the converted dashboard uses these classes. */ .csx-wrap{max-width:1200px;margin:0 auto;padding:32px 32px 56px;color:var(--csx-ink);font-family:var(--font-sans)} .csx-wrap *{box-sizing:border-box} /* header row */ .csx-head{display:flex;align-items:flex-start;gap:24px;margin-bottom:28px} .csx-crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--csx-ink-3);font-weight:500;margin-bottom:8px} .csx-crumb .csx-sep{opacity:.6} .csx-title{margin:0;font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.15;color:var(--csx-ink)} .csx-hi{margin:8px 0 0;font-size:14px;color:var(--csx-ink-2);line-height:1.5} .csx-hi .csx-wx{color:var(--csx-ink-3)} .csx-actions{margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0;padding-top:2px} .csx-icobtn{width:40px;height:40px;border-radius:var(--csx-r-btn);border:1px solid var(--csx-line);background:var(--csx-surface); color:var(--csx-ink-2);display:grid;place-items:center;position:relative;cursor:pointer;text-decoration:none} .csx-icobtn:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .csx-icobtn .csx-badge{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--csx-st-red);border:2px solid var(--csx-surface)} .csx-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 11px;border-radius:var(--csx-r-btn); font-family:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;cursor:pointer; border:1px solid var(--csx-line-2);background:var(--csx-surface);color:var(--csx-ink);text-decoration:none} .csx-btn:hover{background:var(--csx-surface-hover)} .csx-btn-primary{background:var(--csx-accent);color:var(--csx-accent-ink);border-color:var(--csx-accent)} .csx-btn-primary:hover{background:var(--csx-accent-hover);border-color:var(--csx-accent-hover)} .csx-btn-primary .csx-ico-sm{color:var(--csx-accent-ink)} /* stat row */ .csx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:40px} .csx-stat{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-md);padding:24px;box-shadow:var(--csx-shadow-card)} .csx-stat .csx-lbl{font-size:13px;font-weight:500;color:var(--csx-ink-2);margin-bottom:14px} .csx-stat .csx-val{font-size:37px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--csx-ink)} .csx-stat .csx-foot{display:flex;align-items:center;gap:9px;margin-top:20px;min-height:22px} .csx-stat .csx-cap{font-size:12.5px;color:var(--csx-ink-2)} .csx-trend{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 9px 4px;border-radius:var(--csx-r-pill);letter-spacing:-.01em} .csx-trend.up{background:var(--csx-accent-soft);color:var(--csx-accent-text)} .csx-trend .csx-ico-sm{width:13px;height:13px;stroke-width:2.4} .csx-mini-dot{width:8px;height:8px;border-radius:50%;flex:none} /* section header */ .csx-sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px} .csx-sec-head h2{margin:0;font-size:16px;font-weight:500;letter-spacing:-.015em;color:var(--csx-ink)} .csx-sec-head .csx-sub{font-size:13px;color:var(--csx-ink-3)} .csx-sec-head .csx-link{margin-left:auto;font-size:13px;font-weight:600;color:var(--csx-ink-2);display:inline-flex;align-items:center;gap:5px;text-decoration:none} .csx-sec-head .csx-link:hover{color:var(--csx-ink)} /* table */ .csx-tbl-wrap{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);overflow:hidden;margin-bottom:44px} .csx-tbl-scroll{overflow-x:auto} /* min-width kept modest so the recent-bookings + clients tables FIT desktop * (no forced scroll at 1280/1440); the scroll wrapper is only a narrow-screen * safety net. The wider 9-column invoices table is bumped up separately. */ .csx-table{width:100%;border-collapse:collapse;min-width:640px} #csi-table .csx-table{min-width:820px} .csx-table thead th{ text-align:left;font-size:11.5px;font-weight:600;color:var(--csx-ink-3); padding:14px 16px;border-bottom:1px solid var(--csx-line);background:var(--csx-surface-2); white-space:nowrap;letter-spacing:.01em; } .csx-table th.right,.csx-table td.right{text-align:right} .csx-table tbody td{padding:12px 16px;border-bottom:1px solid var(--csx-line);vertical-align:middle} .csx-table tbody tr:last-child td{border-bottom:0} .csx-table tbody tr{cursor:pointer;transition:background-color .12s var(--csx-ease)} .csx-table tbody tr:hover{background:var(--csx-surface-hover)} .csx-table td:first-child,.csx-table th:first-child{padding-left:22px} .csx-table td:last-child,.csx-table th:last-child{padding-right:22px} .csx-prop-wrap{display:flex;align-items:center;gap:14px;min-width:0} .csx-prop-thumb{width:80px;height:60px;border-radius:8px;overflow:hidden;flex:none;background:var(--csx-chip-step);display:grid;place-items:center} .csx-prop-thumb img{width:100%;height:100%;object-fit:cover;display:block} .csx-prop{min-width:0} .csx-prop b{display:block;font-size:14px;font-weight:600;color:var(--csx-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csx-prop span{display:block;font-size:12px;color:var(--csx-ink-2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csx-agent{display:flex;align-items:center;gap:11px} .csx-agent .csx-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none;letter-spacing:0} .csx-agent .csx-nm b{display:block;font-size:13.5px;font-weight:600;color:var(--csx-ink);white-space:nowrap} .csx-agent .csx-nm span{display:block;font-size:12px;color:var(--csx-ink-3);margin-top:1px;white-space:nowrap} .csx-av-a{background:var(--csx-av-a-bg);color:var(--csx-av-a-tx)} .csx-av-b{background:var(--csx-av-b-bg);color:var(--csx-av-b-tx)} .csx-av-c{background:var(--csx-av-c-bg);color:var(--csx-av-c-tx)} .csx-av-d{background:var(--csx-av-d-bg);color:var(--csx-av-d-tx)} .csx-av-e{background:var(--csx-av-e-bg);color:var(--csx-av-e-tx)} .csx-pkg{display:inline-block;max-width:100%;font-size:13.5px;color:var(--csx-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle} /* agent cell truncates cleanly inside a constrained column */ .csx-agent .csx-nm{min-width:0} .csx-agent .csx-nm b,.csx-agent .csx-nm span{overflow:hidden;text-overflow:ellipsis} /* Recent-bookings table (dashboard) uses a FIXED layout so it always fits its * card at desktop — long addresses/names/brokerages ellipsis instead of forcing * a horizontal scrollbar. The wider clients/invoices tables keep auto layout in * their own scroll container. */ .csx-recent{table-layout:fixed;min-width:0} .csx-recent th:nth-child(1),.csx-recent td:nth-child(1){width:32%} .csx-recent th:nth-child(2),.csx-recent td:nth-child(2){width:22%} .csx-recent th:nth-child(3),.csx-recent td:nth-child(3){width:16%} .csx-recent th:nth-child(4),.csx-recent td:nth-child(4){width:13%} .csx-recent th:nth-child(5),.csx-recent td:nth-child(5){width:9%} .csx-recent th:nth-child(6),.csx-recent td:nth-child(6){width:8%} .csx-recent td{overflow:hidden} .csx-amt{font-size:14px;font-weight:600;color:var(--csx-ink)} .csx-amt.muted{color:var(--csx-ink-3);font-weight:500} .csx-date{font-size:13px;color:var(--csx-ink-2);white-space:nowrap} .csx-date .csx-accent{color:var(--csx-ink);font-weight:600} /* status chip (Gemini fix 2026-07-20) — 24px tall · 0 8 pad · r12 · 12px medium, * tabular for numeric labels. Tinted fill + darkened/brightened text per theme * (verified ≥4.5:1 both). Neutral/draft = transparent + hairline + muted. */ .csx-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:12px; font-size:12px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;border:1px solid transparent; font-variant-numeric:tabular-nums} .csx-pill .d{width:6px;height:6px;border-radius:50%;flex:none} .csx-pill.green {background:var(--csx-st-green-bg); color:var(--csx-st-green-tx)} .csx-pill.green .d {background:var(--csx-st-green)} .csx-pill.violet{background:var(--csx-st-violet-bg);color:var(--csx-st-violet-tx)} .csx-pill.violet .d{background:var(--csx-st-violet)} .csx-pill.amber {background:var(--csx-st-amber-bg); color:var(--csx-st-amber-tx)} .csx-pill.amber .d {background:var(--csx-st-amber)} .csx-pill.red {background:var(--csx-st-red-bg); color:var(--csx-st-red-tx)} .csx-pill.red .d {background:var(--csx-st-red)} .csx-pill.slate, .csx-pill.new {background:var(--csx-st-slate-bg); color:var(--csx-st-slate-tx)} .csx-pill.slate .d,.csx-pill.new .d{background:var(--csx-st-slate)} .csx-pill.draft {background:transparent;color:var(--csx-ink-2);border-color:var(--csx-line-2)} .csx-pill.draft .d{background:var(--csx-ink-3)} /* needs attention */ .csx-lower{max-width:760px} .csx-panel{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);overflow:hidden} .csx-att{display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--csx-line);text-decoration:none} .csx-att:last-child{border-bottom:0} .csx-att:hover{background:var(--csx-surface-hover)} /* New items (pending order / new lead) carry the new-order emphasis via a 3px * emerald left accent — never a tinted whole panel. Inset shadow = no reflow. */ .csx-att.is-new{box-shadow:inset 3px 0 0 var(--csx-accent)} .csx-att .csx-ring{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none} .csx-ring.green{background:var(--csx-st-green-bg);color:var(--csx-st-green-tx)} .csx-ring.violet{background:var(--csx-st-violet-bg);color:var(--csx-st-violet-tx)} .csx-ring.amber{background:var(--csx-st-amber-bg);color:var(--csx-st-amber-tx)} .csx-ring.red{background:var(--csx-st-red-bg);color:var(--csx-st-red-tx)} .csx-ring.slate{background:var(--csx-st-slate-bg);color:var(--csx-st-slate-tx)} .csx-ring.accent{background:var(--csx-accent-soft);color:var(--csx-accent-text)} .csx-att .csx-txt{min-width:0;flex:1} .csx-att .csx-txt b{display:block;font-size:14px;font-weight:600;color:var(--csx-ink);letter-spacing:-.01em} .csx-att .csx-txt span{display:block;font-size:13px;color:var(--csx-ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .csx-att .csx-go{margin-left:auto;flex:none;font-size:13px;font-weight:600;color:var(--csx-ink-2); padding:8px 14px;border-radius:var(--csx-r-btn);border:0;background:var(--csx-chip-step);white-space:nowrap} .csx-att:hover .csx-go{color:var(--csx-ink)} .csx-empty{padding:32px 24px;text-align:center;color:var(--csx-ink-3);font-size:13.5px} /* new-order summary row — pinned at the TOP of the Needs-attention panel so Dom * instantly sees a fresh order/lead landed. Emerald-tinted, reads from real * pending-booking + new-lead counts (never fabricated). */ /* Clean emerald accent (polish 07-20): emerald dot + 3px emerald left accent + * a lightly-tinted row — unmissable, but reads as an accent, never a heavy * green panel. Inset shadow = no reflow, matches the .is-new attention rows. */ .csx-neworder{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--csx-line); text-decoration:none;background:var(--csx-accent-soft);box-shadow:inset 3px 0 0 var(--csx-accent)} .csx-neworder:hover{background:var(--csx-accent-soft);filter:brightness(1.02)} .csx-neworder .csx-nodot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--csx-accent); box-shadow:0 0 0 4px var(--csx-accent-soft);animation:csx-pulse 2s var(--csx-ease) infinite} .csx-neworder .csx-notxt{min-width:0;flex:1} .csx-neworder .csx-notxt b{display:block;font-size:14px;font-weight:600;color:var(--csx-ink);letter-spacing:-.01em} .csx-neworder .csx-notxt span{display:block;font-size:12.5px;color:var(--csx-ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .csx-neworder .csx-nogo{margin-left:auto;flex:none;font-size:13px;font-weight:600;color:var(--csx-accent-ink); padding:7px 14px;border-radius:var(--csx-r-btn);background:var(--csx-accent);white-space:nowrap} .csx-neworder:hover .csx-nogo{background:var(--csx-accent-hover)} /* dismissible header pill (optional, dashboard) — a small emerald nudge when a * brand-new order arrives, with a gently pulsing dark dot. Tasteful, not a banner. */ .csx-newpill{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 6px 0 14px;border-radius:16px; background:var(--csx-accent);color:var(--csx-accent-ink);font-size:13px;font-weight:600;letter-spacing:-.01em; margin:0 0 22px;text-decoration:none;box-shadow:var(--csx-shadow-card)} .csx-newpill .csx-npdot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--csx-accent-ink); animation:csx-pulse 2s var(--csx-ease) infinite} .csx-newpill .csx-nplabel{white-space:nowrap} .csx-newpill .csx-npx{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none; background:rgba(28,23,8,.12);color:var(--csx-accent-ink);border:0;cursor:pointer} .csx-newpill .csx-npx:hover{background:rgba(28,23,8,.22)} .csx-newpill .csx-npx svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round} /* sync bar */ .csx-sync{display:flex;align-items:center;gap:12px;margin-top:40px;padding:14px 18px; background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-md);box-shadow:var(--csx-shadow-card)} .csx-sync-dot{width:8px;height:8px;border-radius:50%;background:var(--csx-accent);flex:none;box-shadow:0 0 0 3px var(--csx-accent-soft)} .csx-sync-text{font-size:13px;color:var(--csx-ink-2);flex:1;min-width:0} .csx-sync-text strong{color:var(--csx-ink);font-weight:600} .csx-sync .csx-btn{margin-left:auto;flex:none;padding:8px 14px} .csx-foot-note{margin:28px auto 0;max-width:1200px;font-size:12px;color:var(--csx-ink-3);text-align:center} /* ───────────────────────── RESPONSIVE ───────────────────────────────────*/ @media (max-width:1140px){ .csx-stats{grid-template-columns:repeat(2,1fr);gap:20px} .csx-wrap{padding:28px 24px 56px} } @media (max-width:900px){ .cs-sidebar{transform:translateX(-100%);transition:transform .2s var(--csx-ease)} .cs-sidebar.is-open{transform:none;box-shadow:var(--csx-shadow-pop)} body:has(#app-nav.cs-sidebar) .app-shell{padding-left:0} .csx-head{flex-direction:column;gap:18px} .csx-actions{margin-left:0} .csx-lower{max-width:none} } /* ========================================================================== * PROPERTIES LIST (redesign-0718-101 · slice 2 · /cs/properties) * * Port of mockup-properties.html scoped to unique .csp-* classes so it can * never collide with main.css, other /cs views, or the agent-facing portal. * All colour comes from the --csx-* tokens above (light + dark both covered); * service-swatch hues are the canonical CS service palette, defined once here. * ==========================================================================*/ /* toolbar */ .csp-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:30px;flex-wrap:wrap} .csp-tsearch{position:relative;flex:1 1 260px;min-width:230px;max-width:400px} .csp-tsearch .csp-si{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--csx-ink-3)} .csp-tsearch input{width:100%;height:40px;padding:0 14px 0 40px;border-radius:var(--csx-r-btn); background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink);font-family:inherit;font-size:13.5px;letter-spacing:-.01em} .csp-tsearch input::placeholder{color:var(--csx-ink-3)} .csp-tsearch input:focus{outline:none;border-color:var(--csx-line-2);background:var(--csx-surface)} .csp-tfilters{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .csp-fld{display:inline-flex;align-items:center;gap:8px} .csp-fld .csp-fl{font-size:12.5px;font-weight:600;color:var(--csx-ink-3)} .csp-sel{position:relative;display:inline-flex} .csp-sel select{appearance:none;-webkit-appearance:none;height:40px;padding:0 34px 0 13px;border-radius:var(--csx-r-btn); background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink);font-family:inherit;font-size:13.5px;font-weight:500;letter-spacing:-.01em;cursor:pointer} .csp-sel select:hover{background:var(--csx-surface-hover)} .csp-sel select:focus{outline:none;border-color:var(--csx-line-2);background:var(--csx-surface)} .csp-sel .csp-chev{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--csx-ink-3);pointer-events:none} .csp-count{margin-left:auto;font-size:13px;color:var(--csx-ink-2);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums} /* groups + rows — fluid grid (no forced min-width) so nothing scrolls * horizontally inside the section at desktop; overflow-x is only a very-narrow * safety net. */ .csp-listwrap{padding-bottom:2px} .csp-groups{min-width:0} .csp-group{margin-bottom:28px} .csp-group:last-child{margin-bottom:8px} .csp-group.is-collapsed{margin-bottom:10px} /* Header = collapse toggle (click) AND reorder handle (drag). */ .csp-ghead{display:flex;align-items:center;gap:9px;padding:7px 8px;margin-bottom:5px;border-radius:var(--csx-r-btn);cursor:pointer;user-select:none;transition:background var(--t-fast) var(--csx-ease)} .csp-ghead:hover{background:var(--csx-surface-hover)} .csp-ghead:focus-visible{outline:none;box-shadow:var(--focus-ring-shadow)} .csp-ghead[draggable="true"]:active{cursor:grabbing} .csp-gcaret{color:var(--csx-ink-3);flex:none;transform:rotate(90deg);transition:transform var(--t-fast) var(--csx-ease)} .csp-group.is-collapsed .csp-gcaret{transform:rotate(0deg)} /* Clear status marker: a filled, status-coloured square (reads as a tag, not a stray dot). */ .csp-ghead .csp-gsq{width:12px;height:12px;border-radius:var(--csx-r-xs);flex:none} .csp-ghead h2{margin:0;font-size:15px;font-weight:650;letter-spacing:-.015em;color:var(--csx-ink)} .csp-ghead .csp-gcount{font-size:12px;font-weight:600;color:var(--csx-ink-2);background:var(--csx-surface-2);border:1px solid var(--csx-line); min-width:22px;height:20px;padding:0 7px;border-radius:var(--csx-r-pill);display:grid;place-items:center} .csp-group.is-collapsed .csp-panel{display:none} .csp-panel{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);overflow:hidden} .csp-row{position:relative;display:grid; grid-template-columns:80px minmax(130px,1.3fr) minmax(90px,0.9fr) 116px 78px minmax(176px,1.8fr) auto 30px; gap:14px;align-items:center;padding:16px 18px 16px 24px;border-bottom:1px solid var(--csx-line); transition:background-color .12s var(--csx-ease)} .csp-row:last-child{border-bottom:0} .csp-row:hover{background:var(--csx-surface-hover)} .csp-row[draggable="true"]{cursor:pointer} .csp-row[draggable="true"]:active{cursor:grabbing} .csp-row.csp-dragging{opacity:.42} .csp-row .csp-bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--csp-bar)} .csp-thumb{width:80px;height:60px;border-radius:8px;overflow:hidden;background:var(--csx-chip-step);flex:none} .csp-thumb img{width:100%;height:100%;object-fit:cover;display:block} /* Polish 07-20: a subtle inset hairline gives the empty thumb structural * definition against the near-tone fill (inset shadow = exact 80x60, no reflow). * --csx-line-2 = cream @10% (dark) / #dedcd5 (light). */ .csp-thumb.csp-nophoto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--csx-ink-3);box-shadow:inset 0 0 0 1px var(--csx-line-2)} .csp-thumb.csp-nophoto span{font-size:11px;font-weight:500;color:var(--csx-ink-3)} .csp-info{min-width:0} .csp-ord{font-size:11.5px;font-weight:600;color:var(--csx-ink-3);font-variant-numeric:tabular-nums;margin-bottom:3px} .csp-addr{font-size:15px;font-weight:600;color:var(--csx-ink);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csp-hood{font-size:12.5px;color:var(--csx-ink-3);margin-top:2px} .csp-client{display:flex;align-items:center;gap:11px;min-width:0} .csp-client .csp-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none;letter-spacing:0} .csp-cn{min-width:0} .csp-cn b{display:block;font-size:13.5px;font-weight:600;color:var(--csx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csp-cn span{display:block;font-size:12px;color:var(--csx-ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* per-row status dropdown */ .csp-pstatus{min-width:0} .csp-statusbtn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 9px 0 12px;width:100%;max-width:150px; border-radius:var(--csx-r-btn);border:0;background:var(--csx-chip-step);color:var(--csx-ink); font-family:inherit;font-size:13px;font-weight:500;letter-spacing:-.01em;cursor:pointer} .csp-statusbtn:hover{background:var(--csx-surface-hover)} .csp-statusbtn.csp-static{cursor:default;max-width:none} .csp-statusbtn .csp-d{width:8px;height:8px;border-radius:50%;flex:none} .csp-statusbtn .csp-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csp-statusbtn .csp-chev{margin-left:auto;color:var(--csx-ink-3)} /* payment — separate axis */ .csp-ppay{min-width:0} .csp-pay{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:12px; font-size:12px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;border:1px solid transparent; font-variant-numeric:tabular-nums} .csp-pay .csp-pd{width:6px;height:6px;border-radius:50%;flex:none} .csp-pay.paid{background:var(--csx-st-green-bg);color:var(--csx-st-green-tx)} .csp-pay.paid .csp-pd{background:var(--csx-st-green)} .csp-pay.overdue{background:var(--csx-st-red-bg);color:var(--csx-st-red-tx)} .csp-pay.overdue .csp-pd{background:var(--csx-st-red)} .csp-pay.deposit{background:var(--csx-st-amber-bg);color:var(--csx-st-amber-tx)} .csp-pay.deposit .csp-pd{background:var(--csx-st-amber)} .csp-pay.refunded{background:transparent;color:var(--csx-ink-3);border-color:var(--csx-line-2)} .csp-pay.unpaid{background:transparent;color:var(--csx-ink-2);border-color:var(--csx-line-2)} /* services — ALWAYS horizontal (flex row, wrap). Each chip: 24px tall · 0 8 pad * · r12 · 6px colour dot + label. Background = a neutral ALPHA step (no border, * so no frame-within-frame; stays visible on a hovered row). */ .csp-psvc{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center;min-width:0} .csp-svc{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:12px; border:0;background:var(--csx-chip-step);font-size:12px;font-weight:500;color:var(--csx-ink);white-space:nowrap} .csp-sd{width:6px;height:6px;border-radius:50%;flex:none} .csp-svc-photo{background:#b5d56a} .csp-svc-fp{background:#f6e8a4} .csp-svc-drone{background:#7b68d9} .csp-svc-video{background:#e94b6b} .csp-svc-twilight{background:#b64fc8} .csp-svc-matterport{background:#2a7f92} .csp-svc-reshoot{background:#9098a3} /* flags — SPW icon + travel badge */ .csp-flags{display:flex;align-items:center;gap:8px;justify-content:flex-start} .csp-spw{display:grid;place-items:center;width:26px;height:26px;border-radius:8px} .csp-spw.is-active{color:var(--csx-st-green-tx);background:var(--csx-st-green-bg)} .csp-spw.is-none{color:var(--csx-st-amber-tx);background:var(--csx-st-amber-bg)} .csp-dist{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--csx-st-violet-tx);background:var(--csx-st-violet-bg)} /* row actions */ .csp-act{display:flex;justify-content:flex-end} .csp-rowmenu{width:32px;height:32px;border-radius:9px;color:var(--csx-ink-3);display:grid;place-items:center;cursor:pointer;background:none;border:0} .csp-rowmenu:hover{background:var(--csx-surface-2);color:var(--csx-ink)} /* popover menus (top layer — never clipped) */ .csp-pop{position:fixed;margin:0;inset:auto;padding:0;border:0;background:transparent;overflow:visible} .csp-pop::backdrop{background:transparent} .csp-menu{background:var(--csx-surface);border:1px solid var(--csx-line-2);border-radius:var(--csx-r-md);box-shadow:var(--csx-shadow-pop);padding:6px;width:210px} .csp-menu.right{width:190px} .csp-mlabel{font-size:11px;font-weight:600;color:var(--csx-ink-3);padding:6px 10px 5px} .csp-mopt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px; font-family:inherit;font-size:13.5px;font-weight:500;color:var(--csx-ink);text-align:left;cursor:pointer;background:none;border:0} .csp-mopt:hover{background:var(--csx-surface-hover)} .csp-mopt .csp-d{width:8px;height:8px;border-radius:50%;flex:none} .csp-mopt .csp-tick{margin-left:auto;color:var(--csx-accent-text);display:inline-flex} .csp-msep{height:1px;background:var(--csx-line);margin:5px 4px} /* drag drop targets */ .csp-group.csp-drop-row > .csp-panel{box-shadow:0 0 0 2px var(--csx-accent), var(--csx-shadow-card)} .csp-group.csp-drop-row > .csp-ghead h2{color:var(--csx-accent-text)} .csp-group.csp-dragging{opacity:.5} .csp-group.csp-drop-group{outline:2px dashed var(--csx-accent);outline-offset:7px;border-radius:14px} /* empty state */ .csp-empty{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);padding:60px 24px;text-align:center} .csp-empty .csp-ei{color:var(--csx-ink-3);opacity:.5;margin-bottom:14px;display:inline-flex} .csp-empty h2{margin:0 0 6px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--csx-ink)} .csp-empty p{margin:0 0 18px;font-size:13.5px;color:var(--csx-ink-2)} /* ── detail side panel (right drawer) ── */ #csp-drawer-host{position:fixed;inset:0;z-index:120} .csp-drawer-backdrop{position:absolute;inset:0;background:rgba(3,3,3,.42);backdrop-filter:blur(2px);animation:csp-fade .18s var(--csx-ease)} @keyframes csp-fade{from{opacity:0}to{opacity:1}} .csp-drawer{position:absolute;top:0;right:0;height:100%;width:min(460px,92vw); background:var(--csx-surface);border-left:1px solid var(--csx-line);box-shadow:var(--csx-shadow-pop); display:flex;flex-direction:column;transform:translateX(100%);transition:transform .24s var(--csx-ease);color:var(--csx-ink)} .csp-drawer.is-open{transform:none} .csp-drawer-head{position:relative;display:flex;align-items:flex-start;gap:14px;padding:24px 22px 20px 26px;border-bottom:1px solid var(--csx-line)} .csp-drawer-head .csp-bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--csp-bar)} .csp-dh-txt{min-width:0;flex:1} .csp-dh-txt h2{margin:2px 0 0;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--csx-ink);line-height:1.15} .csp-drawer-x{width:34px;height:34px;border-radius:9px;border:1px solid var(--csx-line);background:var(--csx-surface);color:var(--csx-ink-2);display:grid;place-items:center;cursor:pointer;flex:none} .csp-drawer-x:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .csp-drawer-body{padding:20px 24px 28px;overflow-y:auto} .csp-dchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .csp-spw-tag{display:inline-flex;align-items:center;padding:5px 11px 6px;border-radius:var(--csx-r-pill);font-size:12.5px;font-weight:600} .csp-spw-tag.is-active{background:var(--csx-st-green-bg);color:var(--csx-st-green-tx)} .csp-spw-tag.is-none{background:var(--csx-st-amber-bg);color:var(--csx-st-amber-tx)} .csp-dhero{width:100%;height:180px;border-radius:var(--csx-r-md);overflow:hidden;border:1px solid var(--csx-line);margin-bottom:20px;background:var(--csx-surface-2)} .csp-dhero img{width:100%;height:100%;object-fit:cover;display:block} .csp-dsec{padding:16px 0;border-top:1px solid var(--csx-line)} .csp-dsec:first-of-type{border-top:0;padding-top:0} .csp-dsec-t{font-size:11px;font-weight:600;color:var(--csx-ink-3);letter-spacing:.03em;text-transform:uppercase;margin-bottom:10px} .csp-drow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:5px 0} .csp-drow span{font-size:13px;color:var(--csx-ink-2);flex:none} .csp-drow b{font-size:13.5px;font-weight:600;color:var(--csx-ink);text-align:right;min-width:0} .csp-dsvc{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .csp-dnote{margin:8px 0 0;font-size:12px;color:var(--csx-ink-3);line-height:1.5} .csp-dfoot{margin-top:20px} .csp-dfoot .csx-btn{width:100%;justify-content:center} @media (max-width:1200px){ /* tighten the text columns but keep the services column wide enough that two * chips (e.g. Photo + Floor plan) stay on ONE line, never stacked. */ .csp-row{grid-template-columns:72px minmax(120px,1.2fr) minmax(84px,0.8fr) 112px 74px minmax(168px,1.7fr) auto 30px;gap:12px} .csp-thumb{width:72px;height:54px} } @media (max-width:1140px){ .csp-toolbar{gap:12px} } @media (max-width:900px){ /* stack the row into a readable two-column card — nothing overflows on mobile */ .csp-row{grid-template-columns:72px 1fr;grid-auto-rows:auto;row-gap:10px;padding:16px} .csp-thumb{grid-row:span 2} .csp-pstatus,.csp-ppay,.csp-psvc,.csp-flags,.csp-act{grid-column:2} .csp-client{grid-column:1 / -1} } /* ========================================================================== * SLICE 3 (redesign-0718-101 · 2026-07-19) — three data views ported to the * spacious --csx- shell so /cs reads as one system: * .csb-* /cs/bookings (day-grouped shoot ledger) * .csc-* /cs/clients (roster: stat cards + tier tables, expandable rows) * .csi-* /cs/invoices (AR totals + aging buckets + invoice table) * All colour is --csx-* tokens (light + dark). Service swatches reuse the * canonical .csp-svc-* hues; payment chips reuse .csp-pay. No raw hexes here. * ==========================================================================*/ /* ── shared header search (bookings) ───────────────────────────────────── */ .csb-hsearch{position:relative} .csb-hsearch .csb-si{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--csx-ink-3)} .csb-hsearch input{width:230px;max-width:52vw;height:40px;padding:0 14px 0 38px;border-radius:var(--csx-r-btn); background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink);font-family:inherit;font-size:13.5px;letter-spacing:-.01em} .csb-hsearch input::placeholder{color:var(--csx-ink-3)} .csb-hsearch input:focus{outline:none;border-color:var(--csx-line-2);background:var(--csx-surface)} /* ── filter chips ──────────────────────────────────────────────────────── */ .csb-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px} .csb-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px 9px;border-radius:var(--csx-r-pill); background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink-2); font-size:13px;font-weight:600;letter-spacing:-.01em;text-decoration:none;cursor:pointer; transition:background-color .12s var(--csx-ease),color .12s var(--csx-ease),border-color .12s var(--csx-ease)} .csb-chip:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .csb-chip.is-active{background:var(--csx-accent-soft);color:var(--csx-accent-text);border-color:transparent} .csb-chip .csb-cn{font-size:11.5px;font-weight:600;color:var(--csx-ink-3);font-variant-numeric:tabular-nums} .csb-chip.is-active .csb-cn{color:var(--csx-accent-text)} .csb-totals{font-size:13px;color:var(--csx-ink-2);margin:0 0 22px} .csb-totals strong{color:var(--csx-ink);font-weight:600} /* ── day groups + rows ─────────────────────────────────────────────────── */ .csb-listwrap{padding-bottom:2px} .csb-groups{min-width:0} .csb-group{margin-bottom:28px} .csb-group:last-child{margin-bottom:6px} .csb-ghead{display:flex;align-items:baseline;gap:12px;padding:0 6px 12px} .csb-ghead .csb-gdot{width:9px;height:9px;border-radius:50%;flex:none;align-self:center} .csb-ghead h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--csx-ink)} .csb-ghead h2 .csb-gtoday{color:var(--csx-accent-text);font-weight:700} .csb-ghead .csb-gsub{font-size:12.5px;color:var(--csx-ink-3)} .csb-ghead .csb-gmeta{margin-left:auto;font-size:12.5px;color:var(--csx-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap} .csb-ghead .csb-gmeta strong{color:var(--csx-ink);font-weight:600} .csb-group.is-today .csb-panel{box-shadow:0 0 0 1.5px var(--csx-accent-soft),var(--csx-shadow-card)} .csb-panel{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);overflow:hidden} .csb-row{display:grid; grid-template-columns:60px minmax(160px,1.5fr) minmax(120px,1fr) minmax(120px,1.3fr) 108px minmax(84px,96px) 104px 34px; gap:16px;align-items:center;padding:16px 18px 16px 22px;border-bottom:1px solid var(--csx-line); text-decoration:none;color:inherit;transition:background-color .12s var(--csx-ease)} .csb-row:last-child{border-bottom:0} .csb-row:hover{background:var(--csx-surface-hover)} .csb-time{font-size:13.5px;font-weight:600;color:var(--csx-ink);font-variant-numeric:tabular-nums;white-space:nowrap} .csb-time.muted{color:var(--csx-ink-3);font-weight:500} .csb-prop{min-width:0} .csb-prop b{display:block;font-size:14.5px;font-weight:600;color:var(--csx-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csb-prop span{display:block;font-size:12.5px;color:var(--csx-ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csb-agent{display:flex;align-items:center;gap:10px;min-width:0} .csb-agent .csx-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none} .csb-agent .csb-an{min-width:0} .csb-agent .csb-an b{display:block;font-size:13px;font-weight:600;color:var(--csx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csb-agent .csb-an span{display:block;font-size:11.5px;color:var(--csx-ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csb-svc{display:flex;flex-wrap:wrap;gap:6px;min-width:0} .csb-amt{text-align:right;font-size:14px;font-weight:600;color:var(--csx-ink);font-variant-numeric:tabular-nums;white-space:nowrap} .csb-amt.muted{color:var(--csx-ink-3);font-weight:500} .csb-amt .csb-travel{display:block;font-size:11px;font-weight:500;color:var(--csx-st-violet-tx);margin-top:2px} .csb-editcell{display:flex;justify-content:flex-end} .csb-edit{width:32px;height:32px;border-radius:9px;color:var(--csx-ink-3);display:grid;place-items:center;cursor:pointer;background:none;border:0;font-size:15px;line-height:1} .csb-edit:hover{background:var(--csx-surface-2);color:var(--csx-ink)} /* payment method dropdown ("Paid via ▾") on invoiced rows — native popover * (top layer) so it is never clipped by the panel's overflow:hidden */ .csb-pay-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px 7px;border-radius:var(--csx-r-pill); border:1px solid var(--csx-st-green);background:var(--csx-st-green-bg);color:var(--csx-st-green-tx); font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap} .csb-pay-btn:hover{background:var(--csx-accent-soft)} .csb-pay-pop{position:fixed;margin:0;inset:auto;padding:6px;min-width:150px; background:var(--csx-surface);border:1px solid var(--csx-line-2);border-radius:var(--csx-r-md);box-shadow:var(--csx-shadow-pop)} .csb-pay-pop::backdrop{background:transparent} .csb-pay-pop button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:0;background:none; font-family:inherit;font-size:13px;font-weight:500;color:var(--csx-ink);cursor:pointer} .csb-pay-pop button:hover{background:var(--csx-surface-hover)} /* per-leg drive divider — reuses the shared .cs-drive-pill component */ .csb-driverow{padding:8px 20px 8px 22px;border-bottom:1px solid var(--csx-line);display:flex} .csb-empty{padding:56px 24px;text-align:center;color:var(--csx-ink-3);font-size:13.5px; background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card)} @media (max-width:1200px){ .csb-row{grid-template-columns:56px minmax(140px,1.5fr) minmax(104px,1fr) minmax(104px,1.2fr) 100px 84px 96px 32px;gap:12px} } @media (max-width:900px){ /* stack into a compact card — agent + amount drop under the address */ .csb-row{grid-template-columns:52px 1fr auto;grid-auto-rows:auto;row-gap:10px;padding:16px} .csb-agent,.csb-svc{grid-column:2 / -1} .csb-amt{grid-column:3;grid-row:1} } /* ========================================================================== * CLIENTS (.csc-*) * ==========================================================================*/ .csc-group{margin-bottom:38px} .csc-group:last-child{margin-bottom:8px} /* Strict vertical axis (polish 07-20): every tier table is a SEPARATE , * so auto-layout let each one size its columns independently → the money columns * (Bookings / LTV / Outstanding / Last shoot) drifted between groups. Pin one * fixed column template so the right-aligned tabular figures line up straight * down the whole roster. Text cells truncate rather than force width. */ .csc-group .csx-table{table-layout:fixed} .csc-group .csx-table th:nth-child(1),.csc-group .csx-table td:nth-child(1){width:24%} .csc-group .csx-table th:nth-child(2),.csc-group .csx-table td:nth-child(2){width:17%} .csc-group .csx-table th:nth-child(3),.csc-group .csx-table td:nth-child(3){width:11%} .csc-group .csx-table th:nth-child(4),.csc-group .csx-table td:nth-child(4){width:13%} .csc-group .csx-table th:nth-child(5),.csc-group .csx-table td:nth-child(5){width:14%} .csc-group .csx-table th:nth-child(6),.csc-group .csx-table td:nth-child(6){width:11%} .csc-group .csx-table th:nth-child(7),.csc-group .csx-table td:nth-child(7){width:10%} .csc-summary>td{overflow:hidden} .csc-nm b{overflow:hidden;text-overflow:ellipsis} /* Polish 07-20: the filled pill read as a disabled button. Restyled to a plain * muted status label with a small leading dot (the shared chip-dot language) so * it clearly signals mode, not an action. */ .csc-mode{display:inline-flex;align-items:center;gap:6px;padding:0; border:0;background:none;font-size:12.5px;font-weight:500;color:var(--csx-ink-2);white-space:nowrap} .csc-mode::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--csx-ink-3)} .csc-chev{color:var(--csx-ink-3);transition:transform .16s var(--csx-ease);flex:none} .csc-open>td .csc-chev{transform:rotate(180deg)} .csc-namec{display:flex;align-items:center;gap:12px;min-width:0} .csc-namec .csx-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none} .csc-nm{min-width:0} .csc-nm b{display:block;font-size:14px;font-weight:600;color:var(--csx-ink);letter-spacing:-.01em;white-space:nowrap} .csc-nm span{display:block;font-size:12px;color:var(--csx-ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:168px} /* cap the brokerage cell so a long name can't force the roster table wider than * its card (keeps every column — incl. Last shoot / Delivery — on screen). */ .csc-summary .csx-pkg{max-width:140px} /* Outstanding balance = the shared tinted danger chip (never raw red text). */ .csc-warn{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:12px; background:var(--csx-st-red-bg);color:var(--csx-st-red-tx);border:1px solid transparent; font-size:12px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums} .csc-detail{display:none;background:var(--csx-surface-2)} .csc-detail.is-open{display:table-row} .csc-detail>td{padding:0;border-bottom:1px solid var(--csx-line)} .csc-dwrap{padding:22px 24px 26px} .csc-profile{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:22px} .csc-pk{font-size:11px;font-weight:600;color:var(--csx-ink-3);letter-spacing:.03em;text-transform:uppercase;margin-bottom:9px} .csc-pl{font-size:13.5px;color:var(--csx-ink);margin-bottom:4px} .csc-pl.muted{color:var(--csx-ink-2);font-size:12.5px} .csc-pl strong{font-weight:700;font-variant-numeric:tabular-nums} .csc-imp{margin-top:8px;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--csx-r-btn); border:1px solid var(--csx-line-2);background:var(--csx-surface);color:var(--csx-ink);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer} .csc-imp:hover{background:var(--csx-surface-hover)} .csc-imp:disabled{opacity:.6;cursor:default} .csc-recent-t{font-size:11px;font-weight:600;color:var(--csx-ink-3);letter-spacing:.03em;text-transform:uppercase;margin-bottom:10px} /* mini recent-bookings list sits INSIDE the expanded detail (already a stepped * surface) — no outer border, just a background step so we never nest frames. */ .csc-mini{border:0;border-radius:var(--csx-r-md);overflow:hidden;background:var(--csx-surface)} .csc-mini a{display:grid;grid-template-columns:96px minmax(160px,1.6fr) 120px 110px 118px;gap:14px;align-items:center; padding:12px 16px;border-bottom:1px solid var(--csx-line);text-decoration:none;color:inherit;transition:background-color .12s var(--csx-ease)} .csc-mini a:last-child{border-bottom:0} .csc-mini a:hover{background:var(--csx-surface-hover)} .csc-mini .csc-ord{font-size:12px;font-weight:600;color:var(--csx-ink-2);font-variant-numeric:tabular-nums} .csc-mini .csc-maddr{font-size:13px;color:var(--csx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csc-mini .csc-mdate{font-size:12.5px;color:var(--csx-ink-3);white-space:nowrap} .csc-mini .csc-mamt{text-align:right;font-size:13px;font-weight:600;color:var(--csx-ink);font-variant-numeric:tabular-nums} .csc-mini .csc-mstat{text-align:right} .csc-mini-empty{padding:18px;color:var(--csx-ink-3);font-size:13px} @media (max-width:900px){ .csc-profile{grid-template-columns:1fr} } /* ========================================================================== * INVOICES (.csi-*) * ==========================================================================*/ .csi-badge{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:12px; font-size:12px;font-weight:500;letter-spacing:-.01em;border:1px solid transparent;white-space:nowrap; font-variant-numeric:tabular-nums} .csi-badge.ok{background:var(--csx-st-green-bg);color:var(--csx-st-green-tx)} .csi-badge.warn{background:var(--csx-st-amber-bg);color:var(--csx-st-amber-tx)} .csi-badge.err{background:var(--csx-st-red-bg);color:var(--csx-st-red-tx)} .csi-badge.neutral{background:var(--csx-chip-step);color:var(--csx-ink-2);border-color:transparent} .csi-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:28px} .csi-aging{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:44px} /* Polish 07-20: the four aging buckets sat cramped — give them ~8px more * internal padding so the figure + meta breathe (totals cards stay 20/22). */ .csi-aging .csi-card{padding:28px 28px} .csi-card{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-md);padding:20px 22px; box-shadow:var(--csx-shadow-card);text-decoration:none;display:block;position:relative;overflow:hidden; transition:background-color .12s var(--csx-ease),box-shadow .12s var(--csx-ease)} .csi-card:hover{background:var(--csx-surface-hover)} .csi-card.is-active{box-shadow:0 0 0 1.5px var(--csx-accent),var(--csx-shadow-card)} /* Aging cards match every other card — no invented colour border. The bucket * tone rides a tinted status dot inside the label, reusing the shared chip-dot * language. */ .csi-clabel{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--csx-ink-2);margin-bottom:10px} .csi-clabel::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--csx-ink-3)} .csi-card[data-tone="ok"] .csi-clabel::before{background:var(--csx-st-green)} .csi-card[data-tone="warn"] .csi-clabel::before{background:var(--csx-st-amber)} .csi-card[data-tone="danger"] .csi-clabel::before{background:var(--csx-st-red)} .csi-cval{font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--csx-ink);font-variant-numeric:tabular-nums;line-height:1} .csi-cmeta{font-size:12px;color:var(--csx-ink-3);margin-top:9px} .csi-actcell{display:flex;gap:8px;justify-content:flex-end;align-items:center} .csi-abtn{padding:7px 12px;border-radius:var(--csx-r-btn);border:1px solid var(--csx-line-2);background:var(--csx-surface); color:var(--csx-ink);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap} .csi-abtn:hover{background:var(--csx-surface-hover)} .csi-abtn.primary{background:var(--csx-accent);color:var(--csx-accent-ink);border-color:var(--csx-accent)} .csi-abtn.primary:hover{background:var(--csx-accent-hover);border-color:var(--csx-accent-hover)} .csi-abtn:disabled{opacity:.45;cursor:default} .csi-abtn:disabled:hover{background:var(--csx-surface)} .csi-paidnote{font-size:12px;color:var(--csx-ink-3);font-variant-numeric:tabular-nums} .csi-idcell b{font-size:13.5px;font-weight:700;color:var(--csx-ink);font-variant-numeric:tabular-nums;display:block} .csi-idcell span{font-size:11px;color:var(--csx-ink-3);display:block;margin-top:1px} @media (max-width:1140px){ .csi-totals{grid-template-columns:1fr;gap:16px} .csi-aging{grid-template-columns:repeat(2,1fr)} } /* ========================================================================== * SLICE 4 (redesign-0718-101 · 2026-07-19) — the last four /cs views ported to * the spacious --csx- shell so the whole backend reads as one system: * .cspipe-* /cs/pipeline (kanban board) * .csin-* /cs/inbox (mini-stats + leads + e-transfer reconciliation) * .csset-* /cs/settings (section sidebar + cards + hairline setting rows) * .cscal ... /cs/calendar (scoped recolor of the existing week-grid classes — * the grid + drag logic keep their .cs-cal-*/.cs-tl-* class names; * these overrides only re-point colour/spacing to --csx- tokens so * the timeline works in BOTH light + dark) * All colour is --csx-* tokens. No raw hexes except the shared red danger text. * ==========================================================================*/ /* ── PIPELINE (.cspipe-*) ─────────────────────────────────────────────────── */ .cspipe-wrap{max-width:1360px} .cspipe-board{display:flex;gap:20px;overflow-x:auto;padding-bottom:12px;align-items:flex-start} .cspipe-col{flex:0 0 300px;width:300px;background:var(--csx-lane);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);display:flex;flex-direction:column} .cspipe-colhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 14px;border-bottom:1px solid var(--csx-line)} .cspipe-coltitle{display:flex;align-items:center;gap:10px;min-width:0} .cspipe-cdot{width:9px;height:9px;border-radius:50%;flex:none} .cspipe-coltitle>div{min-width:0} .cspipe-coltitle h2{margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--csx-ink);white-space:nowrap} .cspipe-colblurb{margin:2px 0 0;font-size:12px;color:var(--csx-ink-3);white-space:nowrap} .cspipe-count{font-size:12px;font-weight:600;color:var(--csx-ink-2);background:var(--csx-surface);border:1px solid var(--csx-line);min-width:22px;height:20px;padding:0 6px;border-radius:var(--csx-r-pill);display:grid;place-items:center;flex:none} .cspipe-colmeta{font-size:13px;font-weight:600;color:var(--csx-ink-2);white-space:nowrap;font-variant-numeric:tabular-nums} .cspipe-body{display:flex;flex-direction:column;gap:12px;padding:14px;min-height:120px;transition:background-color .12s var(--csx-ease),box-shadow .12s var(--csx-ease);border-radius:0 0 var(--csx-r-lg) var(--csx-r-lg)} .cspipe-body.is-drop-target{background:var(--csx-accent-soft);box-shadow:inset 0 0 0 1.5px var(--csx-accent)} .cspipe-empty{padding:26px 12px;text-align:center;font-size:12.5px;color:var(--csx-ink-3);border:1.5px dashed var(--csx-line-2);border-radius:var(--csx-r-md)} .cspipe-card{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-md);box-shadow:var(--csx-shadow-card);padding:14px 15px;cursor:grab;transition:box-shadow .12s var(--csx-ease);color:var(--csx-ink)} .cspipe-card:hover{box-shadow:var(--csx-shadow-pop)} .cspipe-card:active{cursor:grabbing} .cspipe-card.is-dragging{opacity:.5} .cspipe-cardhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px} .cspipe-order{font-size:12px;font-weight:600;color:var(--csx-ink-3)} .cspipe-value{font-size:13.5px;font-weight:700;color:var(--csx-ink)} .cspipe-addr{margin:0 0 12px;font-size:14.5px;font-weight:600;letter-spacing:-.015em;color:var(--csx-ink);line-height:1.3} .cspipe-meta{display:flex;align-items:center;gap:9px;margin-bottom:13px;min-width:0} .cspipe-meta .csx-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;letter-spacing:0} .cspipe-mtxt{min-width:0} .cspipe-mtxt b{display:block;font-size:12.5px;font-weight:600;color:var(--csx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cspipe-mtxt span{display:block;font-size:11.5px;color:var(--csx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cspipe-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:11px;border-top:1px solid var(--csx-line)} .cspipe-time{font-size:11.5px;color:var(--csx-ink-3);white-space:nowrap} /* Polish 07-20: ghost / tertiary treatment — the bordered surface button read as * cluttered with two per card. Now transparent with 90% cream text (--csx-ink) * so it's clearly clickable without boxing in; a soft chip-step fill on hover * (then emerald on the deliberate hover-hold) keeps the affordance. Drag intact. */ .cspipe-advance{display:inline-flex;align-items:center;gap:5px;padding:6px 10px 7px;border-radius:var(--csx-r-btn);border:1px solid transparent;background:transparent;color:var(--csx-ink);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:background-color .12s var(--csx-ease),color .12s var(--csx-ease)} .cspipe-advance .csx-ico{color:var(--csx-ink-3)} .cspipe-advance:hover{background:var(--csx-accent-soft);color:var(--csx-accent-text)} .cspipe-advance:hover .csx-ico{color:var(--csx-accent-text)} .cspipe-done{font-size:11.5px;font-weight:600;color:var(--csx-st-green-tx)} @media (max-width:900px){ .cspipe-col{flex-basis:82vw;width:82vw} } /* ── INBOX (.csin-*) ──────────────────────────────────────────────────────── */ .csin-wrap{max-width:1200px} .csin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:32px} .csin-stat{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-md);padding:22px 24px;box-shadow:var(--csx-shadow-card)} .csin-slabel{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--csx-ink-2);margin-bottom:12px} .csin-sdot{width:8px;height:8px;border-radius:50%;flex:none} .csin-sval{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--csx-ink)} .csin-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:8px} .csin-panel{padding:0} .csin-phead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--csx-line)} .csin-phead h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--csx-ink)} .csin-attn{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--csx-line);text-decoration:none} .csin-attn:last-child{border-bottom:0} .csin-attn:hover{background:var(--csx-surface-hover)} .csin-ring{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none} .csin-ring.violet{background:var(--csx-st-violet-bg);color:var(--csx-st-violet-tx)} .csin-ring.amber{background:var(--csx-st-amber-bg);color:var(--csx-st-amber-tx)} .csin-ring.green{background:var(--csx-st-green-bg);color:var(--csx-st-green-tx)} .csin-atxt{min-width:0;flex:1} .csin-atxt b{display:block;font-size:14px;font-weight:600;color:var(--csx-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csin-atxt span{display:block;font-size:12.5px;color:var(--csx-ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .csin-abtn{flex:none;padding:8px 14px 9px;font-size:13px} .csin-ago{flex:none;font-size:12.5px;font-weight:600;color:var(--csx-ink-2);white-space:nowrap} .csin-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; min-height:180px;padding:40px 24px;text-align:center;color:var(--csx-ink-3);font-size:13.5px} /* Icon inherits the muted ink-3 stroke (~38%); polish 07-20 drops the extra .4 * multiplier that was pushing the effective opacity to ~15% (too dim). */ .csin-empty .csin-empty-ic{width:48px;height:48px;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;opacity:1} .csin-empty p{margin:0} .csin-etrow{display:grid;grid-template-columns:minmax(120px,1.3fr) 118px minmax(90px,1fr) minmax(150px,1.3fr);gap:14px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--csx-line)} .csin-etrow:last-child{border-bottom:0} .csin-etwho b{display:block;font-size:13.5px;font-weight:600;color:var(--csx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csin-etwho span{display:block;font-size:11.5px;color:var(--csx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csin-etamt b{display:block;font-size:14px;font-weight:700;color:var(--csx-ink)} .csin-etamt span{display:block;font-size:11.5px;color:var(--csx-ink-3);margin-top:1px} .csin-etref{font-size:12.5px;color:var(--csx-ink-2);display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap} .csin-reftag{font-size:10.5px;font-weight:600;color:var(--csx-ink-3);background:var(--csx-surface-2);border:1px solid var(--csx-line);padding:2px 7px;border-radius:var(--csx-r-pill)} .csin-noref{color:var(--csx-ink-3)} .csin-sel{appearance:none;-webkit-appearance:none;width:100%;height:38px;padding:0 12px;border-radius:var(--csx-r-btn);background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink);font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer} .csin-sel:hover{background:var(--csx-surface-hover)} .csin-sel:focus{outline:none;border-color:var(--csx-line-2);background:var(--csx-surface)} @media (max-width:1140px){ .csin-stats{grid-template-columns:1fr;gap:16px} .csin-grid{grid-template-columns:1fr} } /* ── SETTINGS (.csset-*) ──────────────────────────────────────────────────── */ .csset-wrap{max-width:1120px} .csset-layout{display:grid;grid-template-columns:230px 1fr;gap:32px;align-items:start} .csset-side{position:sticky;top:32px} .csset-nav{display:flex;flex-direction:column;gap:2px} .csset-navitem{display:block;padding:10px 14px;border-radius:var(--csx-r-btn);font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:var(--csx-ink-2);text-decoration:none;transition:background-color .12s var(--csx-ease),color .12s var(--csx-ease)} .csset-navitem:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .csset-navitem.is-active{background:var(--csx-nav-active);color:var(--csx-ink);font-weight:600} .csset-body{min-width:0} .csset-card{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);padding:28px 30px} .csset-chead{margin-bottom:20px} .csset-chead h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--csx-ink)} .csset-chead p{margin:6px 0 0;font-size:13px;color:var(--csx-ink-2);line-height:1.5} .csset-card code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:var(--csx-surface-2);border:1px solid var(--csx-line);border-radius:6px;padding:1px 6px;color:var(--csx-ink)} .csset-grid{display:flex;flex-direction:column} .csset-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--csx-line)} .csset-row:last-child{border-bottom:0} .csset-rlabel{font-size:13.5px;color:var(--csx-ink);font-weight:500} .csset-inwrap{position:relative;display:inline-flex;align-items:center;gap:8px} .csset-input{width:150px;height:38px;padding:0 12px;border-radius:var(--csx-r-btn);background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink);font-family:inherit;font-size:13.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums} .csset-input.has-pre{padding-left:26px} .csset-input:focus{outline:none;border-color:var(--csx-accent);background:var(--csx-surface)} .csset-pre{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--csx-ink-3);pointer-events:none} .csset-suf{font-size:13px;color:var(--csx-ink-3);min-width:14px} .csset-swatches{display:inline-flex;align-items:center;gap:8px} .csset-swatch{width:34px;height:34px;padding:0;border:1px solid var(--csx-line-2);border-radius:9px;background:none;cursor:pointer} .csset-swatch::-webkit-color-swatch-wrapper{padding:2px} .csset-swatch::-webkit-color-swatch{border:0;border-radius:6px} .csset-switchwrap{display:inline-flex} .csset-switch{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:999px;background:var(--csx-line-2);border:1px solid var(--csx-line);position:relative;cursor:pointer;transition:background-color .15s var(--csx-ease);flex:none} .csset-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--csx-surface);box-shadow:var(--csx-shadow-knob);transition:transform .15s var(--csx-ease)} .csset-switch:checked{background:var(--csx-accent);border-color:var(--csx-accent)} .csset-switch:checked::after{transform:translateX(18px)} .csset-note{margin:20px 0 0;font-size:12px;color:var(--csx-ink-3);line-height:1.55} .csset-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px} .csset-list li{font-size:13px;color:var(--csx-ink-2);line-height:1.55;padding-left:16px;position:relative} .csset-list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--csx-ink-3)} .csset-intgrid{display:flex;flex-direction:column;gap:12px} .csset-int{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--csx-line);border-radius:var(--csx-r-md);background:var(--csx-surface-2)} .csset-int-main{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap} .csset-int-hint{font-size:11.5px;color:var(--csx-ink-3)} .csset-int-state{font-size:12.5px;font-weight:600;color:var(--csx-st-red-tx);white-space:nowrap} .csset-int-state.is-ok{color:var(--csx-st-green-tx)} .csset-raw{margin-top:20px} .csset-raw summary{font-size:12.5px;color:var(--csx-ink-2);cursor:pointer} .csset-raw-pre{margin:12px 0 0;padding:14px 16px;background:var(--csx-surface-2);border:1px solid var(--csx-line);border-radius:var(--csx-r-md);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--csx-ink-2);overflow-x:auto;max-height:340px} .csset-danger-grid{display:flex;flex-direction:column;gap:12px;align-items:flex-start} .csset-danger{padding:11px 16px;border-radius:var(--csx-r-btn);border:1px solid var(--csx-st-red);background:var(--csx-st-red-bg);color:var(--csx-st-red-tx);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer} .csset-danger:hover{background:var(--csx-st-red);border-color:var(--csx-st-red);color:rgba(255,253,244,.95)} .csset-empty{padding:40px 24px;text-align:center;color:var(--csx-ink-3);font-size:13.5px} @media (max-width:900px){ .csset-layout{grid-template-columns:1fr;gap:20px} .csset-side{position:static} .csset-nav{flex-direction:row;flex-wrap:wrap} } /* ── UNIFORMITY SWEEP (2026-07-20 · uni) ────────────────────────────────────── * Every text input / select shares one visible field border so hit areas are * obvious in BOTH themes (the dark .06 hairline was near-invisible). Settings * inputs also standardise to the 40px / 11px-radius control height. */ .csx-search input, .csp-tsearch input, .csp-sel select, .csb-hsearch input, .csin-sel, .csset-input{border-color:var(--csx-field-border)} .csset-input{height:40px;border-radius:var(--csx-r-btn)} /* ── CALENDAR (.cscal ...) — recolor the existing week-grid to --csx- tokens ── */ .cscal-wrap{max-width:1460px} .cscal-weeknav{display:inline-flex;align-items:center;gap:8px} .cscal-today{height:40px;padding:0 16px} .cscal-colorbtn .csx-ico{color:var(--csx-ink-2)} .cscal-note{text-align:left;max-width:64ch;margin-left:0} .cscal .cs-cal-week-grid{gap:10px;padding-bottom:14px} .cscal .cs-cal-card{background:var(--csx-surface);border:1px solid var(--csx-line);border-left:3px solid var(--csx-line-2);border-radius:var(--csx-r-md);box-shadow:var(--csx-shadow-card)} .cscal .cs-cal-card.is-today{border-color:var(--csx-accent-soft);box-shadow:inset 0 0 0 1px var(--csx-accent-soft),var(--csx-shadow-card)} .cscal .cs-cal-week-grid .cs-cal-date{border-bottom:1px solid var(--csx-line)} .cscal .cs-cal-dow{font-size:12px;font-weight:600;color:var(--csx-ink-2)} .cscal .cs-cal-dnum{color:var(--csx-ink)} .cscal .cs-cal-month{color:var(--csx-ink-3)} .cscal .cs-cal-drive-total{color:var(--csx-ink-3)} .cscal .cs-tl-gutter-row{color:var(--csx-ink-3)} .cscal .cs-tl-hour{border-top:1px solid var(--csx-line)} .cscal .cs-tl-half{border-top:1px dashed var(--csx-line)} .cscal .cs-tl-empty{color:var(--csx-ink-3)} .cscal .cs-tl-block{background:var(--client-bg,var(--csx-surface-2));border:1px solid var(--csx-line-2);border-left:3px solid var(--client-accent,var(--csx-accent))} .cscal .cs-tl-block:hover{box-shadow:0 0 0 1px var(--client-accent,var(--csx-accent)),var(--csx-shadow-card)} .cscal .cs-tl-grip::after{background:var(--csx-ink-3)} .cscal .cs-cal-chip.cs-tl-chip{color:var(--csx-ink)} /* Polish 07-20: give the event block a clear text hierarchy — the property * ADDRESS reads semi-bold + full ink, while the time and agent step back to a * regular, muted weight. Keeps the per-client colour tint intact. */ .cscal .cs-cal-chip-time{color:var(--csx-ink-2);font-weight:500} .cscal .cs-cal-chip-title{color:var(--csx-ink);font-weight:600} .cscal .cs-cal-chip-meta{color:var(--csx-ink-2);font-weight:400} .cscal .cs-wx-text{color:var(--csx-ink-2)} .cscal .cs-tl-travel{background:repeating-linear-gradient(45deg,var(--csx-nav-active) 0 6px,transparent 6px 12px);color:var(--csx-ink-2)} .cscal .cs-tl-block.is-expanded .cs-tl-drawer{background:var(--csx-surface);border:1px solid var(--csx-line-2);box-shadow:var(--csx-shadow-pop)} .cscal .cs-tl-drawer-title{color:var(--csx-ink)} .cscal .cs-tl-drawer-sub{color:var(--csx-ink-2)} .cscal .cs-tl-drawer-close{background:var(--csx-surface);border:1px solid var(--csx-line);color:var(--csx-ink-2)} .cscal .cs-tl-drawer-close:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .cscal .cs-tl-drawer-link{color:var(--csx-accent-text)} /* ========================================================================== * SLICE 5 (redesign-0718-101 · 2026-07-19 · s5) — DASHBOARD EDIT MODE + WIDGETS * * Additive + fully namespaced (.csw-*). OUTSIDE edit mode the widget wrappers * add ZERO box (no border/background/margin) so the four default widgets render * byte-for-byte as the previous build; only the unchanged inner .csx-* markup * paints and its own margins reproduce the original spacing. The drag bar, * dashed outline and remove buttons appear ONLY when .csx-wrap gains * .is-editing. Library widgets (today / this-week / weather / quick-access) use * the shared .csw-card surface so they match the existing panels in light+dark. * ==========================================================================*/ .csw-grid{display:block} .csw{position:relative} .csw-body{min-width:0} /* edit affordances — hidden until edit mode */ .csw-bar{display:none} .csw-edithint{display:none} .csw-addbtn{display:none} .csx-wrap.is-editing .csw-edithint{ display:flex;align-items:center;gap:9px;margin:0 0 22px;padding:11px 16px; border:1px dashed var(--csx-line-2);border-radius:var(--csx-r-md); background:var(--csx-surface-2);color:var(--csx-ink-2);font-size:13px;line-height:1.4} .csx-wrap.is-editing .csw-edithint .csx-ico{color:var(--csx-ink-3);flex:none} .csx-wrap.is-editing .csw{ outline:1.5px dashed var(--csx-line-2);outline-offset:8px;border-radius:14px;margin-bottom:28px} .csx-wrap.is-editing .csw:last-child{margin-bottom:0} .csx-wrap.is-editing .csw-body{pointer-events:none} .csx-wrap.is-editing .csw[draggable="true"]{cursor:grab} .csw.csw-dragging{opacity:.42} .csx-wrap.is-editing .csw-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px} .csw-handle{display:inline-flex;align-items:center;gap:9px;cursor:grab;padding:6px 12px 7px; border-radius:var(--csx-r-pill);border:1px solid var(--csx-line-2);background:var(--csx-surface); color:var(--csx-ink-2);font-size:12.5px;font-weight:600;letter-spacing:-.01em} .csw-handle:active{cursor:grabbing} .csw-handle .csx-ico{color:var(--csx-ink-3);fill:currentColor;stroke:none} .csw-x{margin-left:auto;flex:none;width:30px;height:30px;display:grid;place-items:center; border-radius:9px;border:1px solid var(--csx-line-2);background:var(--csx-surface);color:var(--csx-ink-2);cursor:pointer} .csw-x:hover{background:var(--csx-st-red-bg);border-color:var(--csx-st-red);color:var(--csx-st-red-tx)} .csw-x .csx-ico{width:15px;height:15px;stroke-width:2} /* header controls — edit toggle + add-widget menu */ .csw-editbtn .csx-ico{color:var(--csx-ink-2)} .csx-wrap.is-editing .csw-editbtn{background:var(--csx-accent);color:var(--csx-accent-ink);border-color:var(--csx-accent)} .csx-wrap.is-editing .csw-editbtn .csx-ico{color:var(--csx-accent-ink)} .csx-wrap.is-editing .csw-addbtn{display:inline-flex} .csw-addwrap{position:relative;display:inline-flex} .csw-addmenu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:290px; background:var(--csx-surface);border:1px solid var(--csx-line-2);border-radius:var(--csx-r-md); box-shadow:var(--csx-shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px} .csw-addmenu[hidden]{display:none} .csw-additem{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left; padding:10px 12px;border:0;border-radius:9px;background:none;cursor:pointer} .csw-additem:hover{background:var(--csx-surface-hover)} .csw-additem-t{font-size:13.5px;font-weight:600;color:var(--csx-ink);letter-spacing:-.01em} .csw-additem-d{font-size:12px;color:var(--csx-ink-3);line-height:1.35} .csw-addempty{padding:14px 12px;font-size:12.5px;color:var(--csx-ink-3);text-align:center} /* shared library-widget card */ .csw-card{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg); box-shadow:var(--csx-shadow-card);padding:22px 24px 24px;margin-bottom:44px} .csw-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:18px} .csw-hd h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--csx-ink)} .csw-sub{font-size:12.5px;color:var(--csx-ink-3)} .csw-hlink{margin-left:auto;font-size:13px;font-weight:600;color:var(--csx-ink-2); display:inline-flex;align-items:center;gap:5px;text-decoration:none} .csw-hlink:hover{color:var(--csx-ink)} /* today's work list */ .csw-tlist{display:flex;flex-direction:column;margin:-6px -8px} .csw-trow{display:flex;align-items:center;gap:16px;padding:12px 8px;border-radius:var(--csx-r-md);text-decoration:none;color:inherit} .csw-trow:hover{background:var(--csx-surface-hover)} .csw-trow + .csw-trow{border-top:1px solid var(--csx-line)} .csw-ttime{font-size:13.5px;font-weight:600;color:var(--csx-ink);white-space:nowrap;min-width:62px} .csw-tmain{min-width:0;flex:1} .csw-tmain b{display:block;font-size:14px;font-weight:600;color:var(--csx-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csw-tmain span{display:block;font-size:12.5px;color:var(--csx-ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csw-tpkg{font-size:12.5px;color:var(--csx-ink-2);white-space:nowrap;flex:none} /* this-week mini calendar */ .csw-week{display:grid;grid-template-columns:repeat(7,1fr);gap:10px} .csw-day{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 6px 13px; border:0;border-radius:var(--csx-r-md);background:var(--csx-surface-2); text-decoration:none;color:inherit;transition:background-color .12s var(--csx-ease),box-shadow .12s var(--csx-ease)} .csw-day:hover{background:var(--csx-surface-hover)} .csw-day.is-today{box-shadow:inset 0 0 0 1.5px var(--csx-accent)} .csw-dow{font-size:11px;font-weight:600;color:var(--csx-ink-3);text-transform:uppercase;letter-spacing:.03em} .csw-dnum{font-size:19px;font-weight:700;color:var(--csx-ink);letter-spacing:-.02em;line-height:1} .csw-day.is-today .csw-dnum{color:var(--csx-accent-text)} .csw-dmeta{font-size:11px;color:var(--csx-ink-2);white-space:nowrap} .csw-ddots{display:flex;gap:3px;min-height:5px} .csw-dot{width:5px;height:5px;border-radius:50%;background:var(--csx-st-violet)} /* weather strip */ .csw-wx{display:grid;grid-template-columns:repeat(7,1fr);gap:8px} .csw-wxcell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px; border:0;border-radius:var(--csx-r-md);background:var(--csx-surface-2)} .csw-wxcell.is-today{box-shadow:inset 0 0 0 1.5px var(--csx-accent)} .csw-wxdow{font-size:11px;font-weight:600;color:var(--csx-ink-3);text-transform:uppercase;letter-spacing:.02em} .csw-wxic{font-size:19px;line-height:1} .csw-wxt{font-size:14px;font-weight:700;color:var(--csx-ink)} .csw-wxr{font-size:11px;color:var(--csx-st-violet-tx);min-height:14px} /* quick-access tiles */ .csw-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:12px} .csw-tile{position:relative;display:flex;align-items:center;gap:12px;padding:14px 15px; border:0;border-radius:var(--csx-r-md);background:var(--csx-surface-2); text-decoration:none;color:inherit;transition:background-color .12s var(--csx-ease)} .csw-tile:hover{background:var(--csx-surface-hover)} .csw-tile-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:13px;font-weight:700;letter-spacing:0} .csw-tile-lb{font-size:13.5px;font-weight:600;color:var(--csx-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csw-tile-ext{position:absolute;top:10px;right:10px;width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;color:var(--csx-ink-3);opacity:0;transition:opacity .12s var(--csx-ease)} .csw-tile:hover .csw-tile-ext{opacity:1} .csw-tile-add{cursor:pointer;font-family:inherit;background:none;border:1.5px dashed var(--csx-line-2)} .csw-tile-add:hover{background:var(--csx-surface-2);border-color:var(--csx-accent)} .csw-tile-plus{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none; font-size:22px;font-weight:400;line-height:1;color:var(--csx-ink-3);background:var(--csx-surface);border:1px solid var(--csx-line)} @media (max-width:1140px){ .csw-week,.csw-wx{grid-template-columns:repeat(4,1fr)} } @media (max-width:640px){ .csw-week,.csw-wx{grid-template-columns:repeat(3,1fr)} .csw-addmenu{width:min(290px,calc(100vw - 48px))} }