/* ---------- KPI + pipeline ---------- */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media (max-width:1200px){.kpis{grid-template-columns:repeat(3,1fr)}}
.kpi{padding:14px 16px 12px;cursor:pointer;transition:background .13s;display:flex;flex-direction:column;gap:2px}
.kpi:hover{background:var(--white)}
.kpi .n{font-size:27px;font-weight:700;letter-spacing:-.6px;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .n.bad{color:var(--bad)}.kpi .n.warn{color:var(--warn)}.kpi .n.good{color:var(--good)}
.kpi .lbl{margin-top:4px}
.kpi .sub{font-size:11.5px;color:var(--muted)}
.pipe{display:flex;gap:4px;align-items:stretch;height:44px}
.pipe .st{display:flex;flex-direction:column;justify-content:center;padding:0 12px;border-radius:11px;color:var(--ink);min-width:0;overflow:hidden;cursor:pointer;
  background:var(--white);border:1px solid var(--edge)}
.pipe .st:hover{background:var(--hover)}
.pipe .st b{font-size:15px;line-height:1.1}
.pipe .st small{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe .st.c1{border-left:4px solid #94a3b8}.pipe .st.c2{border-left:4px solid #2f9bd6}.pipe .st.c3{border-left:4px solid #f2734a}
.pipe .st.c4{border-left:4px solid #9466d6}.pipe .st.c5{border-left:4px solid #36a37a}.pipe .st.c6{border-left:4px solid #e0a92e}.pipe .st.c7{border-left:4px solid #2f7d4f}.pipe .st.c8{border-left:4px solid #5f6c7d}

.pipecard{padding:10px 16px 12px;display:flex;align-items:center;gap:16px}
.pipecard .pipehd{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pipecard .pipe{flex:1;margin:0}
.dashrow{display:flex;gap:14px;align-items:flex-start}
.dashmain{flex:1 1 62%;min-width:0}
.dashside{flex:1 1 38%;min-width:280px;display:flex;flex-direction:column;gap:14px}
@media (max-width:1100px){.dashrow{flex-direction:column}.dashside{min-width:0}}

.permtbl td.pc{padding:0}.permtbl td.pc select{width:100%;border:none;background:transparent;font-size:11.5px;text-align:center;padding:6px 2px}
.permtbl td.pe{background:rgba(54,163,122,.14)}.permtbl td.pv{background:rgba(224,169,46,.12)}.permtbl td.pn{background:rgba(95,108,125,.06)}
.permtbl thead th.fz{background:rgb(240,245,251)}/* opaque: the headers scrolled under it don't show through */

table.tm-t th,table.tm-t td{font-size:11.5px;height:auto;padding:5px 8px;text-align:center}table.tm-t th.l,table.tm-t td.l{text-align:left}

/* Users & permissions → Factories: the Permissions matrix's look, with the Quote-tasks ticks */
.factbl td.pc input[type=checkbox]{width:auto;margin:0 auto;display:block;cursor:pointer}
.factbl td.pc input[type=checkbox]:disabled{cursor:default;opacity:.55}
.factbl th.fch{vertical-align:bottom}
.factbl .fct{display:block;margin-top:3px;font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.factbl .fct.zero{color:var(--bad)}
.factbl th.ret .hl{color:var(--muted);font-style:italic}
.factbl td.fall .cv{justify-content:flex-start;padding-left:14px;font-size:11.5px;font-weight:600;color:var(--good)}
.factbl tr.nodt td:not(.fz),.factbl tr.nodt td.fz b{opacity:.5}

/* ---------- sign-in ---------- */
.signin{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
.signin .card{width:100%;max-width:400px;padding:28px 28px 24px;display:flex;flex-direction:column;gap:14px;text-align:center}
.signin h1{font-size:20px;font-weight:700;letter-spacing:-.3px}
.signin .sub{font-size:12.5px;color:var(--muted)}
.signin .btn{padding:10px 14px;font-size:13px}
.signin .err{text-align:left}
body.out .topbar>*:not(.brand),body.out .mid{display:none}
body:not(.out) .signin{display:none}

/* ---------- side panel: Preview badge (admins see Preview tools; members never do) ---------- */
.nitem .pv{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:1px 6px}
.nitem .pv+.ct{margin-left:4px}

/* ---------- autosave status, conflicts, undo toast ---------- */
body.localsv #sv{display:none}
.viewhd .sv{min-width:0;font-size:11.5px}
button.sv{border:none;background:none;padding:4px 8px;border-radius:8px;font-weight:600;cursor:pointer}
.sv.bad{color:var(--bad);background:var(--bad-soft)}
.sv.warn{color:var(--warn)}
.conflict{outline:2px solid var(--warn)!important;background:var(--warn-soft)!important}
.cfl{font-size:10.5px;color:var(--warn);font-weight:600;white-space:nowrap}
.toast{display:flex;align-items:center;gap:10px}
.toast .btn{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.35)}
.pill.guest{margin-left:2px}
.rmlist{margin:6px 0 0 18px;font-size:12.5px;line-height:1.6}
.rmwarn{font-size:12.5px;color:var(--bad);font-weight:600}

/* ---------- headers kept on one line (Users & permissions) ---------- */
.viewhd.fit{flex-wrap:nowrap}
.viewhd.fit .sub{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewhd.fit>.seg,.viewhd.fit>.btn,.viewhd.fit>.sv{flex:0 0 auto}
.viewhd.fit>.sv{min-width:150px;justify-content:flex-end}
/* a phone or a narrow split: the header wraps instead, so the page never scrolls sideways */
@media (max-width:760px){.viewhd.fit{flex-wrap:wrap}.viewhd.fit .sub{flex:1 1 100%}.viewhd.fit>.sv{min-width:0}}

/* the scrollbar never shifts the page: header items stay put when switching between short and long tabs */
main{scrollbar-gutter:stable}