/* Beyond Infinity Loans - shared app styles
   Mobile-first. Path: public_html/assets/css/app.css  → REPLACE
*/
:root{
  --ink:#10302B; --ink-2:#26493F; --leaf:#1E7A5A; --leaf-100:#E1F1EA;
  --sun:#F4B73F; --sun-600:#D9981A; --paper:#F5F8F6; --white:#fff;
  --line:#D5E0DB; --muted:#5B7068; --danger:#B42318; --danger-bg:#FDECEA;
  --radius:14px;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  --head-h:56px;
  --staff-accent:#1A3A5C;
  --staff-accent-2:#2B5A8A;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.55;color:var(--ink);background:var(--paper)}
img,svg{max-width:100%;display:block}
a{color:var(--leaf)}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.logo{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--ink)}
.logo-img{height:32px;width:auto}
.logo-fallback{display:none;align-items:center;gap:.5rem}
@media (min-width:640px){
  .logo{font-size:1.3rem}
  .logo-img{height:40px}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.2rem;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:var(--body);transition:background .15s;min-height:44px}
.btn-primary{background:var(--sun);color:var(--ink)}
.btn-primary:hover{background:var(--sun-600)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:.45rem .9rem;font-size:.9rem;min-height:36px}
.btn[disabled]{opacity:.65;cursor:wait}

/* ---------- auth layout (mobile first) ---------- */
.auth{min-height:100vh;display:flex;flex-direction:column}
.auth-aside{display:none}
.auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.25rem 1rem;flex:1}
.auth-top-mobile{display:block;margin-bottom:1.2rem;width:min(480px,100%)}
.auth-card{width:min(480px,100%);background:var(--white);border:1px solid var(--line);border-radius:18px;padding:1.4rem;box-shadow:0 16px 40px -28px rgba(16,48,43,.45)}
.auth-card h1{font-size:1.55rem;font-weight:800;margin-bottom:.35rem}
.auth-sub{margin:0 0 1.2rem;color:var(--muted);font-size:.95rem}
.auth-foot{margin:1.2rem 0 0;font-size:.88rem;color:var(--muted);text-align:center}
.switch{margin:1rem 0 0;text-align:center;color:var(--muted)}
@media (min-width:861px){
  .auth{display:grid;grid-template-columns:minmax(320px,.85fr) 1.15fr}
  .auth-aside{display:flex;position:relative;background:var(--ink);color:#fff;padding:2.2rem;flex-direction:column;justify-content:space-between;overflow:hidden}
  .aside-copy{position:relative;z-index:1;max-width:22rem}
  .aside-title{font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1.1;margin:0 0 .8rem}
  .aside-text{margin:0;color:#BFD6CD}
  .aside-art{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%}
  .aside-top{position:relative;z-index:1}
  .auth-top-mobile{display:none}
  .auth-card{padding:2rem;border-radius:22px}
  .auth-card h1{font-size:1.8rem}
}

/* ---------- forms ---------- */
.row2{display:grid;grid-template-columns:1fr;gap:.9rem}
@media (min-width:481px){.row2{grid-template-columns:1fr 1fr}}
.f{margin-bottom:1rem}
.f label{display:block;font-weight:600;font-size:.93rem;margin-bottom:.35rem}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=password],
.f select,textarea{width:100%;padding:.75rem .85rem;border:1.5px solid #B8C9C2;border-radius:10px;font:inherit;background:#fff;color:var(--ink);min-height:44px}
.f input:focus,.f select:focus,textarea:focus{border-color:var(--leaf);outline:3px solid rgba(30,122,90,.2)}
.f input[aria-invalid=true]{border-color:var(--danger)}
.f .hint{font-size:.85rem;color:var(--muted);margin:.3rem 0 0}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:4.6rem!important}
.pw-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:0;font:inherit;font-weight:600;font-size:.88rem;color:var(--leaf);cursor:pointer;padding:.4rem .5rem;min-height:44px}
.meter{height:6px;background:var(--leaf-100);border-radius:6px;margin-top:.5rem;overflow:hidden}
.meter span{display:block;height:100%;width:0;background:var(--danger);transition:width .2s}
.meter span[data-level=mid]{background:var(--sun-600)}
.meter span[data-level=high]{background:var(--leaf)}
.meter-label{font-size:.82rem;color:var(--muted);min-height:1.2em;margin:.25rem 0 0}
.check{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.8rem;font-size:.93rem}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--leaf);flex:none}
.check label{font-weight:400;margin:0}
.field-error{color:var(--danger);font-size:.87rem;margin:.3rem 0 0;font-weight:500}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:.85rem 1rem;border-radius:10px;margin-bottom:1.1rem;font-size:.95rem}
.alert-error{background:var(--danger-bg);color:var(--danger);border:1px solid #F2B8B2}
.alert-info{background:var(--leaf-100);color:var(--ink);border:1px solid #B9DACB}
.otp-input{font-family:var(--display);font-size:1.75rem!important;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--leaf);text-decoration:underline;cursor:pointer}

/* ---------- FIXED header (mobile-first) ---------- */
.dash-head{
  position:sticky;top:0;z-index:100;
  background:var(--white);border-bottom:1px solid var(--line);
  /* safe area for notched phones */
  padding-top:env(safe-area-inset-top,0);
}
.dash-bar{
  width:100%;
  max-width:1160px;
  margin-inline:auto;
  padding:0 .9rem;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--head-h);gap:.6rem;
}
.dash-user{display:flex;align-items:center;gap:.5rem}
.dash-name{display:none;font-weight:600;color:var(--ink-2);font-size:.9rem}
@media (min-width:640px){
  :root{ --head-h:70px }
  .dash-bar{width:min(1160px,92%);padding:0}
  .dash-name{display:inline}
}

