/* Vista CRM — shared styles */
:root{
  --vista-blue:#1b61c9; --vista-blue-mid:#254fad; --vista-blue-deep:#0f3d82;
  --vista-navy:#181d26; --vista-navy-soft:#2e3a4e;
  --surface:#ffffff; --surface-subtle:#f8fafc;
  --text-primary:#181d26; --text-secondary:#333; --text-weak:rgba(4,14,32,.69); --text-mute:#6b7280;
  --border:#e0e2e6; --border-strong:#c8ccd2; --border-navy:#2e3a4e;
  --success:#006400; --success-bg:#e8f4e8;
  --warning:#a85d00; --warning-bg:#fdf3e3;
  --danger:#b42318;  --danger-bg:#fde8e6;
  --info:#1b61c9;    --info-bg:#e8f1fb;
  --shadow-button: rgba(0,0,0,.32) 0 0 1px, rgba(0,0,0,.08) 0 0 2px, rgba(45,127,249,.28) 0 1px 3px, rgba(0,0,0,.06) 0 0 0 .5px inset;
  --shadow-soft:   rgba(15,48,106,.05) 0 0 20px;
  --shadow-card:   rgba(15,48,106,.06) 0 2px 8px, rgba(15,48,106,.04) 0 0 0 1px;
  --shadow-popover:rgba(15,48,106,.12) 0 8px 24px, rgba(15,48,106,.06) 0 0 0 1px;
  --font-text:'Inter','Haas',-apple-system,system-ui,sans-serif;
  --font-display:'Inter Tight','Haas Groot Disp','Inter',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--surface-subtle);color:var(--text-primary);font-family:var(--font-text);-webkit-font-smoothing:antialiased;letter-spacing:.08px;font-size:14px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}

