/* PilarCRM v3.8: modern brand, accessibility and Sales Enablement templates */
:root[data-accent="indigo"]{--violet:#635cf0;--violet-dark:#4c45d1;--violet-pale:#efeeff;--brand-accent:#635cf0;--brand-accent-2:#42bfac;--brand-soft:#efeeff}
:root[data-accent="teal"]{--violet:#11968f;--violet-dark:#087c77;--violet-pale:#e1f9f7;--brand-accent:#11968f;--brand-accent-2:#36b7a9;--brand-soft:#e1f9f7}
:root[data-accent="violet"]{--violet:#8055e5;--violet-dark:#6938d1;--violet-pale:#f2eaff;--brand-accent:#8055e5;--brand-accent-2:#ac77f6;--brand-soft:#f2eaff}
:root[data-accent="emerald"]{--violet:#118663;--violet-dark:#086c50;--violet-pale:#e3f8ee;--brand-accent:#118663;--brand-accent-2:#3abd8f;--brand-soft:#e3f8ee}
:root[data-theme="dark"][data-accent="indigo"]{--violet-pale:#262856;--brand-soft:#272a59}
:root[data-theme="dark"][data-accent="teal"]{--violet-pale:#133e42;--brand-soft:#153d41}
:root[data-theme="dark"][data-accent="violet"]{--violet-pale:#342450;--brand-soft:#332650}
:root[data-theme="dark"][data-accent="emerald"]{--violet-pale:#153c31;--brand-soft:#163b31}
.brand-mark.brand-logo{background:transparent;box-shadow:none;overflow:hidden;flex-shrink:0}
.brand-mark.brand-logo img{display:block;width:100%;height:100%;border-radius:12px}
.brand-v37 .brand-text{min-width:0;flex:1}
.brand-v37 .brand-text b{max-width:170px;font-size:14px;line-height:1.3;letter-spacing:-.25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-v37 .brand-text span{font-size:9px;letter-spacing:1.1px;max-width:166px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.logo-full{width:min(250px,100%);height:auto;display:block;max-width:100%}
.login-aside .logo-full{filter:none}
.top-quick-add{background:var(--brand-soft);color:var(--brand-accent);border-color:transparent;font-weight:800}
.top-quick-add:hover{background:var(--violet-pale)}
.nav-item.active:before{background:var(--brand-accent-2)}
.nav-item .icon{flex:none}
.quick-action-card:focus-visible,.tpl-card:focus-visible,.tpl-picker-item:focus-visible,.tpl-filter:focus-visible,.nav-item:focus-visible,.mobile-fab:focus-visible,.btn:focus-visible,.round-button:focus-visible,.icon-button:focus-visible{outline:3px solid var(--brand-accent);outline-offset:3px}
.tpl-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}
.tpl-summary>div{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:16px;min-width:0;box-shadow:var(--shadow)}
.tpl-summary-icon{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand-accent);display:grid;place-items:center;flex:none}
.tpl-summary strong{font-size:21px;font-weight:800;color:var(--text)}
.tpl-summary span:last-child{font-size:11px;color:var(--muted)}
.tpl-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(310px,.9fr);gap:18px;align-items:start;min-width:0}
.tpl-library,.tpl-preview{min-width:0}
.tpl-preview{position:sticky;top:calc(var(--top-h) + 18px);max-height:calc(100dvh - var(--top-h) - 36px);overflow-y:auto}
.tpl-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:15px;min-width:0}
.tpl-toolbar h2,.tpl-preview h2{font-size:17px;font-weight:800;margin:0}
.tpl-toolbar p{font-size:11px;margin-top:5px}
.tpl-search{height:41px;min-width:180px;max-width:255px;display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:0 10px;color:var(--muted)}
.tpl-search input{border:0;outline:0!important;background:transparent;min-width:0;flex:1;width:100%;font:inherit;color:var(--text);font-size:11px}
.tpl-filters{display:flex;gap:6px;overflow-x:auto;padding:0 0 11px;scrollbar-width:thin}
.tpl-filter{flex:none;border:1px solid var(--line);border-radius:99px;background:var(--surface2);color:var(--muted);padding:7px 11px;font-size:11px;font-weight:700;cursor:pointer}
.tpl-filter.active{background:var(--brand-soft);border-color:var(--brand-accent);color:var(--brand-accent)}
.tpl-collection{display:grid;gap:10px;max-height:720px;overflow-y:auto;scrollbar-width:thin;padding-right:2px}
.tpl-card{border:1px solid var(--line);border-radius:13px;background:var(--surface2);color:var(--text);display:flex;text-align:left;align-items:flex-start;gap:12px;min-width:0;width:100%;padding:13px;cursor:pointer;transition:background .16s,border-color .16s,box-shadow .16s}
.tpl-card:hover,.tpl-card.active{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand-accent) 50%,var(--line));box-shadow:0 6px 20px #1b2b5210}
.tpl-card-icon{display:grid;place-items:center;flex:none;width:39px;height:39px;border-radius:12px;background:var(--surface);color:var(--brand-accent)}
.tpl-card-copy{display:grid;gap:5px;flex:1;min-width:0}
.tpl-card-copy strong{font-size:12px;line-height:1.4}
.tpl-card-copy small{font-size:10px;color:var(--brand-accent);font-weight:700}
.tpl-card-copy>span{font-size:11px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.tpl-card>.icon:last-child{flex:none;margin-top:12px;color:var(--muted)}
.tpl-preview-heading{display:flex;align-items:start;gap:12px;justify-content:space-between;margin-bottom:18px}
.tpl-preview-heading .eyebrow{font-size:10px;letter-spacing:1.2px;margin-bottom:9px}
.tpl-preview-heading .flex-wrap{margin-top:9px}
.tpl-preview-icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--brand-soft);color:var(--brand-accent)}
.tpl-lead-field{display:grid;gap:9px;font-size:11px;font-weight:700;color:var(--muted);min-width:0}
.tpl-lead-field select{min-width:0;width:100%;height:44px;border:1px solid var(--line);background:var(--surface2);border-radius:11px;color:var(--text);padding:0 12px;font:inherit;font-size:12px}
.tpl-message-note{display:flex;align-items:start;gap:8px;font-size:11px;line-height:1.55;color:var(--muted);margin-top:14px}
.tpl-message-note .icon{flex:none;margin-top:1px}
.tpl-chat-preview{padding:18px 16px;background:linear-gradient(160deg,rgba(22,129,104,.08),rgba(76,106,157,.08)),var(--surface2);border:1px solid var(--line);border-radius:15px;display:grid;gap:12px;margin-top:14px}
.tpl-chat-bubble{background:var(--surface);border:1px solid var(--line);border-radius:15px 15px 5px 15px;margin-left:15px;padding:17px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.9;max-height:350px;overflow:auto;box-shadow:0 8px 24px rgba(24,39,75,.05)}
.tpl-chat-preview>small{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted)}
.tpl-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:17px}
.tpl-management{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.tpl-footnote{font-size:11px;line-height:1.7;color:var(--muted);margin-top:17px}
.tpl-footnote code{background:var(--surface2);border:1px solid var(--line);border-radius:5px;padding:2px 5px}
.tpl-picker-list{display:grid;gap:10px}
.tpl-picker-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface2);border-radius:13px;padding:13px;min-width:0;width:100%;text-align:left;color:var(--text);cursor:pointer}
.tpl-picker-item:hover{background:var(--brand-soft);border-color:var(--brand-accent)}
.tpl-picker-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;color:var(--brand-accent);background:var(--surface)}
.tpl-picker-item>span:nth-child(2){display:grid;gap:4px;flex:1;min-width:0}
.tpl-picker-item b{font-size:12px}.tpl-picker-item small{font-size:10px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.tpl-picker-item>.icon:last-child{flex:none}
.quick-action-card .qa-icon{background:var(--brand-soft)}
.tpl-chat-preview .icon,.tpl-preview .btn .icon{flex:none}
@media(max-width:1230px){.tpl-layout{grid-template-columns:minmax(0,1fr)}.tpl-preview{position:static;max-height:none}.tpl-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.tpl-summary{grid-template-columns:1fr}.tpl-toolbar{flex-wrap:wrap}.tpl-search{max-width:none;width:100%}.tpl-preview{padding:17px!important}.tpl-actions .btn{flex:1}.tpl-summary>div{padding:13px}.tpl-preview-heading{align-items:center}}
@media(max-width:425px){.tpl-layout{gap:13px}.tpl-summary{gap:9px}.tpl-chat-preview{padding:12px}.tpl-chat-bubble{padding:13px;margin-left:0}.tpl-actions{flex-direction:column}.tpl-actions .btn{width:100%}.tpl-management .btn{flex:1}.tpl-card{padding:10px;gap:9px}.tpl-card-icon{width:34px;height:34px}.tpl-preview h2{font-size:15px}}
@media(prefers-reduced-motion:reduce){.tpl-card,.quick-action-card,.mobile-fab{transition:none!important}.quick-action-card:hover{transform:none}}

/* Readability and compact 360–430 px sales workspace cards */
:root[data-theme="light"]{--muted:#64738b;--muted2:#8b98aa}
.tpl-card-copy>span,.tpl-message-note,.tpl-footnote{color:var(--muted)}
.tpl-summary span:last-child{color:var(--muted);line-height:1.35}
@media(max-width:600px){
 .tpl-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
 .tpl-summary>div{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:12px;min-width:0;min-height:116px}
 .tpl-summary-icon{width:30px;height:30px;border-radius:10px}
 .tpl-summary-icon svg{width:16px;height:16px}
 .tpl-summary strong{font-size:16px}
 .tpl-summary span:last-child{font-size:10px}
 .tpl-library{padding:15px!important}
}

.brand-preview-mark{padding:0!important;background:transparent!important;box-shadow:none!important;overflow:hidden}
.brand-preview-mark img{width:42px;height:42px;display:block;border-radius:13px}