:root { --ink:#15212b; --muted:#63717d; --line:#dce4e8; --paper:#fff; --canvas:#eef3f4; --blue:#0b6d7a; --green:#16805a; --amber:#a86a11; --red:#ba3330; --left-pane-width:470px; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:0; }
button,input { font:inherit; }
.hidden { display:none !important; }
.login-layout { min-height:100vh; display:grid; grid-template-columns:minmax(300px,1.1fr) minmax(360px,.9fr); }
.login-brand { background:#0c3454; color:#eef7ff; padding:clamp(40px,8vw,128px); display:flex; flex-direction:column; justify-content:center; }
.brand-mark { display:grid; place-items:center; width:56px; height:56px; color:white; background:#e5202a; font-weight:800; font-size:30px; border-radius:8px; }
.brand-mark.small { width:30px; height:30px; font-size:17px; border-radius:6px; }
.brand-logo { display:block; width:56px; height:56px; object-fit:contain; }.brand-logo-login { margin-bottom:2px; }.brand-logo-sidebar { width:31px; height:31px; flex:0 0 31px; }
.eyebrow { color:var(--muted); font-size:11px; font-weight:750; letter-spacing:0; margin:20px 0 8px; }
.login-brand .eyebrow { color:#9ac9ee; }
.login-brand h1 { font-size:36px; line-height:1.1; margin:0; }
.login-brand p:last-child { max-width:360px; font-size:17px; line-height:1.55; color:#c7ddeb; }
.login-panel { align-self:center; width:min(420px,calc(100% - 48px)); margin:auto; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:36px; box-shadow:0 10px 30px rgba(19,37,54,.08); }
.login-panel h2 { margin:0 0 24px; font-size:23px; }
form { display:grid; gap:17px; }
label { display:grid; gap:7px; color:#344054; font-size:14px; font-weight:650; }
input { width:100%; border:1px solid #c8d2dc; border-radius:5px; padding:11px 12px; outline:none; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(18,102,191,.13); }
form button { display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:5px; padding:12px; color:#fff; background:var(--blue); cursor:pointer; font-weight:700; }
.text-button { margin-top:14px; border:0; padding:0; color:var(--blue); background:transparent; cursor:pointer; font-size:13px; }
.form-error { min-height:18px; margin:0; color:var(--red); font-size:13px; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:235px 1fr; }
.sidebar { background:#102c37; color:#e5edf5; padding:22px 14px; display:flex; flex-direction:column; border-right:1px solid #173f4a; }
.sidebar-brand { display:flex; align-items:center; gap:10px; font-weight:750; padding:0 8px 26px; }
nav { display:grid; gap:3px; }
.nav-item,.logout { display:flex; align-items:center; gap:11px; padding:10px 11px; border:0; color:#b5c5d4; background:transparent; border-radius:5px; text-align:left; }
.nav-item.active { color:white; background:#196a72; }
.nav-item:disabled { opacity:.54; cursor:not-allowed; }
.logout { margin-top:auto; cursor:pointer; }
.workspace { padding:28px clamp(20px,3vw,52px); max-width:1800px; width:100%; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px; }
.topbar .eyebrow { margin:0 0 5px; }
.topbar h1 { font-size:26px; margin:0; }
.topbar-actions { display:flex; align-items:center; gap:10px; }.user-chip { border:1px solid var(--line); padding:8px 11px; background:#fff; border-radius:5px; color:#344054; font-size:13px; }.notification-button { position:relative; }.notification-count { position:absolute; top:-7px; right:-7px; min-width:17px; height:17px; padding:1px 4px; display:grid; place-items:center; border-radius:50%; background:#d13a37; color:white; font-size:10px; font-weight:800; }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.metrics div,.case-panel,.case-detail { background:#fff; border:1px solid var(--line); border-radius:7px; box-shadow:0 4px 16px rgba(20,49,56,.045); }
.metrics div { padding:17px; display:grid; gap:8px; }
.metrics span { color:var(--muted); font-size:13px; }
.metrics strong { font-size:28px; }
.panel-toolbar { display:flex; justify-content:space-between; align-items:center; padding:18px 19px; border-bottom:1px solid var(--line); }
.panel-toolbar h2 { font-size:16px; margin:0; }
.toolbar-actions { display:flex; align-items:center; gap:8px; }
.toolbar-actions select { min-height:32px; max-width:220px; border:1px solid #cfd8e1; border-radius:5px; padding:5px 9px; color:#344054; background:#fff; font:inherit; font-size:13px; }
.icon-button { display:grid; place-items:center; width:32px; height:32px; background:#fff; border:1px solid #cfd8e1; border-radius:5px; cursor:pointer; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th,td { padding:14px 18px; text-align:left; border-bottom:1px solid #edf0f3; font-size:13px; }
th { color:#667085; background:#fafbfc; font-weight:650; }
td { color:#344054; }
.case-row { cursor:pointer; }
.case-row:hover td { background:#f5f9fd; }
.status { display:inline-flex; padding:3px 7px; border-radius:999px; background:#eff4f8; color:#344054; font-size:12px; white-space:nowrap; }
.status-new,.status-waiting_customer_info { background:#fff5e9; color:var(--amber); }
.status-follow_up,.status-quote_sent { background:#eaf3ff; color:#175ea7; }
.status-won { background:#e6f6ed; color:var(--green); }
.empty-state { min-height:260px; display:grid; place-content:center; justify-items:center; gap:8px; color:var(--muted); }
.inbox-layout { display:grid; grid-template-columns:minmax(320px,var(--left-pane-width)) 22px minmax(0,1fr); gap:0; align-items:stretch; min-height:680px; }
.inbox-layout .case-panel { min-width:0; }
.inbox-tabs { display:flex; gap:0; padding:10px 14px; border-bottom:1px solid var(--line); overflow:auto; }
.inbox-tab { flex:0 0 auto; border:0; background:transparent; color:var(--muted); font-size:12px; font-weight:700; padding:7px 9px; border-bottom:2px solid transparent; cursor:pointer; }
.inbox-tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.inbox-layout table { min-width:0; }.inbox-layout th,.inbox-layout td { padding:12px 13px; }.inbox-layout th:nth-child(4),.inbox-layout td:nth-child(4) { display:none; }
.pane-resizer { position:relative; cursor:col-resize; z-index:2; }.pane-resizer::before { content:"⋮"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:18px; height:58px; border:1px solid #cfdbdd; border-radius:8px; background:#fff; color:#5d858a; font-size:18px; line-height:1; box-shadow:0 2px 8px rgba(20,49,56,.08); }.pane-resizer::after { content:""; position:absolute; top:0; bottom:0; left:10px; width:1px; background:#d9e3e5; transition:.15s; }.pane-resizer:hover::before,.is-resizing .pane-resizer::before { color:white; background:var(--blue); border-color:var(--blue); }.pane-resizer:hover::after,.is-resizing .pane-resizer::after { background:var(--blue); width:2px; left:10px; }.is-resizing { cursor:col-resize; user-select:none; }
.case-detail { margin:0 0 0 14px; padding:20px; min-width:0; max-width:100%; overflow:hidden; }
.detail-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; min-width:0; border-bottom:1px solid var(--line); padding-bottom:16px; }.detail-header > * { min-width:0; }
.detail-header .eyebrow { margin:0 0 5px; }.detail-header h2 { margin:0; font-size:20px; }
.detail-section { padding:18px 0; border-bottom:1px solid #edf0f3; }.detail-section:last-child { border-bottom:0; }
.detail-section h3 { font-size:13px; margin:0 0 10px; }.case-summary { margin:0; white-space:pre-wrap; color:#475467; line-height:1.5; }
.facts { display:grid; grid-template-columns:120px 1fr; gap:7px 12px; margin:0; font-size:13px; }.facts dt { color:var(--muted); }.facts dd { margin:0; overflow-wrap:anywhere; }
.case-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; min-width:0; }.case-form label { min-width:0; font-size:12px; }.case-form input,.case-form select,.case-form textarea { box-sizing:border-box; min-width:0; max-width:100%; border:1px solid #c8d2dc; border-radius:5px; padding:9px; width:100%; }.case-form textarea,.case-form .full-width { grid-column:1 / -1; }.case-form textarea { min-height:76px; resize:vertical; }.primary-button { border:0; border-radius:5px; background:var(--blue); color:#fff; padding:10px 12px; font-weight:700; cursor:pointer; width:max-content; }.primary-button:disabled { opacity:.55; }
.timeline { display:grid; gap:10px; }.timeline-item { border-left:2px solid #b9d6ee; padding:2px 0 2px 10px; }.timeline-item strong { font-size:12px; }.timeline-item p { margin:4px 0; font-size:13px; white-space:pre-wrap; }.timeline-item small { color:var(--muted); font-size:11px; }
.case-timeline { display:grid; gap:10px; max-height:430px; overflow:auto; padding:2px 6px 2px 2px; }.case-timeline-item { position:relative; display:grid; gap:5px; border-left:2px solid #b9d6ee; padding:3px 10px 7px 13px; background:#fff; }.case-timeline-item::before { content:""; position:absolute; width:7px; height:7px; left:-5px; top:8px; border-radius:50%; background:#b9d6ee; }.timeline-meta { display:flex; justify-content:space-between; gap:10px; align-items:center; }.timeline-kind,.timeline-status { width:max-content; font-size:11px; font-weight:700; }.timeline-kind { color:#175ea7; }.timeline-status { color:var(--muted); }.case-timeline-item strong { font-size:13px; }.case-timeline-item p { margin:0; color:#475467; font-size:13px; white-space:pre-wrap; }.timeline-message { border-left-color:#1c7c54; background:#f4fbf7; }.timeline-message::before { background:#1c7c54; }.timeline-draft { border-left-color:#a15c00; background:#fffaf0; }.timeline-draft::before { background:#a15c00; }.timeline-note { border-left-color:#6b5bb5; background:#f8f7ff; }.timeline-note::before { background:#6b5bb5; }.timeline-quote { border-left-color:#1266bf; background:#f4f8fd; }.timeline-quote::before { background:#1266bf; }.timeline-task,.timeline-event { border-left-color:#536b82; background:#f7f9fb; }.timeline-task::before,.timeline-event::before { background:#536b82; }
.interactive-item { cursor:pointer; }.interactive-item:hover { border-left-color:var(--blue); background:#f5f9fd; }.interactive-item:focus { outline:2px solid rgba(18,102,191,.35); outline-offset:3px; }.muted-copy { margin:0; color:var(--muted); font-size:13px; }.work-item-detail { padding:22px 19px; }.detail-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }.secondary-button { border:1px solid #cfd8e1; border-radius:5px; color:#344054; background:#fff; padding:10px 12px; font-weight:700; cursor:pointer; }.passkey-button { width:100%; margin-top:10px; display:flex; align-items:center; justify-content:center; gap:8px; }.detail-actions .primary-button { display:inline-flex; align-items:center; text-decoration:none; }
.conversation-thread { max-height:420px; overflow:auto; padding:2px; }.message-inbound { border-left-color:#1c7c54; background:#f4fbf7; }.message-outbound { border-left-color:#1266bf; background:#f4f8fd; }.message-draft { border-left-color:#a15c00; background:#fffaf0; }.reply-form { margin-top:14px; }.reply-form textarea { min-height:94px; }.report-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:19px; }.report-item { border:1px solid var(--line); border-radius:6px; padding:16px; display:grid; gap:7px; }.report-item span { color:var(--muted); font-size:13px; }.report-item strong { font-size:21px; }.module-list { display:grid; gap:1px; }.module-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 19px; border-bottom:1px solid var(--line); text-transform:none; }.module-row strong { text-transform:capitalize; }.module-row small { display:block; color:var(--muted); margin-top:4px; }.module-row input { width:18px; height:18px; accent-color:var(--blue); }
.case-workspace { display:grid; min-width:0; grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr); gap:22px; margin-top:18px; }
.approval-list { display:grid; gap:10px; padding:18px; }.approval-row { border:1px solid var(--line); border-radius:6px; padding:14px; }.approval-row p { margin:5px 0; color:#475467; font-size:13px; }.approval-row small { color:var(--muted); font-size:12px; }
.notification-unread { border-left:4px solid var(--blue); background:#f2fbfb; }.approval-reviewer-form { margin:8px 18px 20px; padding:16px; border:1px solid var(--line); border-radius:6px; max-width:560px; }.checkbox-row { display:flex; align-items:center; gap:9px; }.checkbox-row input { width:17px; height:17px; }
.agenda-workspace { --agenda-left-width:410px; display:grid; grid-template-columns:minmax(300px,var(--agenda-left-width)) 22px minmax(420px,1fr); padding:18px; min-height:620px; }.agenda-tasks { padding-right:18px; }.agenda-calendar { padding-left:18px; }.agenda-tasks h3,.agenda-calendar h3 { margin:0 0 16px; font-size:15px; text-transform:capitalize; }.agenda-list { display:grid; gap:8px; max-height:520px; overflow:auto; }.agenda-task { display:grid; gap:4px; width:100%; text-align:left; border:1px solid var(--line); border-radius:6px; background:#fff; padding:12px; cursor:pointer; }.agenda-task:hover { border-color:#8dbfc2; background:#f5fbfb; }.agenda-task strong { font-size:13px; }.agenda-task span,.agenda-task small { color:var(--muted); font-size:12px; }.calendar-toolbar { display:flex; align-items:center; gap:7px; margin-bottom:16px; }.calendar-toolbar h3 { margin:0 0 0 8px; font-size:17px; text-transform:capitalize; }.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; border:1px solid var(--line); border-right:0; border-bottom:0; }.calendar-weekday { padding:10px 4px; color:var(--muted); font-size:11px; font-weight:800; text-align:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#f8fafb; }.calendar-day { position:relative; min-height:106px; padding:9px; text-align:left; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; color:#334155; cursor:pointer; }.calendar-day:hover { background:#f5fbfb; }.calendar-day.empty { background:#fbfcfc; cursor:default; }.calendar-day.today { box-shadow:inset 0 0 0 2px var(--blue); color:var(--blue); font-weight:800; }.calendar-events { display:grid; gap:3px; margin-top:7px; }.calendar-events span { display:block; overflow:hidden; border-radius:3px; padding:3px 4px; background:#dff2f1; color:#075d66; font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.field-label { display:flex; align-items:center; gap:6px; }.help-tip { width:17px; height:17px; padding:0; border:1px solid #9caeb6; border-radius:50%; background:white; color:var(--blue); font-size:11px; font-weight:800; cursor:help; }.checkbox-row { display:flex; align-items:center; gap:9px; }.checkbox-row input { width:17px; height:17px; }.inventory-toggle { align-self:end; min-height:39px; padding:10px 11px; border:1px solid #c8d2dc; border-radius:5px; background:#f8fbfb; }.upload-card { display:grid; align-content:start; gap:11px; margin:16px 0; padding:18px; border:1px dashed #9bb8bc; border-radius:7px; background:#f8fbfb; }.upload-card h3 { margin:0; font-size:14px; }.file-formats { color:var(--blue); font-weight:800; font-size:11px; }
.integration-flow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0; padding:18px; border:1px solid #cfe0e2; border-radius:7px; background:#f7fbfb; }.flow-step { display:flex; align-items:center; gap:8px; color:#26414a; font-size:13px; }.flow-step span { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#176f78; color:white; font-size:11px; font-weight:800; }.flow-arrow { color:#5c8e92; font-style:normal; }
.chat-pane { min-width:0; border-right:1px solid var(--line); padding-right:20px; }
.context-pane { min-width:0; max-height:calc(100vh - 210px); overflow:auto; padding-right:3px; }.context-pane .case-form { grid-template-columns:minmax(0,1fr); }.context-pane .case-form .full-width { grid-column:auto; }
.chat-pane .detail-section { padding-top:0; border-bottom:0; }.chat-pane .detail-section h3 { font-size:14px; }
.conversation-thread { min-height:330px; max-height:calc(100vh - 370px); padding:10px 6px; background:#f8fafc; border:1px solid #edf0f3; border-radius:6px; }
.customer-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }.customer-tag { display:inline-flex; border-radius:999px; background:#eff4f8; color:#344054; padding:3px 7px; font-size:11px; }

/* Product-wide visual layer: calm commercial workspace with focused interactions. */
:root { --ink:#132a42; --muted:#647689; --line:#d9e4ec; --paper:#ffffff; --canvas:#f3f6fa; --blue:#0d6fbe; --blue-dark:#073b68; --teal-wash:#eaf3fb; --coral:#f21d2b; }
body { background:var(--canvas); }
.app-shell { grid-template-columns:240px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:24px 14px 18px; background:#062d51; box-shadow:10px 0 28px rgba(7,43,77,.11); }
.sidebar-brand { padding:0 10px 28px; font-size:15px; letter-spacing:0; }
.brand-logo-sidebar { filter:drop-shadow(0 5px 9px rgba(229,32,42,.18)); }
nav { gap:5px; }
.nav-item,.logout { min-height:42px; padding:10px 12px; border-radius:8px; font-size:14px; font-weight:650; transition:background .16s ease,color .16s ease,transform .16s ease; }
.nav-item svg,.logout svg { width:19px; height:19px; stroke-width:1.9; }
.nav-item:hover:not(:disabled),.logout:hover { color:#fff; background:rgba(255,255,255,.09); transform:translateX(2px); }
.nav-item.active { background:#0d6fbe; box-shadow:inset 3px 0 0 #f21d2b,0 5px 14px rgba(0,0,0,.14); }
.workspace { max-width:1880px; padding:32px clamp(22px,3vw,58px) 48px; }
.topbar { margin-bottom:25px; }
.topbar h1 { font-size:27px; line-height:1.15; letter-spacing:0; }
.eyebrow { color:#70808d; font-size:10px; font-weight:800; letter-spacing:.07em; }
.topbar-actions { gap:9px; }
.user-chip { border-color:#d7e2e7; border-radius:8px; padding:8px 12px; box-shadow:0 2px 6px rgba(19,42,48,.03); }
.icon-button { border-color:#d4e0e4; border-radius:8px; box-shadow:0 2px 6px rgba(19,42,48,.03); transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease; }
.icon-button:hover { color:var(--blue); border-color:#8fc0e5; background:#f1f8fe; box-shadow:0 5px 13px rgba(13,111,190,.12); transform:translateY(-1px); }
.metrics { gap:16px; margin-bottom:22px; }
.metrics div { position:relative; min-height:91px; overflow:hidden; border-color:#d9e5e8; border-radius:10px; padding:18px 19px; box-shadow:0 7px 18px rgba(20,49,56,.05); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.metrics div::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:#0d6fbe; opacity:.82; }
.metrics div:nth-child(2)::after { background:#f21d2b; }.metrics div:nth-child(3)::after { background:#6daedb; }
.metrics div:hover { border-color:#b9d8d8; box-shadow:0 10px 24px rgba(20,49,56,.09); transform:translateY(-2px); }
.metrics strong { font-size:30px; letter-spacing:0; }
.case-panel,.case-detail { border-color:#d9e5e8; border-radius:10px; box-shadow:0 8px 22px rgba(20,49,56,.055); }
.panel-toolbar { min-height:69px; padding:17px 20px; }.panel-toolbar h2 { font-size:16px; letter-spacing:0; }
.inbox-tabs { gap:4px; padding:10px 14px; background:#fbfcfc; }
.inbox-tab { border-radius:7px; padding:8px 10px; transition:background .16s ease,color .16s ease; }
.inbox-tab:hover { color:var(--blue); background:#edf5fc; }
.inbox-tab.active { color:var(--blue); background:#e4f0fb; border-bottom-color:transparent; }
.secondary-tabs { padding-top:8px; padding-bottom:8px; background:#fff; }
th { background:#f7fafb; color:#6c7c89; font-size:11px; font-weight:800; letter-spacing:.025em; text-transform:uppercase; }
th,td { border-bottom-color:#e9eff1; }.inbox-layout th,.inbox-layout td { padding:13px 14px; }
.case-row { transition:background .14s ease; }.case-row:hover td { background:#eff6fc; }.case-row:hover td:first-child { box-shadow:inset 3px 0 0 var(--blue); }
.status { padding:4px 8px; font-size:11px; font-weight:750; }.status-new,.status-waiting_customer_info { background:#fff3e4; }.status-follow_up,.status-quote_sent { background:#e8f2ff; }.status-won { background:#e3f6ed; }
.pane-resizer::before { border-radius:999px; box-shadow:0 5px 13px rgba(18,52,59,.13); }.pane-resizer::after { background:#d4e1e4; }
.case-detail { padding:21px; }.detail-header { align-items:center; padding-bottom:17px; }.detail-header h2 { font-size:21px; }
.detail-section { padding:19px 0; }.detail-section h3 { color:#243746; font-size:13px; letter-spacing:.01em; }
.case-workspace { gap:20px; }.chat-pane { border-color:#e2eaed; padding-right:20px; }.context-pane { padding-right:7px; }
.conversation-thread { border-color:#e2eaed; border-radius:9px; background:#f8fbfb; }
.case-timeline-item { border-radius:7px; transition:background .14s ease,transform .14s ease; }.case-timeline-item:hover { transform:translateX(2px); }
.primary-button { border-radius:8px; background:var(--blue); box-shadow:0 5px 12px rgba(13,111,190,.18); transition:background .16s ease,transform .16s ease,box-shadow .16s ease; }.primary-button:hover:not(:disabled) { background:var(--blue-dark); box-shadow:0 8px 17px rgba(7,59,104,.25); transform:translateY(-1px); }
.secondary-button { border-radius:8px; transition:border-color .16s ease,background .16s ease,color .16s ease; }.secondary-button:hover { border-color:#9bc4e6; color:var(--blue); background:#f1f8fe; }
input,select,textarea,.toolbar-actions select { border-color:#cddce1; border-radius:8px; background:#fff; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; }
input:hover,select:hover,textarea:hover,.toolbar-actions select:hover { border-color:#9bc4e6; } input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(13,111,190,.13); outline:0; }
.customer-tag { background:#edf4f6; color:#49606e; font-weight:700; }.facts dt { color:#71818d; }.facts dd { color:#263844; font-weight:600; }
.approval-row,.report-item,.agenda-task { border-color:#dce7ec; border-radius:9px; box-shadow:0 2px 7px rgba(20,49,56,.025); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }.approval-row:hover,.report-item:hover,.agenda-task:hover { border-color:#a6c8e5; box-shadow:0 7px 17px rgba(20,49,56,.08); transform:translateY(-1px); }
.calendar-grid { border-color:#dce7ec; border-radius:9px; overflow:hidden; }.calendar-weekday { background:#f7fafc; border-color:#e2eaef; }.calendar-day { border-color:#e2eaef; transition:background .14s ease; }.calendar-day:hover { background:#edf5fc; }.calendar-day.today { box-shadow:inset 0 0 0 2px var(--blue); }
.upload-card,.integration-flow,.approval-reviewer-form { border-radius:10px; }.integration-flow { border-color:#d3e3f0; background:#f7fbfe; }.flow-step span { background:var(--blue); }
.premium-view { overflow:hidden; }
.view-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:24px 22px; border-bottom:1px solid #e4edf2; background:linear-gradient(112deg,#ffffff 0%,#f6fbff 74%,#edf6fb 100%); }
.view-hero-copy { display:grid; gap:7px; max-width:690px; }.view-hero-copy .eyebrow { margin:0; color:var(--blue); }.view-hero h3 { margin:0; color:var(--ink); font-size:21px; line-height:1.2; }.view-hero p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.view-hero-mark { display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; border:1px solid #c7deef; border-radius:14px; color:var(--blue); background:#fff; box-shadow:0 7px 18px rgba(13,111,190,.10); }.view-hero-mark svg { width:22px; height:22px; }
.settings-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); gap:18px; padding:22px; background:#fbfdff; }.settings-card { min-width:0; padding:19px; border:1px solid #dce8f0; border-radius:12px; background:#fff; box-shadow:0 5px 16px rgba(17,58,88,.045); }.settings-card h3 { margin:0 0 5px; font-size:15px; }.settings-card > p { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.5; }.settings-card .case-form { margin-top:14px; }.settings-card .checkbox-row { min-height:43px; padding:10px 12px; border:1px solid #d9e7ed; border-radius:8px; background:#f8fbfd; font-weight:700; }.settings-card .primary-button { margin-top:4px; }
.knowledge-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:18px; padding:22px; background:#fbfdff; }.knowledge-layout .upload-card,.knowledge-layout .case-form { margin:0; }.catalog-form-card { padding:19px; border:1px solid #dce8f0; border-radius:12px; background:#fff; box-shadow:0 5px 16px rgba(17,58,88,.045); }.catalog-form-card > h3 { margin:0 0 16px; font-size:15px; }.knowledge-stack { display:grid; gap:18px; }.knowledge-layout .upload-card { border-style:solid; border-color:#dce8f0; border-radius:12px; background:#fff; box-shadow:0 5px 16px rgba(17,58,88,.045); }.knowledge-layout .upload-card:first-child { border-color:#c9e0f2; background:#f6fbff; }.upload-card input[type="file"] { padding:9px; border:1px dashed #9fc4df; background:#fff; }.inventory-toggle { border-color:#d8e5ea; background:#f7fafc; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:30px 22px 11px; }.section-title h3 { margin:0; font-size:15px; }.section-title span { color:var(--muted); font-size:12px; }.premium-view > .table-wrap { margin:0 22px 24px; border:1px solid #e0e9ee; border-radius:10px; background:#fff; box-shadow:0 3px 10px rgba(17,58,88,.035); }
.integration-layout { display:grid; gap:18px; padding:22px; background:#fbfdff; }.integration-intro { display:grid; grid-template-columns:auto minmax(0,1fr); gap:15px; align-items:start; padding:19px; border:1px solid #cfe2f0; border-radius:12px; background:#f4faff; }.integration-intro-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#fff; background:#0d6fbe; box-shadow:0 7px 16px rgba(13,111,190,.2); }.integration-intro h3 { margin:0 0 4px; font-size:15px; }.integration-intro p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }.integration-flow { margin:0; padding:18px; border-radius:12px; background:#fff; }.integration-layout > .primary-button { justify-self:start; }
.integration-list { display:grid; gap:10px; }.integration-list .module-row { border:1px solid #dce8f0; border-radius:10px; background:#fff; box-shadow:0 3px 10px rgba(17,58,88,.035); }.integration-list .detail-actions { margin-top:0; }
.platform-layout { display:grid; grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr); gap:18px; padding:22px; background:#fbfdff; }.platform-form { align-content:start; padding:19px; border:1px solid #dce8f0; border-radius:12px; background:#fff; box-shadow:0 5px 16px rgba(17,58,88,.045); }.platform-form h3 { margin:0 0 5px; font-size:16px; }.platform-form > p { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.5; }.module-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.module-picker label { display:flex; align-items:center; gap:8px; min-height:38px; padding:8px 9px; border:1px solid #dce8f0; border-radius:8px; background:#f9fbfd; color:#33495b; font-size:12px; font-weight:700; }.module-picker input { width:16px; height:16px; accent-color:var(--blue); }.tenant-grid { display:grid; gap:12px; }.tenant-card { display:grid; gap:14px; padding:18px; border:1px solid #dce8f0; border-radius:12px; background:#fff; box-shadow:0 5px 16px rgba(17,58,88,.045); }.tenant-card-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }.tenant-card h3 { margin:0; font-size:16px; }.tenant-card p { margin:4px 0 0; color:var(--muted); font-size:12px; }.tenant-status { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 9px; background:#edf5ff; color:#125a98; font-size:11px; font-weight:800; }.tenant-status.setup { background:#fff4e5; color:#a65d06; }.tenant-modules { display:flex; flex-wrap:wrap; gap:7px; }.tenant-module { display:flex; align-items:center; gap:6px; border:1px solid #dce8f0; border-radius:999px; padding:4px 8px; color:#66788a; background:#fbfdff; font-size:11px; font-weight:700; }.tenant-module input { width:14px; height:14px; accent-color:var(--blue); }.tenant-card-footer { display:flex; justify-content:space-between; gap:12px; align-items:center; }.activation-code { margin:0; padding:12px; border:1px solid #ffd59a; border-radius:9px; background:#fff9ee; color:#6b4307; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; overflow-wrap:anywhere; }.activation-result { display:grid; gap:9px; margin-top:12px; padding:13px; border:1px solid #bcd9ef; border-radius:10px; background:#f4faff; }.activation-result strong { font-size:13px; }
.app-shell.platform-mode { display:block; min-height:100vh; }.platform-mode .sidebar { display:none; }.platform-mode .workspace { max-width:1540px; margin:0 auto; padding:30px clamp(20px,4vw,70px) 56px; }.platform-mode .topbar { min-height:70px; align-items:center; margin-bottom:20px; padding:0 2px 18px; border-bottom:1px solid #dce8f0; }.platform-mode .topbar::before { content:"V"; display:grid; place-items:center; width:34px; height:34px; margin-right:12px; border-radius:10px; background:#f21d2b; color:#fff; font-size:18px; font-weight:900; }.platform-mode .topbar > div:first-child { margin-right:auto; }.platform-mode .topbar h1 { font-size:25px; }.platform-mode .topbar-actions { margin-left:auto; }.platform-dashboard { width:100%; }.platform-dashboard .panel-toolbar { display:none; }.platform-dashboard .view-hero { border:1px solid #d6e6f1; border-radius:14px; padding:27px 28px; box-shadow:0 9px 28px rgba(18,62,92,.06); }.platform-dashboard .platform-layout { margin-top:18px; padding:0; background:transparent; }.tenant-card { padding:20px; }.tenant-card:hover { border-color:#aacfe9; box-shadow:0 10px 24px rgba(17,58,88,.08); }.tenant-card-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.tenant-card-actions .secondary-button { white-space:nowrap; }.tenant-card-footer { display:none; }
.agenda-workspace { background:#fbfdff; }.agenda-tasks { min-width:0; }.agenda-calendar { min-width:0; }.agenda-task { padding:14px; }.calendar-toolbar { justify-content:flex-start; padding-bottom:4px; }.calendar-toolbar h3 { text-transform:capitalize; }
.case-detail .detail-actions { min-width:0; }.case-detail .detail-actions select { min-width:0; max-width:86px; }.case-detail .detail-actions .primary-button { white-space:nowrap; }.context-pane { overflow-x:hidden; }.context-pane .facts,.context-pane .case-form { max-width:100%; }

/* Platform dashboard: a separate, deliberately quieter surface than the CRM. */
.platform-mode { background:#eef3f8; }.platform-mode .workspace { max-width:1480px; }.platform-mode .topbar::before { content:""; background:#fff url("assets/vecctor-mark.png") center/27px auto no-repeat; border:1px solid #dbe7f0; box-shadow:0 5px 14px rgba(10,47,82,.10); }.platform-mode .topbar { border-color:#d9e4ed; }.platform-dashboard .view-hero { position:relative; align-items:center; min-height:170px; border:0; border-left:5px solid #f21d2b; border-radius:14px; background:#062d51; box-shadow:0 14px 32px rgba(6,45,81,.18); }.platform-dashboard .view-hero-copy { position:relative; z-index:1; max-width:760px; }.platform-dashboard .view-hero-copy .eyebrow { color:#9fcff2; }.platform-dashboard .view-hero h3 { color:#fff; font-size:28px; }.platform-dashboard .view-hero p { color:#d9e9f6; max-width:690px; }.platform-dashboard .view-hero-mark { position:relative; z-index:1; border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.09); color:#fff; box-shadow:none; }.platform-hero-actions { position:relative; z-index:2; margin-left:auto; align-self:flex-end; }.platform-hero-actions .primary-button { background:#f21d2b; box-shadow:0 8px 18px rgba(0,0,0,.2); }.platform-hero-actions .primary-button:hover:not(:disabled) { background:#c81425; }
.platform-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; }.platform-kpi { display:grid; gap:4px; padding:16px 18px; border:1px solid #dce7ef; border-radius:12px; background:#fff; box-shadow:0 5px 13px rgba(9,51,83,.045); }.platform-kpi strong { color:#073b68; font-size:25px; line-height:1; }.platform-kpi span { color:#6b7f91; font-size:12px; font-weight:700; }
.platform-dashboard .platform-layout { display:grid; grid-template-columns:1fr; gap:18px; margin-top:0; }.platform-form { max-width:800px; padding:22px; border:1px solid #cfe1ef; border-radius:12px; background:#fff; box-shadow:0 10px 24px rgba(9,51,83,.07); }.platform-form h3 { font-size:18px; }.platform-form .primary-button { justify-self:start; }.module-picker label { min-height:36px; border-radius:7px; }.tenant-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:14px; }.platform-section-heading { grid-column:1 / -1; display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:4px 0 0; }.platform-section-heading h3 { margin:0; color:#18324a; font-size:17px; }.platform-section-heading span { color:#73869a; font-size:13px; }.tenant-card { min-height:0; gap:16px; padding:20px; border:1px solid #dbe6ee; border-radius:12px; box-shadow:0 6px 16px rgba(9,51,83,.045); }.tenant-card h3 { color:#12334f; font-size:18px; }.tenant-card p { font-size:12px; }.tenant-card-actions { flex-wrap:nowrap; }.tenant-status { background:#e9f5ff; color:#0b66aa; }.tenant-modules { gap:7px; padding-top:14px; border-top:1px solid #edf2f5; }.tenant-module { display:inline-flex !important; width:auto !important; min-height:31px !important; padding:6px 8px !important; border:1px solid #dbe6ee !important; border-radius:7px !important; background:#f8fbfd !important; color:#617689 !important; font-size:11px !important; font-weight:700 !important; }.tenant-module input { width:14px !important; height:14px !important; margin:0; }.tenant-module:has(input:checked) { border-color:#a9cae4 !important; background:#eef7ff !important; color:#125f9e !important; }.tenant-module:has(input:disabled) { opacity:.78; }.activation-result { grid-column:1 / -1; margin:0; border-radius:12px; }.activation-code { border-radius:8px; }
@media (max-width:980px) { .settings-layout,.knowledge-layout,.platform-layout { grid-template-columns:1fr; }.knowledge-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }.view-hero { padding:20px; } }
@media (max-width:680px) { .view-hero { gap:14px; padding:18px; }.view-hero h3 { font-size:18px; }.view-hero-mark { display:none; }.settings-layout,.knowledge-layout,.integration-layout,.platform-layout { padding:14px; }.knowledge-stack,.module-picker { grid-template-columns:1fr; }.section-title,.premium-view > .table-wrap { margin-left:14px; margin-right:14px; }.case-detail .detail-header { align-items:flex-start; }.case-detail .detail-actions { gap:7px; }.case-detail .detail-actions .primary-button { padding:9px; font-size:12px; }.tenant-card-footer { align-items:flex-start; flex-direction:column; }.platform-mode .workspace { padding:18px 14px 36px; }.platform-mode .topbar { min-height:56px; }.platform-mode .topbar::before { width:30px; height:30px; margin-right:9px; }.platform-mode .topbar h1 { font-size:20px; }.tenant-card-head { align-items:flex-start; flex-direction:column; }.tenant-card-actions { justify-content:flex-start; } }
@media (max-width:1120px) { .inbox-layout { grid-template-columns:1fr; min-height:0; }.inbox-layout > .pane-resizer { display:none; }.case-detail { margin:16px 0 0; }.case-workspace { grid-template-columns:1fr; }.chat-pane { border-right:0; border-bottom:1px solid var(--line); padding:0 0 20px; }.context-pane { max-height:none; }.conversation-thread { max-height:440px; } }
@media (max-width:780px) { .login-layout,.app-shell { grid-template-columns:1fr; } .login-brand { min-height:270px; padding:42px 28px; } .sidebar { display:none; } .workspace { padding:22px 14px; } .metrics { gap:8px; } .metrics div { padding:13px; } .topbar h1 { font-size:22px; } .user-chip { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .panel-toolbar { align-items:flex-start; gap:10px; } .toolbar-actions select { max-width:180px; } .report-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.case-detail { padding:16px; }.inbox-layout .case-panel { overflow:hidden; } }

@media (max-width:980px) { .platform-kpis,.tenant-grid { grid-template-columns:1fr; }.platform-dashboard .view-hero { align-items:flex-start; }.platform-hero-actions { margin-left:0; } }
@media (max-width:680px) { .platform-dashboard .view-hero { min-height:0; padding:22px 18px; }.platform-dashboard .view-hero h3 { font-size:22px; }.platform-dashboard .panel-toolbar { padding:15px 16px; }.platform-kpi { min-height:104px; }.tenant-card-head { gap:14px; }.tenant-card-actions { width:100%; justify-content:space-between; }.tenant-modules { gap:7px; } }