/* App shell */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;border-bottom:1px solid var(--border);margin-bottom:14px}
.sidebar .brand img{width:28px;height:28px}
.sidebar .brand .wm{font-family:var(--font-display);font-weight:900;font-size:18px;letter-spacing:-.01em;color:var(--vista-navy)}
.sidebar .brand .sm{display:block;font-size:9px;font-weight:500;letter-spacing:.24em;color:var(--text-mute);text-transform:uppercase;margin-top:1px}
.sidebar nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav-section{font-size:10px;color:var(--text-mute);font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:14px 12px 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:13.5px;color:var(--text-primary);cursor:pointer;letter-spacing:.04px;transition:background 140ms ease}
.nav-item .i{width:17px;height:17px;stroke-width:1.75;color:var(--text-mute);flex:none}
.nav-item:hover{background:var(--surface-subtle)}
.nav-item.active{background:var(--vista-navy);color:#fff}
.nav-item.active .i{color:#fff}
.nav-item.disabled{color:var(--text-mute);cursor:not-allowed}
.nav-item .pill{margin-left:auto;font-size:9.5px;background:var(--border);color:var(--text-mute);padding:2px 7px;border-radius:999px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}

.sidebar .me{padding:14px 8px 4px;border-top:1px solid var(--border);margin-top:8px;display:flex;align-items:center;gap:10px}
.sidebar .me .who{flex:1;min-width:0}
.sidebar .me .name{font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:.04px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .me .role{font-size:11px;color:var(--text-mute);margin-top:1px}
.sidebar .me .out{color:var(--text-mute);padding:6px;border-radius:8px;display:inline-flex}
.sidebar .me .out:hover{background:var(--surface-subtle);color:var(--text-primary)}
.sidebar .me .out .i{width:16px;height:16px;stroke-width:1.75}

/* Main area */
.main{padding:32px 40px 56px;display:flex;flex-direction:column;gap:28px;max-width:1400px;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.page-head .display{font-family:var(--font-display);font-weight:900;font-size:40px;letter-spacing:-.012em;line-height:1.1}
.page-head .sub{font-size:14px;color:var(--text-weak);margin-top:6px;letter-spacing:.04px}
.page-head .right{display:flex;gap:10px;align-items:center}

/* Buttons */
.btn{font-size:14px;font-weight:500;line-height:1.25;letter-spacing:.08px;padding:10px 16px;border-radius:10px;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;transition:all 160ms cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.btn .i{width:15px;height:15px;stroke-width:1.75}
.btn-primary{background:var(--vista-navy);color:#fff;box-shadow:var(--shadow-button)}
.btn-primary:hover{background:#000}
.btn-blue{background:var(--vista-blue);color:#fff;box-shadow:var(--shadow-button)}
.btn-blue:hover{background:var(--vista-blue-deep)}
.btn-secondary{background:#fff;color:var(--text-primary);border-color:var(--border);box-shadow:var(--shadow-button)}
.btn-secondary:hover{background:var(--surface-subtle);border-color:var(--border-strong)}
.btn-ghost{background:transparent;color:var(--vista-blue);padding:8px 12px}
.btn-ghost:hover{color:var(--vista-blue-deep);background:var(--info-bg)}
.btn-sm{font-size:12.5px;padding:7px 11px;border-radius:8px}
.btn-sm .i{width:14px;height:14px}
.btn-lg{font-size:15px;padding:13px 22px;border-radius:12px}

/* Card */
.card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-soft)}
.card-pad{padding:22px 24px}
.card-head{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.card-head .title{font-size:15px;font-weight:600;letter-spacing:.04px}
.card-head .sub{font-size:13px;color:var(--text-weak);margin-left:auto}

/* Inputs */
.field{display:flex;flex-direction:column;gap:6px}
.field label, .lbl-field{font-size:13px;font-weight:500;color:var(--text-primary);letter-spacing:.04px}
.input{font-size:14px;padding:10px 13px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text-primary);outline:none;letter-spacing:.08px;transition:all 140ms ease;width:100%}
.input:focus{border-color:var(--vista-blue);box-shadow:0 0 0 3px rgba(27,97,201,.12)}
.input.with-icon{padding-left:36px}
.input-wrap{position:relative;display:flex;flex-direction:column;gap:6px}
.input-wrap .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-mute);stroke-width:1.75;pointer-events:none}
.input-wrap.with-label .ico{top:auto;bottom:14px;transform:none}
.help{font-size:12px;color:var(--text-weak);letter-spacing:.04px}
.help.error{color:var(--danger)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23181d26' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer}
textarea.input{resize:vertical;min-height:84px;font-family:inherit}

/* Badge */
.b{font-size:12px;font-weight:500;letter-spacing:.12px;padding:4px 10px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;line-height:1.3;white-space:nowrap}
.b .dot{width:6px;height:6px;border-radius:999px;background:currentColor;flex:none}
.b.pill{border-radius:999px}
.b-success{background:var(--success-bg);color:var(--success)}
.b-info{background:var(--info-bg);color:var(--info)}
.b-warning{background:var(--warning-bg);color:var(--warning)}
.b-danger{background:var(--danger-bg);color:var(--danger)}
.b-neutral{background:#f0f2f5;color:#333}

/* Avatar */
.avatar{border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:600;letter-spacing:.04em;flex:none;font-family:var(--font-text)}
.avatar.sm{width:26px;height:26px;font-size:10px}
.avatar.md{width:32px;height:32px;font-size:11px}
.avatar.lg{width:40px;height:40px;font-size:13px}
.avatar.xl{width:56px;height:56px;font-size:16px}

/* Table */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;letter-spacing:.04px}
.tbl th{text-align:left;font-weight:500;color:var(--text-mute);padding:10px 16px;border-bottom:1px solid var(--border);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:#fff}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-primary);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{cursor:pointer;transition:background 120ms ease}
.tbl tbody tr:hover td{background:var(--surface-subtle)}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* KPI */
.kpi{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-soft)}
.kpi .label{font-size:12px;color:var(--text-mute);letter-spacing:.06em;font-weight:500;text-transform:uppercase}
.kpi .value{font-family:var(--font-display);font-weight:900;font-size:30px;color:var(--text-primary);letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:4px}
.kpi .sublabel{font-size:13px;color:var(--text-weak);margin-top:2px}
.kpi .delta{font-size:12px;color:var(--success);font-weight:500;display:inline-flex;gap:4px;align-items:center;margin-top:6px}
.kpi .delta.down{color:var(--danger)}
.kpi .delta .i{width:13px;height:13px}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);padding:0 24px}
.tab{font-size:14px;color:var(--text-mute);padding:14px 14px;border-bottom:2px solid transparent;font-weight:500;letter-spacing:.04px;cursor:pointer;margin-bottom:-1px;transition:all 140ms ease;background:transparent}
.tab:hover{color:var(--text-primary)}
.tab.active{color:var(--text-primary);border-color:var(--vista-navy)}

/* Breadcrumb */
.crumbs{font-size:13px;color:var(--text-mute);letter-spacing:.04px;display:flex;align-items:center;gap:8px}
.crumbs a{color:var(--text-mute)}
.crumbs a:hover{color:var(--text-primary)}
.crumbs .sep{color:var(--border-strong)}
.crumbs .now{color:var(--text-primary);font-weight:500}

/* Empty state */
.empty-state{padding:48px 24px;text-align:center;color:var(--text-weak)}
.empty-state .ico{width:42px;height:42px;color:var(--border-strong);stroke-width:1.5;margin:0 auto 10px;display:block}
.empty-state .title{font-size:14px;color:var(--text-primary);font-weight:600;margin-bottom:4px;letter-spacing:.04px}
.empty-state .sub{font-size:13px;color:var(--text-weak);max-width:340px;margin:0 auto;line-height:1.5}

/* Eyebrow */
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--vista-blue)}

/* Tweaks button placeholder hidden */

/* Misc */
.divider{height:1px;background:var(--border)}
.row-flex{display:flex;align-items:center;gap:12px}
.spacer{flex:1}