/* CRM layout on the ERP design system tokens (generated in tokens.css). */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:dark}
html:has(body.light){color-scheme:light}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:var(--fs-14)/1.5 var(--font);overflow-x:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:var(--info)}
h1,h2,h3,h4,p{margin:0}
h1{font-size:22px;font-weight:800;letter-spacing:-.3px;line-height:1.2}
h2{font-size:18px;font-weight:700;letter-spacing:-.2px}
h3{font-size:15px;font-weight:700}
.eyebrow{font-size:var(--fs-10-5);font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--text3)}
.muted{color:var(--text2);font-size:var(--fs-12)}
.warning{color:var(--warning);font-size:var(--fs-12)}
.error{display:block;color:var(--danger-soft);font-size:var(--fs-12);margin-top:var(--space-8)}
.app{min-height:100vh}
.sidebar{background:var(--bg2);border-bottom:1px solid var(--border);padding:var(--space-12);display:flex;flex-direction:column;gap:var(--space-14)}
.brand{display:flex;align-items:center;gap:var(--space-10);padding:var(--space-4)}
.brand strong{display:block;font-size:var(--fs-14);font-weight:800;letter-spacing:-.3px}
.brand small{display:block;font-size:var(--fs-10-5);color:var(--text3)}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent-grad);box-shadow:0 0 16px var(--accent-glow);color:#fff;font-weight:800;font-size:15px}
.nav{display:flex;gap:var(--space-4);overflow-x:auto}
.nav-item{border:0;background:transparent;color:var(--text2);border-radius:var(--r-sm);padding:var(--space-8) var(--space-10);font-size:var(--fs-12-5);font-weight:500;white-space:nowrap;transition:background var(--dur-120),color var(--dur-120)}
.nav-item:hover{background:var(--card2);color:var(--text)}
.nav-item.active{background:var(--accent-dim);color:var(--accent2);font-weight:700}
.sidebar-bottom{display:flex;justify-content:flex-end;gap:var(--space-16);padding:0 var(--space-4);font-size:var(--fs-11-5)}
.sidebar-bottom a,.sidebar-bottom button{color:var(--text2);text-decoration:none}
.sidebar-bottom button{border:0;background:none;padding:0}
.workspace{min-width:0}
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:var(--space-14) var(--space-16);display:flex;align-items:center;justify-content:space-between;gap:var(--space-12)}
.topbar h1{margin-top:var(--space-2)}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-8);flex-wrap:wrap}
.user-name{display:none;font-size:var(--fs-11-5);color:var(--text2)}
.theme-toggle{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--border2);border-radius:var(--r-sm);background:var(--card);color:var(--text2)}
.theme-toggle:hover{background:var(--card2);color:var(--text)}
.page{padding:var(--space-16);max-width:1680px;margin:auto}
.page-intro{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12);margin-bottom:var(--space-16)}
.page-intro h2{margin-bottom:var(--space-4)}
.page-intro p{font-size:var(--fs-12);color:var(--text2);line-height:1.6}
.button-group{display:flex;flex-wrap:wrap;gap:var(--space-8)}
/* Exact ERP button treatments: .btn, .btn-acc, .btn-ghost, .btn-danger. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);padding:8px 14px 8px 16px;min-height:var(--control-h);border-radius:9px;border:1px solid transparent;font-family:var(--font);font-size:var(--fs-12);font-weight:600;white-space:nowrap;line-height:1;transition:all var(--dur-160)}
.btn-acc{background:var(--accent-grad);color:#fff;box-shadow:0 3px 12px var(--accent-glow)}
.btn-acc:hover{transform:translateY(-1px);box-shadow:0 5px 16px var(--accent-glow)}
.btn-ghost{background:var(--card);color:var(--text);border-color:var(--border2)}
.btn-ghost:hover{background:var(--card2)}
.btn-danger{background:var(--accent-dim);color:var(--accent2);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.btn-danger:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* ERP .inp and .fld proportions, with CRM fields sharing the same treatment. */
input,select,textarea{width:100%;min-width:0;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r-sm);padding:var(--space-8) var(--space-11);color:var(--text);font-family:var(--font);font-size:var(--fs-12-5);outline:0;transition:border-color var(--dur-160)}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--text3)}
textarea{min-height:90px;resize:vertical}
.field{display:grid;gap:var(--space-4);margin:var(--space-12) 0;font-size:var(--fs-10-5);font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text2)}
.field input,.field select,.field textarea{letter-spacing:normal;text-transform:none;font-weight:400}
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);min-width:0;overflow:hidden;transition:border-color var(--dur-160)}
.panel:hover{border-color:var(--border2)}
.panel-head,.section-head{display:flex;align-items:center;gap:var(--space-8);padding:var(--space-14);border-bottom:1px solid var(--border)}
.panel-head{flex-wrap:wrap}
.section-head h3{font-size:15px}
.panel-head input,.panel-head select{flex:1 1 100%;max-width:none}
.list{max-height:none;overflow:auto}
.row{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--space-10);padding:var(--space-14);border-bottom:1px solid var(--border)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--card2)}
.row-main{min-width:0;flex:1 1 180px}
.row strong{display:block;font-size:var(--fs-12-5);overflow-wrap:anywhere}
.row small,.row p{display:block;color:var(--text2);font-size:var(--fs-11);margin-top:var(--space-4);line-height:1.45}
.row-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-5)}
.row-button{appearance:none;width:100%;text-align:left;background:transparent;border:0;color:inherit}
.empty-state{padding:48px var(--space-16);text-align:center;color:var(--text2)}
.empty-state h3{color:var(--text);margin-bottom:var(--space-8)}
.empty-state p{line-height:1.6}
.badge{display:inline-block;padding:var(--space-2) var(--space-8);border-radius:5px;font-size:var(--fs-10-5);font-weight:600;white-space:nowrap}
.badge.disconnected{background:color-mix(in srgb,var(--bdg-amber) 10%,transparent);color:var(--bdg-amber);border:1px solid color-mix(in srgb,var(--bdg-amber) 20%,transparent)}
.badge.ok{background:color-mix(in srgb,var(--bdg-mint) 10%,transparent);color:var(--bdg-mint);border:1px solid color-mix(in srgb,var(--bdg-mint) 20%,transparent)}
.badge.neutral{background:color-mix(in srgb,var(--bdg-gray) 10%,transparent);color:var(--bdg-gray);border:1px solid color-mix(in srgb,var(--bdg-gray) 20%,transparent)}
.inbox-layout,.two-column{display:grid;gap:var(--space-12)}
.detail{min-height:310px}
.detail-head{padding:var(--space-14);border-bottom:1px solid var(--border)}
.detail-head h3{margin-bottom:var(--space-4)}
.detail-body{padding:var(--space-16)}
.detail-body h4{font-size:var(--fs-12);font-weight:700;margin:var(--space-16) 0 var(--space-8)}
.detail-body p{line-height:1.55}
.message{max-width:78%;border-radius:var(--r);padding:var(--space-12);margin:var(--space-8) 0;background:var(--card2);font-size:var(--fs-12-5)}
.message.outbound{margin-left:auto;background:var(--accent-dim)}
.message small{display:block;color:var(--text3);margin-top:var(--space-4)}
.note{border-left:3px solid var(--accent);padding:var(--space-8) var(--space-12);margin:var(--space-8) 0;background:var(--accent-dim);font-size:var(--fs-12)}
.contact-context{border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--space-12);background:var(--bg2)}
.contact-context h4{margin:0 0 var(--space-8)}
.contact-context p+p{margin-top:var(--space-6)}
.detail-controls{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-16)}
.detail-controls select{max-width:200px}
.pipeline-board{display:grid;grid-template-columns:repeat(5,245px);gap:var(--space-10);overflow-x:auto;align-items:start;padding-bottom:var(--space-8)}
.pipeline-column{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:var(--space-8);min-height:260px}
.pipeline-column h3{font-size:var(--fs-10-5);letter-spacing:.7px;text-transform:uppercase;color:var(--text3);padding:var(--space-8)}
.pipeline-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--space-12);margin:var(--space-8) 0;box-shadow:var(--shadow-sm)}
.pipeline-card strong{font-size:var(--fs-12-5)}
.pipeline-card p{font-size:var(--fs-11);color:var(--text2);margin:var(--space-8) 0}
.pipeline-card .btn{margin-top:var(--space-6)}
.notice{position:fixed;z-index:var(--z-top);right:var(--space-16);bottom:var(--space-16);max-width:min(460px,calc(100vw - 32px));background:var(--card2);color:var(--text);border:1px solid var(--border2);border-radius:var(--r-sm);padding:var(--space-12) var(--space-14);box-shadow:var(--shadow-lg);font-size:var(--fs-12-5)}
.notice.error{border-color:var(--danger);color:var(--danger-soft)}
.login-screen{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:var(--space-20);background:var(--bg)}
.login-card{width:min(100%,390px);max-width:100%;min-width:0;background:var(--card);border:1px solid var(--border2);border-radius:var(--r2);padding:var(--space-32);box-shadow:var(--shadow-lg)}
.login-card h1{margin:var(--space-8) 0}
.login-card p{color:var(--text2);font-size:var(--fs-12);line-height:1.6}
.login-card label{display:grid;gap:var(--space-4);font-size:var(--fs-10-5);font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text2);margin:var(--space-14) 0}
.login-card input{letter-spacing:normal;text-transform:none}
.login-card .btn{width:100%;margin-top:var(--space-8)}
dialog{max-width:calc(100vw - 24px);max-height:90vh;border:1px solid var(--border2);border-radius:var(--r2);padding:var(--space-16);background:var(--card);color:var(--text);box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgba(0,0,0,.65)}
.dialog-shell{width:min(560px,calc(100vw - 60px));max-width:680px}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:var(--space-12)}
.dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-16)}
.icon-button{border:0;background:none;color:var(--text3);font-size:22px}
.icon-button:hover{color:var(--text)}
.contact-detail{padding:var(--space-12) 0}
.contact-detail dl{display:grid;grid-template-columns:100px minmax(0,1fr);gap:var(--space-8);font-size:var(--fs-12)}
.contact-detail dt{color:var(--text3)}
.contact-detail dd{margin:0;overflow-wrap:anywhere}
.contact-detail ul{font-size:var(--fs-12);padding-left:var(--space-18)}
@media(min-width:760px){
  .app{display:grid;grid-template-columns:200px minmax(0,1fr)}
  .sidebar{height:100vh;position:sticky;top:0;border-bottom:0;border-right:1px solid var(--border);padding:var(--space-20) var(--space-10)}
  .brand{padding:var(--space-4) var(--space-8)}
  .nav{display:grid;margin-top:var(--space-16)}
  .nav-item{text-align:left;padding:var(--space-10) var(--space-12)}
  .sidebar-bottom{display:grid;gap:var(--space-10);margin-top:auto;padding:var(--space-8);font-size:var(--fs-11-5)}
  .sidebar-bottom button{text-align:left}
  .topbar{padding:var(--space-16) var(--space-24)}
  .user-name{display:inline}
  .page{padding:var(--space-24)}
  .panel-head{flex-wrap:nowrap}
  .panel-head input{flex:1 1 auto}
  .panel-head select{flex:0 0 145px;max-width:145px}
  .list{max-height:calc(100vh - 280px)}
  .inbox-layout{grid-template-columns:minmax(260px,350px) minmax(0,1fr)}
  .two-column{grid-template-columns:1.2fr .8fr}
  .pipeline-board{grid-template-columns:repeat(5,minmax(220px,1fr))}
}