/* ============================================================
PRAXIA CRM — LIGHT NAVY + WHITE
============================================================ */
:root{
  --navy:#234a73;
  --navy-dark:#183a5b;
  --navy-2:#355f89;
  --navy-strip:#6f91b4;
  --navy-strip-dark:#5e7fa1;
  --navy-pale:#f4f8fc;

  --accent:var(--navy);
  --accent-pale:#eef4fa;
  --accent2:#4f78a3;
  --accent2-pale:#edf4fa;

  --steel:#60798f;
  --steel-pale:#f1f5f8;
  --purple:#60798f;
  --purple-pale:#f1f5f8;

  --warn:#9a6700;
  --warn-pale:#fff7e6;
  --danger:#b42318;
  --danger-pale:#fff1f0;

  --surface:#fff;
  --paper:#f8fafc;
  --rule:#e4eaf1;
  --rule-md:#d5dee8;

  --ink:#1d2b3a;
  --ink2:#44586d;
  --ink3:#7b8da0;
}

/* APP */
#app-shell{display:none;position:fixed;inset:0}
#app-shell.visible{display:flex}
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff}
.page{display:none;flex:1;flex-direction:column;padding:14px 20px;gap:10px;overflow-y:auto;background:#fff}
.page.active{display:flex}

/* SIDEBAR */
.sidebar{
  width:230px;min-width:230px;height:100%;display:flex;
  flex-direction:column;overflow-y:auto;flex-shrink:0;
  background:var(--navy-dark);border-right:1px solid #ffffff14
}
.logo{
  padding:20px 18px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:var(--navy-dark);border-bottom:1px solid #ffffff14
}
.logo-mark{display:flex;align-items:center;gap:8px;font:700 19px var(--head);color:#fff;letter-spacing:-.5px}
.logo-mark .dot{width:8px;height:8px;border-radius:2px;background:#fff}
.logo-sub,.nav-sec-label{font-family:var(--mono);text-transform:uppercase;color:#ffffff59}
.logo-sub{font-size:9.5px;letter-spacing:1.2px;margin-top:2px}
.nav-sec{padding:12px 10px 4px}
.nav-sec-label{padding:0 8px;margin-bottom:4px;font-size:9.5px;letter-spacing:1.1px}

.nav-btn{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:8px 10px;border:0;border-radius:6px;
  background:none;color:#ffffffa0;font:13px var(--sans);
  text-align:left;cursor:pointer;transition:.12s
}
.nav-btn:hover{background:#ffffff12;color:#fff}
.nav-btn.active{background:#ffffff20;color:#fff;border-left:2px solid #fff;padding-left:8px}
.nav-btn i{width:17px;font-size:15px}
.nav-pill{margin-left:auto;padding:1px 6px;border-radius:10px;background:#fff;color:var(--navy);font:600 10px var(--mono)}
.np-warn{background:var(--warn);color:#fff}
.sidebar-footer{margin-top:auto;padding:14px 16px;background:var(--navy-dark);border-top:1px solid #ffffff14}

/* TOPBAR */
.topbar{
  height:54px;padding:0 24px;display:flex;align-items:center;
  flex-shrink:0;z-index:20;background:var(--navy);border-bottom:1px solid #ffffff14
}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.page-title,.topbar i,.topbar button{color:#fff}
.page-title{font-size:18px;font-weight:600}
.topbar input{color:#fff}
.topbar input::placeholder{color:#ffffff99}

.user-row{display:flex;align-items:center;gap:10px}
.avatar-sm,.user-av{
  display:flex;align-items:center;justify-content:center;
  background:var(--navy-2);color:#fff;font-family:var(--head);font-weight:700
}
.avatar-sm{width:30px;height:30px;border-radius:6px;font-size:11px}
.user-av{width:36px;height:36px;border-radius:var(--r);font-size:13px}
.uname{font-size:12.5px;color:#ffffffd1;font-weight:500}
.urole-label{font-size:10.5px;color:#ffffff73}

.logout-btn{
  width:100%;display:flex;align-items:center;gap:7px;
  margin-top:8px;padding:7px 10px;border:0;border-radius:6px;
  background:none;color:#ffffff80;font:12px var(--sans);cursor:pointer
}
.logout-btn:hover{background:#ffffff12;color:#fff}

/* CARDS */
.card,.stat,.incentive-card{background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg)}

.card-hd{
  padding:11px 16px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;
  background:var(--navy-strip);color:#fff;
  border-radius:var(--r-lg) var(--r-lg) 0 0
}
.card-hd h3{font:600 13.5px var(--head);color:#fff}
.card-hd .text-muted{color:#ffffffe0}
.card-bd{padding:18px}
.card-bd.np{padding:0}

.sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sec-head h2{font:600 16px var(--head);color:var(--navy)}
.sec-head p,.text-muted{font-size:12px;color:var(--ink3)}
.sec-head p{margin-top:2px}

/* STATS */
.stats-row{display:grid;gap:12px}
.s4{grid-template-columns:repeat(4,1fr)}
.s3{grid-template-columns:repeat(3,1fr)}
.s2{grid-template-columns:repeat(2,1fr)}

.stat{padding:16px 18px;position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--navy)}
.stat.green::before{background:#3f7d62}
.stat.steel::before,.stat.purple::before{background:var(--steel)}
.stat.warn::before{background:var(--warn)}
.stat .s-label{font:11px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px}
.stat .s-val{font:700 24px var(--head);color:var(--navy);letter-spacing:-.5px}
.stat .s-sub{font-size:11px;color:var(--ink3);margin-top:3px}
.stat .s-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:28px;color:var(--rule-md)}

/* FORMS */
.flabel{display:block;margin-bottom:4px;font:500 11px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--ink3)}
.finput,.fselect,.ftextarea{
  width:100%;padding:9px 12px;border:1px solid var(--rule-md);
  border-radius:var(--r);background:#fff;color:var(--ink);
  font:13px var(--sans);outline:none;transition:.12s
}
.finput:focus,.fselect:focus,.ftextarea:focus{border-color:var(--navy-2);box-shadow:0 0 0 3px #234a7314}
.ftextarea{resize:vertical;min-height:72px}
.fgroup{margin-bottom:14px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border:0;border-radius:var(--r);
  font:500 13px var(--sans);cursor:pointer;white-space:nowrap;transition:.12s
}
.btn-primary,.btn-green{background:var(--navy);color:#fff}
.btn-primary:hover,.btn-green:hover{background:var(--navy-2)}
.btn-outline{background:#fff;color:var(--navy);border:1px solid var(--rule-md)}
.btn-outline:hover{background:var(--navy-pale);border-color:#b9c7d7}
.btn-danger{background:var(--danger);color:#fff}
.btn-steel{background:var(--steel);color:#fff}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-block{width:100%;justify-content:center;padding:10px 16px;font-size:14px}

.icon-btn{
  width:32px;height:32px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--rule-md);
  border-radius:var(--r);background:#fff;color:var(--ink2);cursor:pointer
}
.icon-btn:hover{background:var(--navy-pale);color:var(--navy)}
.topbar .icon-btn{background:#ffffff14;border-color:#ffffff24;color:#fff}
.topbar .icon-btn:hover{background:#ffffff29}

/* TABLES */
table{width:100%;border-collapse:collapse}
th{
  padding:10px 16px;background:var(--navy-strip);color:#fff;
  text-align:left;font:500 10.5px var(--mono);
  letter-spacing:.7px;text-transform:uppercase;
  border-bottom:1px solid var(--navy-strip-dark)
}
td{padding:11px 16px;border-bottom:1px solid var(--rule);font-size:13px;vertical-align:middle}
tr:last-child td{border-bottom:0}
tr.clickable:hover td{background:var(--navy-pale);cursor:pointer}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:4px;font:500 11px var(--mono)}
.bn{background:var(--paper);color:var(--ink2)}
.bb,.bp{background:var(--steel-pale);color:var(--steel)}
.bo{background:var(--accent-pale);color:var(--navy)}
.bg{background:#edf8f3;color:#18794e}
.bw{background:var(--warn-pale);color:var(--warn)}
.bd{background:var(--danger-pale);color:var(--danger)}

/* CHIPS / PROGRESS */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  padding:5px 12px;border:1px solid var(--rule-md);
  border-radius:20px;background:#fff;color:var(--ink2);
  font:12px var(--mono);cursor:pointer;transition:.12s
}
.chip:hover{background:var(--navy-pale)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.prog-bar{height:5px;background:var(--paper);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;background:var(--navy);border-radius:3px}

/* KANBAN */
.kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;overflow-x:auto;padding-bottom:4px}
.k-col{min-width:170px;padding:12px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg)}
.k-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.k-head span{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:1px;color:var(--ink3)}
.k-count{padding:1px 6px;border-radius:4px;background:var(--rule);color:var(--ink2);font:10px var(--mono)}

.deal{
  padding:11px 13px;margin-bottom:8px;background:#fff;
  border:1px solid var(--rule);border-radius:var(--r);
  cursor:pointer;transition:.12s
}
.deal:hover{border-color:#bdc9d7;box-shadow:0 2px 8px #234a7310}
.deal h4{font-size:12.5px;font-weight:500;margin-bottom:2px}
.deal .dco,.deal .downer{font-size:11.5px;color:var(--ink3)}
.deal .downer{font-size:11px;margin-bottom:6px}
.deal .dmeta{display:flex;justify-content:space-between;align-items:center}
.deal-amt{font:500 12px var(--mono);color:var(--navy)}

/* MODALS */
.modal-bg{display:none;position:fixed;inset:0;background:#183a5b66;z-index:100;align-items:center;justify-content:center}
.modal-bg.open{display:flex}
.modal{width:640px;max-width:96vw;max-height:92vh;overflow-y:auto;background:#fff;border-radius:var(--r-lg);box-shadow:0 12px 40px #183a5b29}
.modal-sm{width:460px}
.modal-hd,.modal-ft{position:sticky;background:#fff;z-index:2}
.modal-hd{top:0;padding:18px 22px;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between}
.modal-hd h2{font:600 16px var(--head);color:var(--navy)}
.modal-bd{padding:22px}
.modal-ft{bottom:0;padding:14px 22px;border-top:1px solid var(--rule);display:flex;justify-content:flex-end;gap:8px}

/* DRAWER */
.drawer-overlay{position:fixed;inset:0;background:#183a5b47;z-index:200;opacity:0;pointer-events:none;transition:.2s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;width:min(92vw,1020px);height:100vh;
  background:#fff;z-index:201;transform:translateX(100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-8px 0 40px #183a5b1f
}
.drawer.open{transform:none}
.drawer-hd{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px 0;border-bottom:1px solid var(--rule);background:#fff}
.drawer-body{display:grid;grid-template-columns:280px 1fr 260px;flex:1;overflow:hidden}
.drawer-col{overflow-y:auto;padding:20px;border-right:1px solid var(--rule)}
.drawer-col:last-child{border-right:0}
.drawer-col-hd{padding-bottom:8px;margin-bottom:12px;border-bottom:1px solid var(--rule);color:var(--ink3);font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.9px}

.field-row{margin-bottom:12px}
.field-val{min-height:28px;padding:6px 0;border-radius:4px;font-size:13px;font-weight:500;cursor:text}
.field-val:hover{background:var(--paper);padding:6px 8px;margin:0 -8px}
.field-val.editing{display:none}
.field-edit{display:none;width:100%}
.field-edit.editing{display:block}

.quick-actions{display:flex;gap:6px;flex-wrap:wrap;padding:12px 0;margin-bottom:16px;border-bottom:1px solid var(--rule)}
.qa-btn{
  display:flex;align-items:center;gap:5px;padding:7px 12px;
  border:1px solid var(--rule-md);border-radius:20px;
  background:#fff;color:var(--ink2);font:12px var(--sans);cursor:pointer
}
.qa-btn:hover{background:var(--navy-pale);border-color:var(--navy-2);color:var(--navy)}

/* DOCUMENTS / INFO */
.doc-row,.activity-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.doc-row:last-child,.activity-item:last-child{border-bottom:0}
.doc-icon{width:36px;height:36px;border-radius:var(--r);background:var(--navy-pale);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:18px}
.info-box,.linked-card,.evt{background:var(--navy-pale);border-radius:var(--r)}
.info-box{padding:10px 14px;font-size:12.5px;color:var(--navy);display:flex;gap:8px}
.linked-card{padding:10px 12px;margin-bottom:8px;cursor:pointer}
.linked-card:hover{background:#e7eef7}
.next-action-box{padding:12px;background:var(--navy-pale);border:1px solid #d5e0ec;border-radius:var(--r)}
.next-action-box .na-label{font:10.5px var(--mono);color:var(--navy);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}

/* RIGHTS */
.rights-grid{display:grid;grid-template-columns:280px 1fr;gap:20px}
.user-list-item{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:4px;border:1px solid transparent;border-radius:var(--r);cursor:pointer}
.user-list-item:hover{background:var(--paper)}
.user-list-item.selected{background:var(--navy-pale);border-color:#d5e0ec}
.perm-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--rule)}
.perm-row:last-child{border-bottom:0}
.perm-label{font-size:13px;font-weight:500}
.perm-desc{font-size:11.5px;color:var(--ink3)}

.toggle{position:relative;width:40px;height:22px}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--rule-md);border-radius:11px;cursor:pointer}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked+.toggle-slider{background:var(--navy)}
.toggle input:checked+.toggle-slider::before{transform:translateX(18px)}

/* PORTAL / TIMELINE */
.portal-hero{padding:24px 28px;border-radius:var(--r-lg);background:var(--navy);color:#fff}
.portal-hero h2{font:600 20px var(--head);margin-bottom:4px}
.portal-hero p{font-size:13px;color:#ffffff99}
.tl{position:relative;padding-left:22px}
.tl::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--rule)}
.tl-item{position:relative;padding-bottom:14px}
.tl-dot{position:absolute;left:-19px;top:4px;width:13px;height:13px;border-radius:50%;border:2px solid #fff}
.tl-item h4{font-size:12.5px;font-weight:500}
.tl-item p{font-size:11.5px;color:var(--ink3)}

/* SEARCH / TOAST */
.search-wrap{height:34px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#fff;border:1px solid var(--rule-md);border-radius:var(--r)}
.search-wrap input{width:200px;border:0;background:transparent;outline:0;color:var(--ink);font:13px var(--sans)}
.search-wrap i{font-size:14px;color:var(--ink3)}
.toast{
  position:fixed;right:22px;bottom:22px;z-index:999;
  display:none;align-items:center;gap:9px;padding:11px 16px;
  border-radius:var(--r);background:var(--navy);color:#fff;
  font:12.5px var(--mono);box-shadow:0 4px 16px #183a5b2e
}
.toast.show{display:flex;animation:up .25s ease}
@keyframes up{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* UTILITIES */
.flex{display:flex}.fac{align-items:center}.fjb{justify-content:space-between}
.gap6{gap:6px}.gap10{gap:10px}.gap14{gap:14px}.gap18{gap:18px}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt14{margin-top:14px}.mt18{margin-top:18px}
.mb10{margin-bottom:10px}.mb14{margin-bottom:14px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dash-grid{display:grid;grid-template-columns:1fr 310px;gap:18px}
.mono{font-family:var(--mono);font-size:12px}
.bold{font-weight:600}
.divider{height:1px;background:var(--rule);margin:16px 0}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--rule-md);border-radius:3px}