/* Hamburger */
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  border-radius:10px;color:var(--ink);flex:none;
}
.nav-toggle:hover{background:var(--leaf-100)}
.nav-toggle svg{width:22px;height:22px}
@media (min-width:861px){
  .nav-toggle{display:none}
}

.dash-hello h1{font-size:clamp(1.45rem,4vw,2.4rem);font-weight:800}
.dash-hello p{color:var(--muted);margin:.35rem 0 0}
.dash-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.4rem}
@media (min-width:561px){.dash-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:901px){.dash-grid{grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2rem}}
.tile{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem}
.tile h2{font-size:1.1rem;font-weight:700;margin-bottom:.35rem}
.tile p{margin:0;color:var(--muted);font-size:.94rem}
.tile .soon{display:inline-block;margin-top:.8rem;font-size:.82rem;font-weight:600;background:var(--leaf-100);color:var(--ink-2);padding:.25rem .7rem;border-radius:999px}
.tile-hero{grid-column:1/-1;background:var(--ink);color:#fff;border:0}
.tile-hero p{color:#BFD6CD}
.tile-hero .soon{background:var(--sun);color:var(--ink)}

/* ---------- legal ---------- */
.legal-wrap{width:min(760px,92%);margin:1.5rem auto 3rem}
.legal-wrap h1{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;margin-bottom:.3rem}
.legal-wrap h2{font-size:1.2rem;font-weight:700;margin:1.6rem 0 .5rem}
.legal-wrap p{margin:0 0 1rem;color:var(--ink-2)}
.legal-meta{color:var(--muted)!important;font-size:.9rem;margin-bottom:1.4rem!important}
.legal-links{margin-top:2rem!important;padding-top:1rem;border-top:1px solid var(--line);font-size:.92rem}
.legal-links a{color:var(--muted)}

/* ---------- app shell (customer) ---------- */
.shell{
  width:100%;
  max-width:1160px;
  margin:0 auto 3rem;
  padding:.9rem .9rem 0;
  display:block;
}
.side{
  display:none;
  background:var(--white);
  border-bottom:1px solid var(--line);
  margin:0 -.9rem .9rem;
  padding:.5rem .9rem;
}
.side.is-open{display:block}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.side a,.side .off{
  display:flex;justify-content:space-between;align-items:center;
  padding:.7rem .85rem;border-radius:10px;text-decoration:none;color:var(--ink-2);font-weight:500;
  min-height:44px;
}
.side a:hover{background:var(--leaf-100)}
.side a.on{background:var(--ink);color:#fff}
.side .off{color:#93A59E;cursor:default}
.side em{font-style:normal;font-size:.72rem;background:var(--leaf-100);color:var(--ink-2);padding:.1rem .5rem;border-radius:999px}
.content{min-width:0}

@media (min-width:861px){
  .shell{
    width:min(1160px,94%);
    margin:1.6rem auto 4rem;
    padding:0;
    display:grid;
    grid-template-columns:220px 1fr;
    gap:2rem;
    align-items:start;
  }
  .side{
    display:block!important;
    position:sticky;top:calc(var(--head-h) + 1rem);
    background:transparent;border:0;margin:0;padding:0;
  }
  .side.is-open{display:block}
}

.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;max-width:720px;margin-top:1.2rem}
@media (min-width:640px){.panel{padding:1.6rem;margin-top:1.4rem}}
.panel-h{font-size:1.1rem;font-weight:700;margin:0 0 1rem}
.panel-h:not(:first-child){margin-top:1.6rem}
.f input:disabled{background:#EEF3F1;color:var(--muted);border-color:var(--line)}
.todo{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.7rem}
.todo li{display:flex;align-items:center;gap:.7rem}
.todo a{color:var(--sun)}
.tick{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #4B6F63;display:grid;place-items:center;font-size:.8rem;font-weight:700}
.tick.ok{background:var(--sun);border-color:var(--sun);color:var(--ink)}

/* ---------- application stepper ---------- */
.panel.wide{max-width:760px}
.stepper{margin-top:1.2rem;max-width:760px}
.step-count{margin:0 0 .5rem;color:var(--ink-2)}
.bar{height:8px;background:var(--leaf-100);border-radius:8px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--leaf);border-radius:8px;transition:width .3s}
.stepper ol{display:none;list-style:none;margin:.9rem 0 0;padding:0;flex-wrap:wrap;gap:.4rem}
@media (min-width:641px){.stepper ol{display:flex}}
.stepper li{font-size:.82rem}
.stepper li a,.stepper li span{display:block;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);text-decoration:none}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table,.list{width:100%;border-collapse:collapse;font-size:.92rem}
.table th,.list th{text-align:left;color:var(--muted);font-weight:600;font-size:.8rem;padding:.5rem .5rem;border-bottom:2px solid var(--line)}
.table td,.list td{padding:.55rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.muted{color:var(--muted)}
.small{font-size:.9em}

/* ---------- staff area (distinct from customer) ---------- */
body.staff{
  background:#E8EEF4;
}
body.staff .dash-head{
  background:var(--staff-accent);
  border-bottom:0;
  color:#fff;
}
body.staff .dash-head .logo{color:#fff}
body.staff .dash-name{color:#C5D6E8}
body.staff .dash-user .btn-ghost{
  border-color:rgba(255,255,255,.45);color:#fff
}
body.staff .dash-user .btn-ghost:hover{background:#fff;color:var(--staff-accent)}
body.staff .nav-toggle{color:#fff}
body.staff .nav-toggle:hover{background:rgba(255,255,255,.12)}
body.staff .shell{max-width:1280px}
body.staff .side a.on{background:var(--staff-accent);color:#fff}
body.staff .side a:hover{background:#D6E2EF}
body.staff .content .dash-hello h1{color:var(--staff-accent)}
body.staff .stat{
  background:#fff;border:1px solid #C5D0DC;border-radius:12px;
  padding:1rem 1.1rem;text-decoration:none;color:var(--ink);display:block;
  box-shadow:0 1px 0 rgba(26,58,92,.04);
}
body.staff .stat:hover{border-color:var(--staff-accent-2);box-shadow:0 4px 12px -6px rgba(26,58,92,.25)}
body.staff .stat .n{font-family:var(--display);font-size:1.75rem;font-weight:800;color:var(--staff-accent);line-height:1.1}
body.staff .stat .l{color:var(--muted);font-size:.88rem}
body.staff .panel,body.staff .tile{
  border-color:#C5D0DC;
  box-shadow:0 1px 0 rgba(26,58,92,.04);
}
.staff-tag{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--sun);color:var(--ink);padding:.15rem .5rem;border-radius:6px;margin-left:.4rem;vertical-align:middle;
}

.badge{display:inline-block;font-size:.78rem;font-weight:600;padding:.2rem .65rem;border-radius:999px;vertical-align:middle}
.b-info{background:var(--leaf-100);color:var(--ink-2)}
.b-ok{background:#D6F0DF;color:#14532D}
.b-bad{background:var(--danger-bg);color:var(--danger)}
.b-warn{background:#FCEFC9;color:#7A5200}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1.2rem}
@media (min-width:701px){.stat-grid{grid-template-columns:repeat(3,1fr);gap:.9rem}}
@media (min-width:1000px){.stat-grid{grid-template-columns:repeat(6,1fr)}}

.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem;align-items:center}
.filters input[type=text],.filters select{padding:.55rem .8rem;border:1.5px solid #B8C9C2;border-radius:10px;font:inherit;background:#fff;min-height:44px}
.pager{margin:1rem 0 0;color:var(--muted);display:flex;gap:1rem;align-items:center}
.vs,.res{display:inline-block;font-size:.8rem;font-weight:600;padding:.15rem .6rem;border-radius:999px;background:#EEF3F1;color:var(--ink-2)}
.vs-verified,.res-pass,.res-eligible{background:#D6F0DF;color:#14532D}
.vs-failed,.res-fail,.res-ineligible{background:var(--danger-bg);color:var(--danger)}
.vs-manual_review,.res-review,.res-manual_review{background:#FCEFC9;color:#7A5200}
textarea{width:100%;padding:.7rem .9rem;border:1.5px solid #B8C9C2;border-radius:10px;font:inherit;background:#fff;color:var(--ink);min-height:88px}
.note{border-top:1px solid var(--line);padding-top:.7rem;margin:.9rem 0 0}

/* admin */
.role-grid{display:grid;grid-template-columns:1fr;gap:.8rem}
@media (min-width:561px){.role-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:901px){.role-grid{grid-template-columns:repeat(3,1fr)}}
.role-card{border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;background:#fff}
.role-card .lim{display:block;font-size:.82rem;color:var(--muted);margin:.6rem 0 .2rem}
.role-card input[type=text]{width:100%;padding:.45rem .6rem;border:1.5px solid #B8C9C2;border-radius:8px;font:inherit}
table.matrix th.rc,table.matrix td.rc{text-align:center;width:84px;font-size:.78rem}
table.matrix td.rc input{width:18px;height:18px;accent-color:var(--leaf)}

/* ---------- floating chat widget (customer) ---------- */
.chat-fab{
  position:fixed;z-index:200;
  right:max(1rem, env(safe-area-inset-right));
  bottom:max(1rem, env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;
  background:var(--leaf);color:#fff;border:0;cursor:pointer;
  box-shadow:0 8px 24px -6px rgba(16,48,43,.45);
  display:grid;place-items:center;
}
.chat-fab:hover{background:var(--ink)}
.chat-fab svg{width:26px;height:26px}
.chat-fab .dot{
  position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;
  background:var(--sun);border:2px solid var(--leaf);display:none
}
.chat-fab.has-unread .dot{display:block}

.chat-panel{
  position:fixed;z-index:201;
  right:max(.75rem, env(safe-area-inset-right));
  bottom:max(4.5rem, calc(env(safe-area-inset-bottom) + 4.5rem));
  width:min(360px, calc(100vw - 1.5rem));
  height:min(480px, calc(100vh - 7rem));
  background:#fff;border-radius:16px;
  box-shadow:0 20px 50px -20px rgba(16,48,43,.55);
  border:1px solid var(--line);
  display:none;flex-direction:column;overflow:hidden;
}
.chat-panel.open{display:flex}
.chat-panel-head{
  background:var(--ink);color:#fff;padding:.85rem 1rem;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none
}
.chat-panel-head h2{font-size:1rem;font-weight:700;margin:0}
.chat-panel-head .sub{font-size:.78rem;color:#BFD6CD;margin:.15rem 0 0}
.chat-panel-head .sub.online{color:#9AE6B4}
.chat-panel-head .sub.offline{color:#F6C1B8}
.chat-close{background:transparent;border:0;color:#fff;cursor:pointer;width:36px;height:36px;border-radius:8px;font-size:1.3rem;line-height:1}
.chat-close:hover{background:rgba(255,255,255,.12)}
.chat-msgs{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.55rem;background:#F7FAF8}
.chat-bubble{
  max-width:85%;padding:.55rem .75rem;border-radius:12px;font-size:.92rem;line-height:1.4;
  word-break:break-word
}
.chat-bubble.me{align-self:flex-end;background:var(--leaf);color:#fff;border-bottom-right-radius:4px}
.chat-bubble.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.chat-bubble.sys{align-self:center;background:transparent;color:var(--muted);font-size:.8rem;text-align:center;max-width:95%}
.chat-time{display:block;font-size:.7rem;opacity:.75;margin-top:.2rem}
.chat-form{flex:none;display:flex;gap:.4rem;padding:.65rem;border-top:1px solid var(--line);background:#fff}
.chat-form input{
  flex:1;border:1.5px solid #B8C9C2;border-radius:999px;padding:.6rem 1rem;font:inherit;min-height:44px
}
.chat-form button{
  flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--leaf);color:#fff;cursor:pointer
}
.chat-form button:hover{background:var(--ink)}
.chat-agents{font-size:.78rem;color:var(--muted);padding:0 1rem .4rem;flex:none}

/* ---------- staff chat page ---------- */
.chat-desk{display:grid;grid-template-columns:1fr;gap:0;min-height:60vh;background:#fff;border:1px solid #C5D0DC;border-radius:12px;overflow:hidden}
@media (min-width:800px){.chat-desk{grid-template-columns:280px 1fr}}
.chat-list{border-bottom:1px solid #C5D0DC;max-height:40vh;overflow-y:auto}
@media (min-width:800px){.chat-list{border-bottom:0;border-right:1px solid #C5D0DC;max-height:none}}
.chat-list-item{
  display:block;width:100%;text-align:left;padding:.85rem 1rem;border:0;border-bottom:1px solid #E8EEF4;
  background:#fff;cursor:pointer;font:inherit
}
.chat-list-item:hover,.chat-list-item.active{background:#EEF3F8}
.chat-list-item .who{font-weight:600;font-size:.95rem}
.chat-list-item .preview{color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.2rem}
.chat-list-item .meta{font-size:.75rem;color:var(--muted);margin-top:.2rem}
.chat-thread{display:flex;flex-direction:column;min-height:50vh}
.chat-thread-head{padding:.85rem 1rem;border-bottom:1px solid #C5D0DC;display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.chat-thread-msgs{flex:1;overflow-y:auto;padding:1rem;background:#F4F7FA;display:flex;flex-direction:column;gap:.55rem;min-height:240px}
.chat-thread-form{display:flex;gap:.4rem;padding:.65rem;border-top:1px solid #C5D0DC}
.chat-thread-form input{flex:1;padding:.65rem 1rem;border:1.5px solid #B8C9C2;border-radius:999px;font:inherit;min-height:44px}
.doc-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){.doc-grid{grid-template-columns:repeat(2,1fr)}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* === UX pack Oct 2026 === */

/* Customer mobile header: compact brand + logout */
.dash-head .logo-img{height:28px;width:auto}
.dash-head .logo-fallback{font-size:.85rem;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-user .btn-logout,
.dash-user .btn-sm{
  padding:.35rem .65rem;
  font-size:.78rem;
  min-height:32px;
  white-space:nowrap;
}
.dash-bar{gap:.5rem;padding:0 .75rem}
.dash-name{font-size:.8rem;max-width:28vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:768px){
  .dash-head .logo-img{height:36px}
  .dash-head .logo-fallback{font-size:1rem;max-width:none}
  .dash-user .btn-sm{padding:.45rem .9rem;font-size:.9rem;min-height:36px}
  .dash-name{font-size:.9rem;max-width:none}
}

/* Staff brand: always white on dark header */
body.staff .dash-head .logo,
body.staff .logo-staff,
body.staff .logo-staff .logo-text{
  color:#fff !important;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:.45rem;
  font-weight:700;
  font-family:var(--display);
  font-size:.95rem;
  min-width:0;
}
body.staff .logo-staff .logo-text{
  max-width:36vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (min-width:768px){
  body.staff .logo-staff .logo-text{max-width:none;font-size:1.05rem}
}
body.staff .logo-staff .logo-img{height:28px;filter:brightness(0) invert(1)}
@media (min-width:768px){body.staff .logo-staff .logo-img{height:32px}}
body.staff .staff-tag{
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:.65rem;
  font-weight:600;
  padding:.15rem .45rem;
  border-radius:999px;
  letter-spacing:.02em;
  flex-shrink:0;
}
body.staff .dash-name{color:#E8EEF5 !important}
body.staff .dash-user .btn-ghost{
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
body.staff .dash-user .btn-ghost:hover{background:#fff;color:var(--staff-accent)}

/* Staff sidebar: scrollable + icons */
body.staff .side-staff{
  display:flex;
  flex-direction:column;
  max-height:none;
}
body.staff .side-scroll{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  flex:1;
  max-height:calc(100vh - 4.5rem);
  padding-bottom:2rem;
}
body.staff .side a{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.65rem .85rem;
  border-radius:10px;
  font-weight:500;
}
body.staff .nav-ic{
  width:18px;height:18px;flex-shrink:0;opacity:.85;
}
body.staff .side a.on .nav-ic{opacity:1}
body.staff .side a span{line-height:1.2}

@media (max-width:767px){
  body.staff .side.is-open{
    position:fixed;
    z-index:40;
    top:3.4rem;
    left:0;right:0;bottom:0;
    background:#F0F4F8;
    padding:1rem;
    overflow:hidden;
  }
  body.staff .side-scroll{max-height:calc(100vh - 4rem)}
  body.nav-open{overflow:hidden}
}

/* Staff stats + quick links */
body.staff .stats-staff{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
}
@media (min-width:700px){
  body.staff .stats-staff{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1100px){
  body.staff .stats-staff{grid-template-columns:repeat(6,minmax(0,1fr))}
}
body.staff a.stat{
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
body.staff a.stat:hover{transform:translateY(-2px)}
body.staff .stat-warn .n{color:#B45309}
.panel-head-row{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  margin-bottom:1rem;
}
.ql-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem;
}
@media (min-width:700px){.ql-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
a.ql{
  display:block;
  padding:.85rem 1rem;
  background:#fff;
  border:1px solid #C5D0DC;
  border-radius:12px;
  text-decoration:none;
  color:var(--staff-accent);
  font-weight:600;
  font-size:.92rem;
}
a.ql:hover{border-color:var(--staff-accent-2);background:#EEF3F8}

/* Pagination */
.pager{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin-top:1.2rem;
  align-items:stretch;
}
@media (min-width:600px){
  .pager{flex-direction:row;align-items:center;justify-content:space-between}
}
.pager-meta{margin:0;color:var(--muted);font-size:.88rem}
.pager-btns{display:flex;flex-wrap:wrap;gap:.35rem}
.pager-btns .btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* Tables: horizontal scroll already; denser on mobile */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.25rem;padding:0 .25rem}
table.list{min-width:560px}

.logout-short{display:inline}
.logout-full{display:none}
@media (min-width:480px){
  .logout-short{display:none}
  .logout-full{display:inline}
}

/* === STAFF LAYOUT v3 Oct 2026 === */

/* Full-bleed staff app */
body.staff{
  background:#E8EEF4;
  margin:0;
}
body.staff .staff-app{min-height:100vh;display:flex;flex-direction:column}
body.staff .dash-head{
  position:sticky;top:0;z-index:50;
  background:#0F2740;
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.staff .dash-bar{
  width:100%;
  max-width:none;
  margin:0;
  padding:.55rem 1rem;
  display:flex;align-items:center;gap:.65rem;
  box-sizing:border-box;
}
body.staff .logo-staff,
body.staff .logo-staff .logo-text{color:#fff!important}
body.staff .logo-staff{display:flex;align-items:center;gap:.4rem;min-width:0;text-decoration:none;font-weight:700;font-family:var(--display)}
body.staff .logo-staff .logo-text{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
body.staff .logo-staff .logo-img{height:28px;filter:brightness(0) invert(1)}
body.staff .staff-tag{
  display:inline-block;
  background:rgba(244,183,63,.95);
  color:#0F2740;
  font-size:.62rem;
  font-weight:700;
  padding:.12rem .4rem;
  border-radius:999px;
  margin-left:.35rem;
  vertical-align:middle;
  letter-spacing:.02em;
  text-transform:uppercase;
}
body.staff .dash-name{color:#E8EEF5!important;display:inline!important;font-size:.85rem}
body.staff .dash-user .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
body.staff .nav-toggle{color:#fff;background:transparent;border:0;padding:.35rem;display:inline-flex}
body.staff .nav-toggle:hover{background:rgba(255,255,255,.12);border-radius:8px}

/* Shell: mobile stack; desktop sidebar + fluid content */
body.staff .staff-shell.shell,
body.staff .shell.staff-shell{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  align-items:stretch;
  flex:1;
  box-sizing:border-box;
}

/* CRITICAL: hide sidebar on mobile until opened */
body.staff .side-staff.side{
  display:none!important;
  background:#122A45;
  color:#D6E2EF;
  margin:0;
  padding:0;
  position:static;
}
body.staff .side-staff.side.is-open{
  display:flex!important;
  flex-direction:column;
  position:fixed;
  z-index:60;
  top:0;left:0;bottom:0;
  width:min(300px,86vw);
  box-shadow:8px 0 32px rgba(0,0,0,.35);
}
body.staff .side-backdrop{
  position:fixed;inset:0;z-index:55;
  background:rgba(8,16,28,.45);
}
body.staff .side-backdrop[hidden]{display:none!important}
body.nav-open{overflow:hidden}

body.staff .side-scroll{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  flex:1;
  padding:.85rem .75rem 2rem;
  max-height:100%;
}
body.staff .side-section{
  margin:.25rem .5rem .6rem;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#7A93B0;
  font-weight:600;
}
body.staff .side-staff ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
body.staff .side-staff a{
  display:flex;align-items:center;gap:.65rem;
  padding:.7rem .85rem;
  border-radius:10px;
  color:#D6E2EF;
  text-decoration:none;
  font-weight:500;
  font-size:.92rem;
}
body.staff .side-staff a:hover{background:rgba(255,255,255,.08);color:#fff}
body.staff .side-staff a.on{background:#2B5A8A;color:#fff}
body.staff .nav-ic{width:18px;height:18px;flex-shrink:0;opacity:.9}

body.staff .staff-content.content{
  width:100%;
  max-width:none;
  margin:0;
  padding:1rem 1rem 3rem;
  box-sizing:border-box;
  min-width:0;
}

@media (min-width:861px){
  body.staff .nav-toggle{display:none!important}
  body.staff .side-backdrop{display:none!important}
  body.staff .staff-shell.shell,
  body.staff .shell.staff-shell{
    grid-template-columns:248px 1fr!important;
  }
  body.staff .side-staff.side{
    display:flex!important;
    flex-direction:column;
    position:sticky;
    top:56px;
    height:calc(100vh - 56px);
    width:auto;
    box-shadow:none;
  }
  body.staff .side-staff.side.is-open{
    position:sticky;
    width:auto;
    box-shadow:none;
  }
  body.staff .staff-content.content{
    padding:1.4rem 1.6rem 3rem;
  }
  body.staff .logo-staff .logo-text{max-width:none;font-size:1.05rem}
}

/* Stats / panels inside staff */
body.staff .stats-staff{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
}
@media (min-width:700px){body.staff .stats-staff{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){body.staff .stats-staff{grid-template-columns:repeat(6,minmax(0,1fr))}}
body.staff a.stat{
  background:#fff;
  border:1px solid #C5D0DC;
  border-radius:14px;
  padding:1rem;
  text-decoration:none;
  color:inherit;
  box-shadow:0 1px 2px rgba(15,39,64,.04);
}
body.staff a.stat:hover{border-color:#2B5A8A;box-shadow:0 4px 12px rgba(15,39,64,.08)}
body.staff .stat .n{font-size:1.6rem;font-weight:800;color:#0F2740;line-height:1.15}
body.staff .stat .l{color:#5A6F82;font-size:.82rem;margin-top:.2rem}
body.staff .stat-warn .n{color:#B45309}
body.staff .panel{
  background:#fff;
  border:1px solid #C5D0DC;
  border-radius:14px;
  padding:1.1rem 1.2rem;
  box-shadow:0 1px 2px rgba(15,39,64,.04);
}
body.staff .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
body.staff table.list{min-width:520px;width:100%}

/* Chat desk height for staff */
body.staff .chat-desk{
  display:grid;
  grid-template-columns:1fr;
  border:1px solid #C5D0DC;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  min-height:420px;
  max-height:calc(100vh - 11rem);
}
@media (min-width:800px){
  body.staff .chat-desk{grid-template-columns:280px 1fr}
}
body.staff .chat-list{overflow-y:auto;max-height:40vh;border-bottom:1px solid #C5D0DC}
@media (min-width:800px){
  body.staff .chat-list{max-height:none;border-bottom:0;border-right:1px solid #C5D0DC}
}