/* NextPay Sales Hub — shared shell styles (left sidebar layout).
   Brand: navy #0C1B2A · teal #14A18C · bright teal #1FC2A6 · Plus Jakarta Sans. */

:root{
  --navy:#0C1B2A; --navy-2:#122536; --navy-3:#1A3049;
  --teal:#14A18C; --teal-bright:#1FC2A6; --teal-soft:rgba(20,161,140,.12);
  --ink:#16283A; --mut:#5B6B7B; --line:#D8E1E8; --line-strong:#C7D4DE; --soft:#F4F7FA; --card:#FFFFFF;
  --amber:#E8A33D; --red:#D65A5A; --green:#2E9E6B;
  --rad:16px; --rad-sm:10px;
  --side-w:248px;
  --shadow:0 8px 28px rgba(12,27,42,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--soft);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
b,strong{font-weight:700}

/* ---------- Shell ---------- */
.hub-shell{display:flex;min-height:100vh}
.hub-main{flex:1;min-width:0;padding:28px clamp(18px,3.5vw,44px) 64px;margin-left:var(--side-w)}
@media(max-width:920px){.hub-main{margin-left:0;padding-top:74px}}

/* ---------- Sidebar ---------- */
.hub-side{position:fixed;top:0;left:0;bottom:0;width:var(--side-w);background:var(--navy);color:#DCE7F0;display:flex;flex-direction:column;z-index:60;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--navy-3) transparent}
.hub-side::-webkit-scrollbar{width:6px}
.hub-side::-webkit-scrollbar-thumb{background:var(--navy-3);border-radius:3px}
.hs-logo{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.hs-logo .box{background:#fff;border-radius:10px;padding:6px 9px;display:flex}
.hs-logo img{height:24px;display:block}
.hs-logo .t{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright)}
.hs-user{margin:0 14px 10px;padding:9px 12px;background:var(--navy-2);border-radius:var(--rad-sm);font-size:12px;color:#9FB2C2;word-break:break-word;line-height:1.4}
.hs-user b{color:#fff;font-weight:600}
.hs-sec{padding:14px 18px 5px;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#5F7488}
.hub-side nav a{display:flex;align-items:center;gap:11px;padding:9px 14px;margin:1px 8px;border-radius:var(--rad-sm);color:#C7D4E0;font-weight:600;font-size:13.5px;text-decoration:none;transition:background .15s,color .15s}
.hub-side nav a svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.hub-side nav a:hover{background:var(--navy-2);color:#fff;text-decoration:none}
.hub-side nav a.on{background:var(--teal);color:#fff}
.hub-side nav a.on svg{opacity:1}
.hs-foot{margin-top:auto;padding:16px 18px 20px;font-size:11.5px;color:#5F7488}
.hs-foot a{color:#8FA5B8}

/* Mobile top bar + drawer */
.hub-topbar{display:none;position:fixed;inset:0 0 auto 0;height:58px;background:var(--navy);color:#fff;z-index:70;align-items:center;gap:12px;padding:0 16px}
.hub-topbar .box{background:#fff;border-radius:8px;padding:4px 7px;display:flex}
.hub-topbar img{height:20px}
.hub-topbar .t{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--teal-bright)}
.hub-burger{margin-left:auto;background:var(--navy-2);border:0;color:#fff;border-radius:8px;padding:8px 10px;cursor:pointer;font-size:16px;line-height:1}
@media(max-width:920px){
  .hub-topbar{display:flex}
  .hub-side{transform:translateX(-100%);transition:transform .22s ease;top:58px}
  body.side-open .hub-side{transform:none}
  body.side-open::after{content:'';position:fixed;inset:58px 0 0 0;background:rgba(12,27,42,.45);z-index:55}
}

/* ---------- Page primitives ---------- */
.pg-head{margin:6px 0 22px}
.pg-head .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.pg-head h1{font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.02em;margin-top:4px}
.pg-head p{color:var(--mut);max-width:760px;margin-top:8px}
.card{background:var(--card);border:2px solid var(--line-strong);border-radius:var(--rad);padding:22px;box-shadow:var(--shadow);border-left:4px solid var(--teal)}
a.card{display:block;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
a.card:hover{border-color:var(--teal);box-shadow:0 10px 32px rgba(12,27,42,.12);transform:translateY(-2px)}
.card h3{font-size:17px;margin-bottom:6px;color:var(--navy)}
.card > b{display:block;font-size:15px;color:var(--navy);margin-bottom:4px;font-weight:800}
.card>h3:first-child,.card>h2:first-child{padding-bottom:10px;border-bottom:1.5px solid var(--line);margin-bottom:14px}
.card + .card{margin-top:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;grid-auto-rows:1fr;width:100%}
.grid2 > *{min-width:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-auto-rows:1fr;width:100%}
.grid3 > *{min-width:0}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-rows:1fr;width:100%}
.grid4 > *{min-width:0}
@media(max-width:1100px){.grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:700;font-size:14px;padding:11px 20px;cursor:pointer;border:0;text-decoration:none;transition:filter .15s}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn-primary{background:var(--teal);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-outline{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-sm{padding:7px 14px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.chip{display:inline-flex;align-items:center;gap:6px;background:var(--teal-soft);color:var(--teal);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700}
.chip.navy{background:rgba(12,27,42,.08);color:var(--navy)}
.chip.amber{background:rgba(232,163,61,.14);color:#A9741F}
.chip.red{background:rgba(214,90,90,.12);color:var(--red)}
.chip.green{background:rgba(46,158,107,.12);color:var(--green)}

.note{background:var(--teal-soft);border-left:4px solid var(--teal);border-radius:0 var(--rad-sm) var(--rad-sm) 0;padding:12px 16px;font-size:13.5px;margin:14px 0}
.note.warn{background:rgba(232,163,61,.1);border-color:var(--amber)}
.note.internal{background:rgba(214,90,90,.08);border-color:var(--red)}

table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:8px 10px;border-bottom:2px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:hover td{background:var(--soft)}
.tbl-wrap{overflow-x:auto}

input.fi,select.fi,textarea.fi{width:100%;border:1.5px solid var(--line);border-radius:var(--rad-sm);padding:10px 12px;font:inherit;font-size:14px;background:#fff;color:var(--ink)}
input.fi:focus,select.fi:focus,textarea.fi:focus{outline:none;border-color:var(--teal)}
label.fl{display:block;font-size:12px;font-weight:700;color:var(--mut);margin:12px 0 5px;letter-spacing:.04em;text-transform:uppercase}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px}
@media(max-width:640px){.frow,.frow3{grid-template-columns:1fr}}

/* Steps / checklists */
.steps{counter-reset:st;display:flex;flex-direction:column;gap:12px}
.step{display:flex;gap:14px;background:var(--card);border:1.5px solid var(--line-strong);border-radius:var(--rad);padding:16px 18px}
.step::before{counter-increment:st;content:counter(st);flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.step h4{font-size:15px;margin-bottom:3px}
.step p{color:var(--mut);font-size:13.5px}
ul.ck{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:8px}
ul.ck li{display:flex;gap:10px;font-size:13.5px;align-items:flex-start;flex-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}
ul.ck li::before{content:'•';flex:none;width:auto;height:auto;margin-top:0px;color:var(--teal);font-weight:700;font-size:16px;line-height:1}
ul.ck.plain li::before{color:var(--mut)}

/* Pipeline board */
.pipe{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(215px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.pipe-col{background:var(--soft);border:1.5px solid var(--line-strong);border-radius:var(--rad);padding:10px;min-height:120px}
.pipe-col h5{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding:2px 6px 8px;display:flex;justify-content:space-between}
.deal-card{background:#fff;border:1px solid var(--line);border-radius:var(--rad-sm);padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:box-shadow .15s;border-left:3px solid var(--teal)}
.deal-card:hover{box-shadow:var(--shadow)}
.deal-card .nm{font-weight:700;font-size:13.5px}
.deal-card .meta{font-size:11.5px;color:var(--mut);margin-top:2px}

/* Wizard */
.wiz-bar{display:flex;gap:6px;margin:14px 0 20px;flex-wrap:wrap}
.wiz-bar span{flex:1;min-width:70px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--mut);padding:7px 4px;border-radius:999px;background:#fff;border:1.5px solid var(--line)}
.wiz-bar span.on{background:var(--teal);border-color:var(--teal);color:#fff}
.wiz-bar span.done{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.pick{background:#fff;border:1.5px solid var(--line);border-radius:var(--rad-sm);padding:13px 14px;font-weight:700;font-size:13.5px;cursor:pointer;text-align:left;transition:border-color .12s,background .12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--teal)}
.pick small{display:block;font-weight:500;color:var(--mut);font-size:11.5px;margin-top:2px}
.pick:hover{border-color:var(--teal)}
.pick.on{border-color:var(--teal);background:var(--teal-soft)}
.rec-box{border:1.5px solid var(--teal);border-radius:var(--rad);padding:18px;background:#fff}
.rec-box .tag{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.alt-box{border:1.5px solid var(--line-strong);border-radius:var(--rad);padding:14px 16px;background:#fff;border-left:3px solid var(--teal)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(12,27,42,.5);z-index:90;display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:var(--rad);max-width:680px;width:100%;padding:26px;position:relative}
.modal .x{position:absolute;top:14px;right:16px;background:var(--soft);border:0;border-radius:8px;width:32px;height:32px;font-size:16px;cursor:pointer}

/* Stat tiles */
.stat{background:var(--card);border:2px solid var(--line-strong);border-radius:var(--rad);padding:16px 18px;border-left:4px solid var(--teal)}
.stat .n{font-size:26px;font-weight:800;letter-spacing:-.02em}
.stat .l{font-size:12px;color:var(--mut);font-weight:600;margin-top:2px}

.muted{color:var(--mut)}
.small{font-size:12.5px}
.right{text-align:right}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mb8{margin-bottom:8px}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
hr.sep{border:0;border-top:1px solid var(--line);margin:18px 0}