:root{
  --bg:#0e1113;--p:#171a1d;--p2:#1e2226;--p3:#252b30;
  --tx:#f0edea;--mu:#8a9298;--su:#4f5a62;
  --ln:rgba(240,237,234,.08);--lns:rgba(240,237,234,.16);
  --or:#f18e00;--or-d:rgba(241,142,0,.10);--or-g:rgba(241,142,0,.28);
  --gn:#2dab60;--gn-d:rgba(45,171,96,.10);
  --rd:#d04040;--rd-d:rgba(208,64,64,.10);
  --am:#d9920b;--am-d:rgba(217,146,11,.10);
  --bl:#3d7dca;--bl-d:rgba(61,125,202,.10);
  --r:18px;--rs:13px;--rx:9px;--pill:999px;
  --fn:"Inter",sans-serif;--dp:"Montserrat",sans-serif;
}
[data-theme=light]{
  --bg:#f4f2ef;--p:#ffffff;--p2:#eceae6;--p3:#e2dfd9;
  --tx:#1a1e22;--mu:#6b7580;--su:#9aa3ad;
  --ln:rgba(26,30,34,.09);--lns:rgba(26,30,34,.16);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:var(--fn);background:var(--bg);color:var(--tx);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.55}
input,button,textarea,select{font:inherit;color:inherit;border:none;outline:none;background:none;cursor:pointer}
a{color:var(--or);text-decoration:none}

/* ── BAR ── */
.bar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 1.4rem;background:rgba(14,17,19,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--ln);position:sticky;top:0;z-index:50}
[data-theme=light] .bar{background:rgba(244,242,239,.94)}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.logo-m{width:34px;height:34px;background:var(--or);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--dp);font-weight:900;font-size:.95rem;color:#0e1113;letter-spacing:-.04em;box-shadow:0 4px 14px var(--or-g);flex-shrink:0}
.logo-t{font-family:var(--dp);font-weight:900;font-size:1.05rem;letter-spacing:-.04em;color:var(--tx)}
.logo-t span{color:var(--or)}
.logo-tag{font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mu);margin-left:.3rem}
.bar-r{display:flex;align-items:center;gap:.55rem}
.welcome{font-size:.78rem;font-weight:700;color:var(--mu)}
.welcome strong{color:var(--tx)}
.bar-badge{font-size:.68rem;font-weight:700;padding:.2rem .6rem;border-radius:var(--pill);background:rgba(217,146,11,.12);color:var(--am);border:1px solid rgba(217,146,11,.22)}
.icon-btn{width:32px;height:32px;border-radius:var(--rx);background:var(--p2);border:1px solid var(--ln);display:flex;align-items:center;justify-content:center;color:var(--mu);transition:color .15s}
.icon-btn:hover{color:var(--tx)}
.icon-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── GATE ── */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:var(--bg)}
.gate-card{width:100%;max-width:360px;background:var(--p);border:1.5px solid var(--lns);border-radius:var(--r);padding:2rem 1.6rem}
.gate-logo{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1.8rem}
.gate-title{font-family:var(--dp);font-size:1.1rem;font-weight:900;letter-spacing:-.04em;text-align:center;margin-bottom:.25rem}
.gate-sub{font-size:.76rem;color:var(--mu);text-align:center;margin-bottom:1.5rem}
.fl{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);display:block;margin-bottom:.35rem}
.fi{width:100%;background:var(--p2);border:1.5px solid var(--lns);border-radius:var(--rx);padding:.65rem .85rem;font-size:.88rem;color:var(--tx);transition:border-color .15s,box-shadow .15s;margin-bottom:.75rem}
.fi:focus{border-color:rgba(241,142,0,.5);box-shadow:0 0 0 3px rgba(241,142,0,.08)}
.fi::placeholder{color:var(--su)}
.btn-full{width:100%;padding:.72rem;border-radius:var(--pill);font-weight:800;font-size:.88rem;background:var(--or);color:#0e1113;border:none;box-shadow:0 6px 20px rgba(241,142,0,.28);cursor:pointer;transition:filter .15s}
.btn-full:hover{filter:brightness(1.07)}
.gate-err{font-size:.74rem;color:var(--rd);text-align:center;margin-top:.6rem;display:none}
.gate-err.show{display:block}

/* ── SHELL ── */
.shell{display:none}
.shell.show{display:block}

/* ── KPI STRIP ── */
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;padding:.9rem 1.25rem;border-bottom:1px solid var(--ln);background:var(--p)}
.kpi{background:var(--p2);border:1px solid var(--ln);border-radius:var(--rs);padding:.7rem .85rem}
.kpi-label{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);margin-bottom:.28rem}
.kpi-value{font-family:var(--dp);font-size:1.5rem;font-weight:900;line-height:1;letter-spacing:-.04em}
.kpi-value.am{color:var(--am)}.kpi-value.or{color:var(--or)}.kpi-value.gn{color:var(--gn)}.kpi-value.tx{color:var(--tx)}

/* ── TAB BAR ── */
.tab-bar{display:flex;gap:.12rem;padding:.5rem 1.25rem;border-bottom:1px solid var(--ln);background:var(--p);overflow-x:auto;scrollbar-width:none}
.tab-bar::-webkit-scrollbar{display:none}
.tab{padding:.46rem .88rem;border-radius:var(--pill);font-size:.76rem;font-weight:700;color:var(--mu);cursor:pointer;transition:all .14s;white-space:nowrap;flex-shrink:0}
.tab:hover{color:var(--tx);background:var(--p2)}
.tab.active{background:var(--or-d);color:var(--or);border:1px solid rgba(241,142,0,.2)}
.tab-count{display:inline-block;font-size:.6rem;font-weight:800;padding:.1rem .32rem;border-radius:var(--pill);margin-left:.28rem;background:var(--p3);color:var(--mu)}
.tab.active .tab-count{background:rgba(241,142,0,.15);color:var(--or)}

/* ── CONTENT ── */
.content{padding:1rem 1.25rem 4rem;max-width:960px}
.empty{text-align:center;padding:3rem 1rem;color:var(--mu);font-size:.82rem}
.empty svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.3;margin:0 auto .7rem;display:block}

/* ── APP LIST ── */
.app-list{display:flex;flex-direction:column;gap:.55rem}
.app-card{background:var(--p);border:1.5px solid var(--lns);border-radius:var(--rs);overflow:hidden;transition:border-color .15s}
.app-card:hover{border-color:rgba(241,142,0,.28)}
.app-card.expanded{border-color:var(--or)}
.app-head{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;cursor:pointer}
.app-avatar{width:36px;height:36px;border-radius:50%;background:var(--or-d);border:1.5px solid rgba(241,142,0,.2);display:flex;align-items:center;justify-content:center;font-family:var(--dp);font-weight:900;font-size:.84rem;color:var(--or);flex-shrink:0;letter-spacing:-.02em}
.app-main{flex:1;min-width:0}
.app-name{font-size:.86rem;font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-meta{font-size:.7rem;color:var(--mu);margin-top:.1rem}
.app-right{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.5rem;flex-shrink:1;min-width:0}
.chevron{color:var(--mu);transition:transform .2s;flex-shrink:0}
.app-card.expanded .chevron{transform:rotate(180deg)}
.chevron svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.chip{display:inline-flex;align-items:center;gap:.25rem;padding:.18rem .58rem;border-radius:var(--pill);font-size:.64rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.chip::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.chip-pending{background:var(--am-d);color:var(--am);border:1px solid rgba(217,146,11,.22)}.chip-pending::before{background:var(--am)}
.chip-reviewing{background:var(--or-d);color:var(--or);border:1px solid rgba(241,142,0,.22)}.chip-reviewing::before{background:var(--or);animation:pulse 1.6s ease infinite}
.chip-approved{background:var(--gn-d);color:var(--gn);border:1px solid rgba(45,171,96,.22)}.chip-approved::before{background:var(--gn)}
.chip-rejected{background:var(--rd-d);color:var(--rd);border:1px solid rgba(208,64,64,.22)}.chip-rejected::before{background:var(--rd)}
.chip-driver{background:var(--bl-d);color:#7db3f5;border:1px solid rgba(61,125,202,.22)}.chip-driver::before{background:#7db3f5}
.chip-freight{background:var(--or-d);color:var(--or);border:1px solid rgba(241,142,0,.18)}.chip-freight::before{background:var(--or)}
.chip-business{background:rgba(139,92,246,.1);color:#a78bfa;border:1px solid rgba(139,92,246,.25)}.chip-business::before{background:#a78bfa}
.chip-seen{background:rgba(240,237,234,.06);color:var(--mu);border:1px solid var(--ln)}.chip-seen::before{background:var(--mu)}

/* Where the account stands in the network AFTER the compliance check — green only
   once the KNECT membership has actually activated on the record. */
.npill{display:inline-flex;align-items:center;gap:.28rem;padding:.16rem .55rem;border-radius:var(--pill);font-size:.64rem;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.npill::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.net-on{background:var(--gn-d);color:var(--gn);border:1px solid rgba(45,171,96,.3)}.net-on::before{background:var(--gn);box-shadow:0 0 0 3px rgba(45,171,96,.18)}
.net-mid{background:var(--am-d);color:var(--am);border:1px solid rgba(217,146,11,.25)}.net-mid::before{background:var(--am);animation:pulse 1.6s ease infinite}
.net-off{background:rgba(240,237,234,.05);color:var(--mu);border:1px solid var(--ln)}.net-off::before{background:var(--su)}
.net-no{background:var(--rd-d);color:var(--rd);border:1px solid rgba(208,64,64,.25)}.net-no::before{background:var(--rd)}
.net-none{background:transparent;color:var(--su);border:1px solid transparent}.net-none::before{display:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── CRM LIST VIEW ──
   Cards stop being readable somewhere past twenty accounts, so Approved and All
   render as a numbered, striped table: one line per record, scannable at 50, 100,
   500. Alternating rows use transparency rather than fixed colours so the stripe
   works in both the dark and the light theme. */
.view-switch{display:flex;gap:.3rem;margin-bottom:.7rem}
.vs-btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;padding:.34rem .7rem;border-radius:var(--pill);background:var(--p);border:1.5px solid var(--lns);color:var(--mu);transition:all .14s}
.vs-btn:hover{color:var(--tx)}
.vs-btn.on{background:var(--or-d);border-color:var(--or-g);color:var(--or)}
.vs-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.list-tools{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem;flex-wrap:wrap}
.list-search{flex:1;min-width:190px;display:flex;align-items:center;gap:.5rem;background:var(--p);border:1.5px solid var(--lns);border-radius:var(--rx);padding:.4rem .7rem}
.list-search svg{width:14px;height:14px;fill:none;stroke:var(--mu);stroke-width:2;stroke-linecap:round;flex-shrink:0}
.list-search input{flex:1;min-width:0;font-size:.78rem;font-weight:600;cursor:text}
.list-search input::placeholder{color:var(--su);font-weight:500}
.list-count{font-size:.7rem;font-weight:700;color:var(--mu);white-space:nowrap}

/* Column picker — the standard columns suit most days, the rest are one tick away */
.col-pick{position:relative}
.col-menu{position:absolute;top:calc(100% + .35rem);right:0;z-index:30;min-width:210px;padding:.45rem;
  background:var(--p);border:1.5px solid var(--lns);border-radius:var(--rx);box-shadow:0 14px 34px rgba(0,0,0,.34)}
.col-menu-h{font-size:.58rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--su);padding:.2rem .45rem .35rem}
.col-opt{display:flex;align-items:center;gap:.5rem;padding:.33rem .45rem;border-radius:var(--rx);font-size:.74rem;font-weight:600;color:var(--mu);cursor:pointer}
.col-opt:hover{background:var(--or-d);color:var(--tx)}
.col-opt.on{color:var(--tx)}
.col-box{width:15px;height:15px;flex-shrink:0;border-radius:4px;border:1.5px solid var(--lns);display:flex;align-items:center;justify-content:center}
.col-opt.on .col-box{background:var(--or);border-color:var(--or)}
.col-box svg{width:10px;height:10px;fill:none;stroke:#12161a;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.col-opt.on .col-box svg{opacity:1}
.col-menu-f{border-top:1px solid var(--ln);margin-top:.35rem;padding-top:.35rem}
.col-menu-f button{width:100%;text-align:left;padding:.3rem .45rem;border-radius:var(--rx);font-size:.7rem;font-weight:700;color:var(--or)}
.col-menu-f button:hover{background:var(--or-d)}

/* New Applications reads as a to-do list: today's arrivals, then the ones we have
   opened and are still waiting on, then the rest. */
.qsec{margin-bottom:1.15rem}
.sec-head{display:flex;align-items:center;gap:.55rem;margin:0 0 .55rem}
.sec-t{font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tx)}
.sec-n{font-size:.62rem;font-weight:800;color:var(--or);background:var(--or-d);border:1px solid var(--or-g);border-radius:var(--pill);padding:.1rem .45rem;min-width:20px;text-align:center}
.sec-head::after{content:'';flex:1;height:1px;background:var(--ln)}
.sec-empty{font-size:.72rem;color:var(--su);padding:.15rem 0 .1rem}

.content.wide{max-width:1500px}
.crm-wrap{background:var(--p);border:1.5px solid var(--lns);border-radius:var(--rs);overflow-x:auto}
table.crm{width:100%;min-width:820px;border-collapse:collapse}
.crm th{position:sticky;top:0;z-index:3;background:var(--p2);text-align:left;white-space:nowrap;
  font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);
  padding:.6rem .7rem;border-bottom:1.5px solid var(--lns);cursor:pointer;user-select:none}
.crm th:hover{color:var(--tx)}
.crm th.num,.crm td.num{width:44px;text-align:right;padding-right:.55rem}
.crm th.chev,.crm td.chev{width:34px;cursor:default}
.crm td{padding:.5rem .7rem;font-size:.78rem;white-space:nowrap;vertical-align:middle;max-width:230px;overflow:hidden;text-overflow:ellipsis}
.th-ar{margin-left:.25rem;font-size:.55rem;color:var(--or)}

.crm tr.r{cursor:pointer;transition:background .12s}
.crm tr.row-a{background:transparent}
.crm tr.row-b{background:rgba(240,237,234,.05)}
[data-theme=light] .crm tr.row-b{background:rgba(26,30,34,.045)}
.crm tr.r:hover{background:var(--or-d)}
.crm tr.r.open{background:var(--or-d);box-shadow:inset 3px 0 0 var(--or)}
.crm td.num{color:var(--su);font-size:.7rem;font-weight:800}
.crm tr.r.open td.num{color:var(--or)}
.crm .c-user{font-family:var(--dp);font-weight:800;font-size:.76rem;letter-spacing:.03em;color:var(--or)}
.crm .c-ref{font-family:var(--dp);font-weight:700;font-size:.72rem;letter-spacing:.03em;color:var(--mu)}
.crm .c-name{font-weight:700;color:var(--tx)}
.crm .c-dim{color:var(--mu);font-size:.74rem}
.crm .c-yes{color:var(--gn);font-weight:700;font-size:.74rem}
.crm .c-no{color:var(--am);font-weight:700;font-size:.74rem}
.crm .c-miss{color:var(--rd);font-weight:700;font-size:.74rem}
.crm .c-reg{font-family:var(--dp);font-weight:700;letter-spacing:.04em;color:var(--tx)}
.cc-on{display:inline-flex;align-items:center;gap:.28rem;color:var(--gn);font-weight:800;font-size:.72rem}
.cc-on svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* With the wider record the table scrolls sideways — the number and the first
   column stay put so a row never loses its name. */
@media(min-width:761px){
  /* the number column must be EXACTLY 44px or the column that sticks beside it sits
     44px in and paints over its neighbour — pin it rather than suggest it */
  .crm th.num,.crm td.num{width:44px;min-width:44px;max-width:44px;box-sizing:border-box}
  .crm th.num,.crm td.num,.crm th.stick1,.crm td.stick1{position:sticky;z-index:2}
  .crm th.num,.crm td.num{left:0}
  .crm th.stick1,.crm td.stick1{left:44px;box-shadow:1px 0 0 var(--ln)}
  .crm th.num,.crm th.stick1{z-index:5;background:var(--p2)}
  .crm td.num,.crm td.stick1{background:var(--p)}
  .crm tr.row-b td.num,.crm tr.row-b td.stick1{background:linear-gradient(rgba(240,237,234,.05),rgba(240,237,234,.05)),var(--p)}
  [data-theme=light] .crm tr.row-b td.num,[data-theme=light] .crm tr.row-b td.stick1{background:linear-gradient(rgba(26,30,34,.045),rgba(26,30,34,.045)),var(--p)}
  .crm tr.r:hover td.num,.crm tr.r:hover td.stick1,
  .crm tr.r.open td.num,.crm tr.r.open td.stick1{background:linear-gradient(var(--or-d),var(--or-d)),var(--p)}
}
.crm td.chev svg{width:14px;height:14px;fill:none;stroke:var(--mu);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.crm tr.r.open td.chev svg{transform:rotate(180deg);stroke:var(--or)}

.crm tr.det{display:none}
.crm tr.det.open{display:table-row}
.crm tr.det>td{padding:0;white-space:normal;border-bottom:1.5px solid var(--lns)}
.det-box{padding:.95rem 1.1rem 1.1rem;background:var(--p2);white-space:normal}

/* ── DETAIL ── */
.app-detail{display:none;border-top:1px solid var(--ln);padding:.95rem 1.1rem 1.1rem}
.app-card.expanded .app-detail{display:block}

.detail-sec{font-size:.63rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mu);margin:.9rem 0 .5rem;display:flex;align-items:center;gap:.5rem}
.detail-sec::after{content:'';flex:1;height:1px;background:var(--ln)}
.detail-sec:first-child{margin-top:0}

.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .85rem;margin-bottom:.3rem}
.dg{display:flex;flex-direction:column;gap:.08rem}
.dl{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.dv{font-size:.8rem;font-weight:600;color:var(--tx)}
.dv.mono{font-family:var(--dp);letter-spacing:.04em;color:var(--or)}

/* ── COMPLIANCE DOC ROWS ── */
.doc-rows{display:flex;flex-direction:column;gap:.38rem;margin-bottom:.4rem}
.doc-row{display:flex;align-items:center;gap:.65rem;padding:.48rem .75rem;border-radius:var(--rx);background:var(--p2);border:1px solid var(--ln)}
.doc-row.missing{background:rgba(208,64,64,.06);border-color:rgba(208,64,64,.18)}
.dc-chk{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--lns);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .14s}
.dc-chk.on{background:var(--gn);border-color:var(--gn)}
.dc-chk svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .14s}
.dc-chk.on svg{opacity:1}
.doc-row-name{font-size:.76rem;font-weight:600;color:var(--tx);flex:1}
.doc-row-file{font-size:.66rem;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.doc-row-badge{font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.08rem .35rem;border-radius:var(--pill);flex-shrink:0}
.badge-req{background:rgba(217,146,11,.12);color:var(--am);border:1px solid rgba(217,146,11,.2)}
.badge-missing{background:rgba(208,64,64,.12);color:var(--rd);border:1px solid rgba(208,64,64,.2)}
.badge-opt{background:var(--p3);color:var(--mu);border:1px solid var(--lns)}
.badge-ok{background:var(--gn-d);color:var(--gn);border:1px solid rgba(45,171,96,.2)}

/* ── FREIGHT EXTRAS ── */
.info-row{display:flex;align-items:center;justify-content:space-between;background:var(--or-d);border:1px solid rgba(241,142,0,.18);border-radius:var(--rx);padding:.55rem .8rem;font-size:.76rem;margin-bottom:.38rem}
.ir-label{color:var(--mu)}.ir-val{font-weight:700;color:var(--or)}

/* ── DRIVING RECORD CHECK ──
   Reads as one job, not three loose fields: the numbers, the way to look them up,
   and the tick that puts a name against having actually looked. */
.rc-panel{background:var(--p2);border:1px solid var(--ln);border-radius:var(--rx);padding:.7rem .85rem}
.rc-panel.on{background:rgba(45,171,96,.06);border-color:rgba(45,171,96,.22)}
.rc-line{display:flex;align-items:center;gap:.7rem;padding:.3rem 0;border-bottom:1px solid var(--ln)}
.rc-line:last-of-type{border-bottom:none}
.rc-line .dl{min-width:132px;flex-shrink:0}
.rc-v{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;min-width:0}
.rc-v .dv{letter-spacing:.06em}
.rc-gap{font-size:.74rem;color:var(--rd);font-weight:700}
.rc-age{font-size:.62rem;font-weight:700;letter-spacing:.04em;color:var(--mu);background:var(--p3);border:1px solid var(--ln);border-radius:var(--pill);padding:.08rem .45rem}
.rc-age.bad{color:var(--rd);background:rgba(208,64,64,.08);border-color:rgba(208,64,64,.2)}
.rc-copy{width:22px;height:22px;border-radius:6px;background:var(--p3);border:1px solid var(--ln);display:inline-flex;align-items:center;justify-content:center;color:var(--mu);cursor:pointer;flex-shrink:0;transition:all .14s}
.rc-copy:hover{color:var(--or);border-color:rgba(241,142,0,.35)}
.rc-copy svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rc-copy.rc-text{width:auto;padding:0 .45rem;font-size:.62rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.rc-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.7rem;padding-top:.65rem;border-top:1px solid var(--ln)}
.rc-actions .btn{text-decoration:none}
.rc-confirm{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:600;color:var(--mu);cursor:pointer;transition:color .14s}
.rc-confirm:hover{color:var(--tx)}
.rc-confirm.on{color:var(--gn);font-weight:700}

/* ── ACTIONS ── */
.action-bar{display:flex;gap:.55rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.32rem;font-weight:800;font-size:.8rem;border-radius:var(--pill);padding:.56rem 1.2rem;transition:all .14s;cursor:pointer;border:none;line-height:1;white-space:nowrap}
.btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.btn-approve{background:var(--gn);color:#fff;box-shadow:0 4px 12px rgba(45,171,96,.28)}.btn-approve:hover{filter:brightness(1.08)}
.btn-review{background:var(--or);color:#0e1113;box-shadow:0 4px 12px rgba(241,142,0,.26)}.btn-review:hover{filter:brightness(1.08)}
.btn-reject{background:var(--rd-d);color:var(--rd);border:1.5px solid rgba(208,64,64,.22)}.btn-reject:hover{background:var(--rd);color:#fff}
.btn-gh{background:var(--p2);color:var(--mu);border:1.5px solid var(--lns)}.btn-gh:hover{color:var(--tx)}
.btn-done{opacity:.5;cursor:default}
/* chasing paperwork is a nudge, not a decision — outlined, so it never competes
   with Approve or Reject for the eye */
.btn-remind{background:var(--p2);color:var(--or);border:1.5px solid rgba(241,142,0,.35)}
.btn-remind:hover{background:var(--or);color:#0e1113}
.btn:disabled{opacity:.45;cursor:default}
.btn:disabled:hover{filter:none}
/* the exact list that will be asked for, shown before anything leaves the building */
.rm-list{margin:0 0 .9rem;padding-left:1.05rem;font-size:.78rem;color:var(--tx);font-weight:600}
.rm-list li{margin-bottom:.22rem}
.rm-note{font-size:.7rem!important;color:var(--mu)}

/* ── SETTINGS PANEL ── */
.settings-panel{padding:1.1rem 0 4rem}
.set-section{background:var(--p);border:1px solid var(--lns);border-radius:var(--r);overflow:hidden;margin-bottom:1rem}
.set-section-head{padding:1rem 1.1rem;border-bottom:1px solid var(--ln)}
.set-section-title{font-family:var(--dp);font-size:.96rem;font-weight:900;letter-spacing:-.03em}
.set-section-sub{font-size:.74rem;color:var(--mu);margin-top:.2rem;line-height:1.55}
.dc-config-row{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1.1rem;border-bottom:1px solid var(--ln)}
.dc-config-row:last-child{border-bottom:none}
.dc-config-body{flex:1;min-width:0}
.dc-config-name{font-size:.84rem;font-weight:700;color:var(--tx)}
.dc-config-legal{font-size:.68rem;color:var(--or);margin-top:.1rem;font-weight:600}
.dc-config-hint{font-size:.7rem;color:var(--mu);margin-top:.12rem;line-height:1.5}
.dc-sel{background:var(--p2);border:1.5px solid var(--lns);border-radius:var(--rx);padding:.42rem .7rem;font-size:.76rem;font-weight:700;color:var(--tx);flex-shrink:0;min-width:110px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238a9298' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;padding-right:1.7rem;transition:border-color .15s}
.dc-sel:focus{border-color:rgba(241,142,0,.5);outline:none}
.dc-sel.req{border-color:rgba(241,142,0,.35);color:var(--or)}
.dc-sel.opt{border-color:var(--lns);color:var(--mu)}
.dc-sel.hid{border-color:var(--ln);color:var(--su)}

/* ── REBATE FIELDS ── */
.rebate-fields{padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.7rem}
.rf-row{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:center}
.rf-label{font-size:.78rem;font-weight:600;color:var(--tx)}
.rf-sub{font-size:.68rem;color:var(--mu);margin-top:.1rem}
.rf-input-wrap{display:flex;align-items:center;gap:.4rem}
.rf-input{width:80px;background:var(--p2);border:1.5px solid var(--lns);border-radius:var(--rx);padding:.5rem .7rem;font-size:.9rem;font-weight:700;color:var(--tx);text-align:center;transition:border-color .15s}
.rf-input:focus{border-color:rgba(241,142,0,.5);outline:none}
.rf-unit{font-size:.78rem;font-weight:700;color:var(--mu)}
.save-row{padding:1rem 1.1rem;border-top:1px solid var(--ln)}
.btn-save{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:.86rem;border-radius:var(--pill);padding:.65rem 1.4rem;background:var(--or);color:#0e1113;border:none;cursor:pointer;box-shadow:0 6px 18px rgba(241,142,0,.28);transition:filter .15s}
.btn-save:hover{filter:brightness(1.07)}
.btn-save svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ── REJECT MODAL ── */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-ov.open{display:flex}
.modal{background:var(--p);border:1.5px solid var(--lns);border-radius:var(--r);width:100%;max-width:380px;padding:1.6rem}
.modal h2{font-family:var(--dp);font-size:1rem;font-weight:900;letter-spacing:-.03em;margin-bottom:.25rem}
.modal p{font-size:.76rem;color:var(--mu);margin-bottom:.9rem}
.modal textarea{width:100%;background:var(--p2);border:1.5px solid var(--lns);border-radius:var(--rx);padding:.6rem .8rem;color:var(--tx);font-size:.82rem;resize:vertical;min-height:86px;margin-bottom:.75rem}
.modal textarea:focus{border-color:rgba(241,142,0,.45);outline:none}
.modal-btns{display:flex;gap:.5rem}
.mbt{flex:1;padding:.62rem;border-radius:var(--pill);font-weight:800;font-size:.82rem;border:none;cursor:pointer;transition:all .14s}
.mbt-red{background:var(--rd);color:#fff}.mbt-red:hover{filter:brightness(1.1)}
.mbt-gh{background:var(--p2);color:var(--tx);border:1.5px solid var(--lns)}
.mbt-green{background:var(--gn);color:#fff}.mbt-green:hover{filter:brightness(1.1)}
/* three choices need room on a phone — let them stack instead of squeezing */
.ae-btns{flex-wrap:wrap}.ae-btns .mbt{flex:1 1 auto;min-width:8.5rem;white-space:nowrap}

/* ── TOAST ── */
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--gn);color:#fff;font-size:.8rem;font-weight:700;padding:.56rem 1.3rem;border-radius:var(--pill);box-shadow:0 6px 24px rgba(0,0,0,.3);opacity:0;transition:all .25s;z-index:300;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.error{background:var(--rd)}

@media(max-width:580px){
  .detail-grid{grid-template-columns:1fr}
  .rf-row{grid-template-columns:1fr}
  .action-bar .btn{flex:1;justify-content:center}
}

/* ── PHONE LAYOUT (rebuilt 2026-07-28) ──
   Cards stack: avatar + name/reference on row one, status chips wrap on row two.
   Header keeps one compact line; stats sit in a single slim strip. */
@media(max-width:700px){
  html,body{max-width:100%;overflow-x:hidden}

  /* header — one line, no crowding */
  .bar{height:56px;padding:0 .85rem;gap:.5rem}
  .bar-r{gap:.35rem;flex-shrink:0}
  .logo{min-width:0;gap:.5rem}
  .logo-m{width:30px;height:30px;font-size:.86rem}
  .logo-t{font-size:.94rem;white-space:nowrap}
  .logo-tag{display:none}
  .welcome{display:none}          /* name is in the sign-in, not needed on a phone */
  .bar-badge{display:none}        /* same count already shown in Pending below */
  .bar-r .add-btn{font-size:0;gap:0;width:32px;height:32px;padding:0;justify-content:center;border-radius:var(--rx)}
  .bar-r .add-btn svg{width:15px;height:15px}
  .icon-btn{width:32px;height:32px}

  /* stats — one slim strip instead of four big tiles */
  .kpi-strip{grid-template-columns:repeat(4,1fr);gap:.35rem;padding:.55rem .8rem}
  .kpi{padding:.45rem .4rem;border-radius:10px;text-align:center}
  .kpi-label{font-size:.52rem;letter-spacing:.04em;margin-bottom:.1rem}
  .kpi-value{font-size:1.12rem}

  /* filter tabs — all six reachable with a swipe */
  .tab-bar{padding:.45rem .8rem;gap:.2rem}
  .tab{padding:.4rem .7rem;font-size:.72rem}

  /* application cards */
  .content{padding:.8rem .8rem calc(4.5rem + env(safe-area-inset-bottom))}
  .app-head{flex-wrap:wrap;align-items:flex-start;gap:.6rem;padding:.75rem .8rem}
  .app-avatar{width:32px;height:32px;font-size:.78rem}
  .app-main{flex:1 1 0;min-width:0}
  .app-name{font-size:.84rem}
  .app-meta{font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app-right{order:4;flex:0 0 100%;width:100%;justify-content:flex-start;gap:.3rem;margin-top:-.15rem}
  .chip{font-size:.62rem;padding:.16rem .5rem}
  .chevron{align-self:center;padding:.35rem;margin:-.35rem -.2rem -.35rem 0}
  .chevron svg{width:17px;height:17px}
  .app-detail{padding:.85rem .8rem 1rem}

  /* list view on a phone — number, username, reference, name and status stay;
     everything else folds away and is still one tap down in the open record */
  /* on a phone the extra columns fold away anyway, so the picker would be a dead control */
  .col-pick{display:none}
  .crm .sm-hide{display:none}
  table.crm{min-width:0}
  .crm th,.crm td{padding:.42rem .3rem;max-width:none}
  .crm td{font-size:.72rem}
  .crm th{font-size:.55rem;letter-spacing:.04em}
  .crm th.num,.crm td.num{width:20px;padding-right:.2rem}
  .crm th.chev,.crm td.chev{width:18px}
  .crm .c-user,.crm .c-ref{font-size:.66rem;letter-spacing:0}
  .crm .c-name{font-size:.72rem}
  /* a long company name truncates rather than pushing the row off the screen */
  .crm td.td-name{max-width:84px;overflow:hidden;text-overflow:ellipsis}
  .crm .chip{font-size:.56rem;padding:.12rem .38rem}
  .det-box{padding:.85rem .8rem 1rem}
  .list-tools{gap:.45rem}

  .doc-row{gap:.5rem;padding:.45rem .6rem}
  .doc-row-file{max-width:90px}
  .toast{max-width:88vw;white-space:normal;text-align:center}
}

/* ── Document viewer ──
   The reviewer opens the real file inside the portal: PDFs in a frame, photos as images. */
.doc-open{display:inline-flex;align-items:center;gap:.28rem;flex-shrink:0;font-size:.66rem;font-weight:800;letter-spacing:.02em;
  padding:.24rem .55rem;border-radius:var(--pill);cursor:pointer;
  background:var(--or-d);color:var(--or);border:1.5px solid var(--or-g);transition:all .14s}
.doc-open:hover{background:var(--or);color:#fff;border-color:var(--or)}
.doc-open svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.doc-nofile{flex-shrink:0;font-size:.62rem;font-weight:700;color:var(--am);border:1px dashed rgba(217,146,11,.4);
  padding:.18rem .45rem;border-radius:var(--pill);cursor:help}

.doc-ov{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:300;display:none;align-items:center;justify-content:center;padding:1.2rem}
.doc-ov.open{display:flex}
.doc-modal{background:var(--p);border:1.5px solid var(--lns);border-radius:var(--r);width:100%;max-width:920px;
  height:min(90vh,900px);display:flex;flex-direction:column;overflow:hidden}
.dv-head{display:flex;align-items:flex-start;gap:.75rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--ln)}
.dv-heads{flex:1;min-width:0}
.dv-title{font-family:var(--dp);font-size:.95rem;font-weight:900;letter-spacing:-.02em;color:var(--tx)}
.dv-sub{font-size:.68rem;color:var(--mu);margin-top:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-x{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--p2);border:1.5px solid var(--lns);
  color:var(--mu);display:flex;align-items:center;justify-content:center;cursor:pointer}
.dv-x:hover{color:var(--tx);border-color:var(--or)}
.dv-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.dv-body{flex:1;min-height:0;background:var(--p2);display:flex;align-items:center;justify-content:center;overflow:auto}
.dv-frame{width:100%;height:100%;border:none;background:#fff}
.dv-img{max-width:100%;max-height:100%;object-fit:contain}
.dv-msg{font-size:.8rem;color:var(--mu);text-align:center;padding:2rem 1.5rem;max-width:34ch;line-height:1.5}
.dv-foot{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;border-top:1px solid var(--ln);flex-wrap:wrap}
.dv-foot .btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dv-foot #dv-dl{text-decoration:none}
.dv-foot .btn:disabled{opacity:.35;cursor:default}
.dv-count{font-size:.68rem;color:var(--mu);font-weight:700}
.dv-foot #dv-tick{margin-left:auto}

@media(max-width:640px){
  .doc-ov{padding:0}
  .doc-modal{height:100%;max-width:100%;border:none;border-radius:0}
  .doc-open{padding:.22rem .45rem}
  .doc-open span{display:none}
  .dv-foot{gap:.4rem}
  .dv-foot .btn{flex:1;justify-content:center;padding:.5rem .6rem;font-size:.72rem}
  .dv-foot #dv-tick{margin-left:0;flex-basis:100%}
  .dv-count{order:5;width:100%;text-align:center}
}

/* ══ INTEGRATION PANEL — the back-office link (Brent and Gemma only) ══ */
.ig-wrap{display:flex;flex-direction:column;gap:.9rem;max-width:780px}
.ig-card{background:var(--p);border:1px solid var(--ln);border-radius:14px;padding:1.05rem 1.15rem}
.ig-h{font-family:var(--dp);font-weight:800;font-size:.9rem;letter-spacing:-.02em;margin-bottom:.3rem}
.ig-p{font-size:.78rem;color:var(--mu);line-height:1.55;margin-bottom:.75rem}
.ig-note{font-size:.72rem;color:var(--mu);line-height:1.5;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--ln)}

.ig-status{display:flex;align-items:center;gap:.8rem}
.ig-status>div:first-of-type{flex:1;min-width:0}
.ig-status-t{font-size:.86rem;font-weight:700;line-height:1.35}
.ig-status-s{font-size:.72rem;color:var(--mu);margin-top:.18rem}
.ig-dot{width:11px;height:11px;border-radius:50%;flex:none}
.ig-ok{background:var(--gn);box-shadow:0 0 0 4px var(--gn-d)}
.ig-warn{background:var(--am);box-shadow:0 0 0 4px var(--am-d)}
.ig-bad{background:var(--rd);box-shadow:0 0 0 4px var(--rd-d)}

.ig-copy{display:flex;align-items:center;gap:.6rem;background:var(--p2);border:1px solid var(--ln);border-radius:10px;padding:.55rem .5rem .55rem .8rem}
.ig-copy code{flex:1;min-width:0;font-family:'SF Mono',Consolas,monospace;font-size:.75rem;color:var(--tx);overflow-x:auto;white-space:nowrap}

.ig-krow{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:.7rem}
.ig-klabel{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);font-weight:700}
.ig-kval{font-family:'SF Mono',Consolas,monospace;font-size:.92rem;font-weight:700;color:var(--or);letter-spacing:.03em;margin-top:.15rem}
.ig-kv2{font-size:.8rem;margin-top:.2rem}
.ig-btns{display:flex;gap:.5rem;flex-wrap:wrap}

.ig-fields{display:flex;flex-wrap:wrap;gap:.4rem}
.ig-field{font-size:.72rem;font-weight:600;padding:.28rem .65rem;border-radius:var(--pill);background:var(--or-d);color:var(--or);border:1px solid var(--or-g)}

.ig-key-box{background:var(--p2);border:1px solid var(--or-g);border-radius:10px;padding:.8rem;margin:.6rem 0 .2rem}
.ig-key-box code{font-family:'SF Mono',Consolas,monospace;font-size:.8rem;color:var(--or);word-break:break-all;line-height:1.5}
@media(max-width:560px){.ig-status{flex-wrap:wrap}.ig-krow{gap:1rem}}