/* ══════════════════════════════════════════════════════════════════════════
   SELLiora — ORGANISATION SETUP (R2)
   Consumes the tokens in selliora-tokens.css. No colours are hard-coded
   except the scrim, so the Branding Customizer recolours this too.
   ══════════════════════════════════════════════════════════════════════════ */

.swz-scrim{
  position:fixed;inset:0;z-index:9000;
  background:rgba(17,24,38,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.swz-scrim.sub{z-index:9100;background:rgba(17,24,38,.4)}

.swz-shell{
  width:min(1200px,100%);height:min(720px,92vh);
  background:var(--s);border-radius:var(--rad);box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:248px 1fr;overflow:hidden;
}

/* ── left rail ─────────────────────────────────────────────────────────── */
.swz-rail{
  background:var(--s2);border-right:1px solid var(--bd);
  padding:22px 18px;display:flex;flex-direction:column;
}
.swz-brand{
  font-size:14px;font-weight:700;color:var(--t);
  padding-bottom:16px;border-bottom:1px solid var(--bd);margin-bottom:16px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.swz-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.swz-steps li{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:var(--rads);
  font-size:13px;color:var(--t3);
}
.swz-steps li b{
  width:22px;height:22px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:700;
  background:var(--bd);color:var(--t2);
}
.swz-steps li.now{background:var(--pl);color:var(--p);font-weight:600}
.swz-steps li.now b{background:var(--p);color:var(--text-on-primary)}
.swz-steps li.done{color:var(--t2)}
.swz-steps li.done b{background:var(--g);color:#fff}
.swz-railfoot{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--bd);
  font-size:11px;line-height:1.5;color:var(--t3);
}

/* ── main column ───────────────────────────────────────────────────────── */
.swz-main{display:flex;flex-direction:column;min-width:0}
.swz-head{padding:26px 32px 0}
.swz-head h2{margin:0;font-size:21px;font-weight:700;color:var(--t);letter-spacing:-.2px}
.swz-head p{margin:5px 0 14px;font-size:12px;color:var(--t3)}
.swz-bar{height:3px;background:var(--bd);border-radius:2px;overflow:hidden}
.swz-bar i{display:block;height:100%;background:var(--p);transition:width .25s ease}

.swz-body{flex:1;overflow-y:auto;padding:22px 32px 28px;min-height:0}
.swz-why{
  margin:0 0 18px;font-size:13px;line-height:1.6;color:var(--t2);
  padding:11px 14px;background:var(--s2);border-left:3px solid var(--p);
  border-radius:0 var(--rads) var(--rads) 0;
}
.swz-hint{font-size:11.5px;color:var(--t3);margin:6px 0 12px;line-height:1.5}

.swz-foot{
  display:flex;align-items:center;gap:10px;
  padding:14px 32px;border-top:1px solid var(--bd);background:var(--s);
}
.swz-spacer{flex:1}

/* ── buttons ───────────────────────────────────────────────────────────── */
.swz-btn{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:9px 18px;border-radius:var(--rads);
  border:1px solid var(--bd2);background:var(--s);color:var(--t);
  transition:background .12s,border-color .12s;
}
.swz-btn:hover{background:var(--s2)}
.swz-btn.pri{background:var(--p);border-color:var(--p);color:var(--text-on-primary)}
.swz-btn.pri:hover{background:var(--pd)}
.swz-btn.ghost{background:transparent}
.swz-btn.link{border:none;background:none;color:var(--t3);font-weight:500}
.swz-btn.link:hover{color:var(--t2);text-decoration:underline}
.swz-btn.wide{width:100%;margin-top:12px;border-style:dashed}
.swz-btn:disabled{opacity:.45;cursor:not-allowed}

.swz-ic{
  width:28px;height:28px;flex:none;cursor:pointer;
  border:1px solid var(--bd);background:var(--s);border-radius:6px;
  color:var(--t2);font-size:12px;line-height:1;
}
.swz-ic:hover{background:var(--s2);color:var(--t)}
.swz-ic.del:hover{background:var(--rb);border-color:var(--rbd);color:var(--r)}
.swz-ic:disabled{opacity:.3;cursor:not-allowed}

/* ── business-type cards ───────────────────────────────────────────────── */
.swz-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.swz-card{
  text-align:left;cursor:pointer;font:inherit;
  padding:15px 16px;border:1.5px solid var(--bd);border-radius:var(--rads);
  background:var(--s);display:flex;flex-direction:column;gap:5px;
  transition:border-color .14s,box-shadow .14s;
}
.swz-card:hover{border-color:var(--pm)}
.swz-card.on{border-color:var(--p);box-shadow:0 0 0 3px var(--ring)}
.swz-card b{font-size:13.5px;color:var(--t)}
.swz-card span{font-size:11.5px;line-height:1.5;color:var(--t2)}
.swz-card em{font-size:10.5px;font-style:normal;color:var(--t3);margin-top:2px}

/* ── form fields ───────────────────────────────────────────────────────── */
.swz-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.swz-ff{display:flex;flex-direction:column;gap:5px;min-width:0}
.swz-ff.full{grid-column:1/-1}
.swz-ff label{font-size:12px;font-weight:600;color:var(--t)}
.swz-ff label i{font-style:normal;font-weight:400;color:var(--t3)}
.swz-ff input,.swz-ff select{
  font:inherit;font-size:13px;padding:9px 11px;
  border:1px solid var(--inp-bd);border-radius:var(--rads);
  background:var(--inp);color:var(--t);width:100%;
}
.swz-ff input:focus,.swz-ff select:focus{
  outline:none;border-color:var(--p);box-shadow:0 0 0 3px var(--ring);
}
.swz-ff i{font-style:normal;font-size:11px;color:var(--t3);line-height:1.45}

.swz-checks{display:flex;flex-wrap:wrap;gap:18px;margin:14px 0 4px}
.swz-chk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t);cursor:pointer}
.swz-chk input{width:auto;margin:0}

/* ── repeating rows (stages, invites) ──────────────────────────────────── */
.swz-rows{display:flex;flex-direction:column;gap:6px}
.swz-row{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border:1px solid var(--bd);border-radius:var(--rads);background:var(--s);
}
.swz-row input{
  flex:1;font:inherit;font-size:13px;padding:5px 8px;min-width:0;
  border:1px solid transparent;border-radius:6px;background:transparent;color:var(--t);
}
.swz-row input:focus{outline:none;border-color:var(--inp-bd);background:var(--inp)}
.swz-row b{font-size:13px;font-weight:600;color:var(--t)}
.swz-ord{
  width:22px;height:22px;flex:none;border-radius:50%;background:var(--pl);color:var(--p);
  display:grid;place-items:center;font-size:10.5px;font-weight:700;
}
.swz-av{
  width:26px;height:26px;flex:none;border-radius:50%;background:var(--pl);color:var(--p);
  display:grid;place-items:center;font-size:11px;font-weight:700;
}
.swz-sp{flex:1}
.swz-empty{font-size:12px;color:var(--t3);padding:14px;text-align:center;
  border:1px dashed var(--bd);border-radius:var(--rads)}

.swz-add{display:flex;gap:8px;margin-top:10px}
.swz-add input,.swz-add select{
  font:inherit;font-size:13px;padding:9px 11px;
  border:1px solid var(--inp-bd);border-radius:var(--rads);background:var(--inp);color:var(--t);
}
.swz-add input{flex:1;min-width:0}
.swz-add input:focus,.swz-add select:focus{
  outline:none;border-color:var(--p);box-shadow:0 0 0 3px var(--ring);
}

/* ── field list ────────────────────────────────────────────────────────── */
.swz-gname{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--p);margin:16px 0 7px;
}
.swz-gname:first-child{margin-top:0}
.swz-frow{
  display:flex;align-items:center;gap:8px;
  padding:8px 11px;border:1px solid var(--bd);border-radius:var(--rads);
  background:var(--s);margin-bottom:5px;
}
.swz-frow.off{opacity:.5}
.swz-frow b{font-size:13px;font-weight:600;color:var(--t)}
.swz-tag{
  font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;
  background:var(--s2);border:1px solid var(--bd);color:var(--t2);white-space:nowrap;
}
.swz-tag.req{background:var(--ab);border-color:var(--abd);color:var(--a)}
.swz-who{
  font-size:11px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:180px;
}

/* ── role chips ────────────────────────────────────────────────────────── */
.swz-roles{display:flex;flex-wrap:wrap;gap:7px}
.swz-chip{
  display:flex;align-items:center;gap:6px;cursor:pointer;
  font-size:12px;padding:6px 11px;border-radius:20px;
  border:1px solid var(--bd);background:var(--s);color:var(--t2);
}
.swz-chip.on{border-color:var(--p);background:var(--pl);color:var(--p);font-weight:600}
.swz-chip input{width:auto;margin:0}

/* ── permission matrix ─────────────────────────────────────────────────── */
.swz-mtx{border:1px solid var(--bd);border-radius:var(--rads);overflow:auto;max-height:100%}
.swz-mtx table{width:100%;border-collapse:collapse;font-size:12.5px}
.swz-mtx th,.swz-mtx td{padding:8px 10px;text-align:center;border-bottom:1px solid var(--bd)}
.swz-mtx thead th{
  position:sticky;top:0;z-index:1;background:var(--s2);
  border-bottom:1px solid var(--bd2);vertical-align:bottom;
}
.swz-mtx th b{display:block;font-size:12px;color:var(--t)}
.swz-mtx th i{display:block;font-style:normal;font-size:10px;color:var(--t3);font-weight:400}
.swz-mtx th em{
  display:inline-block;font-style:normal;font-size:9px;font-weight:700;margin-top:3px;
  padding:1px 6px;border-radius:20px;background:var(--pl);color:var(--p);text-transform:uppercase;
}
.swz-mtx td.lead,.swz-mtx th.lead{
  text-align:left;position:sticky;left:0;background:var(--s);
  min-width:190px;color:var(--t2);
}
.swz-mtx thead th.lead{background:var(--s2)}
.swz-mtx tr.grp td{
  text-align:left;background:var(--s2);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:var(--t3);
}
.swz-mtx input{cursor:pointer}
.swz-mtx input:disabled{opacity:.5;cursor:not-allowed}

/* ── seat counters ─────────────────────────────────────────────────────── */
.swz-seats{display:flex;gap:10px;margin-bottom:16px}
.swz-seat{
  flex:1;padding:12px 15px;border:1px solid var(--bd);
  border-radius:var(--rads);background:var(--s2);
}
.swz-seat b{display:block;font-size:19px;font-weight:700;color:var(--t);letter-spacing:-.3px}
.swz-seat span{font-size:11px;color:var(--t3)}

/* ── nested modal (field editor) ───────────────────────────────────────── */
.swz-modal{
  width:min(560px,100%);max-height:88vh;background:var(--s);
  border-radius:var(--rad);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;
}
.swz-modal header{
  display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--bd);
}
.swz-modal header h3{margin:0;flex:1;font-size:15px;font-weight:700;color:var(--t)}
.swz-x{
  border:none;background:none;cursor:pointer;font-size:15px;color:var(--t3);
  width:28px;height:28px;border-radius:6px;
}
.swz-x:hover{background:var(--s2);color:var(--t)}
.swz-mbody{padding:18px 20px;overflow-y:auto;flex:1}
.swz-modal footer{
  display:flex;justify-content:flex-end;gap:8px;
  padding:13px 20px;border-top:1px solid var(--bd);
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .swz-scrim{padding:0}
  .swz-shell{grid-template-columns:1fr;height:100vh;border-radius:0}
  .swz-rail{display:none}
  .swz-head,.swz-body,.swz-foot{padding-left:18px;padding-right:18px}
  .swz-grid{grid-template-columns:1fr}
  .swz-cards{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   USERS + ACCESS — wireframe wala layout
   ══════════════════════════════════════════════════════════════════════════ */

/* ── role tabs (like Manager defaults / Member defaults) ───────────────── */
.swz-roletabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.swz-roletab{
  font:inherit;cursor:pointer;text-align:left;
  padding:8px 14px;border-radius:var(--rads);
  border:1px solid var(--bd);background:var(--s);color:var(--t2);
  font-size:13px;font-weight:600;line-height:1.3;
}
.swz-roletab:hover{background:var(--s2)}
.swz-roletab.on{background:var(--p);border-color:var(--p);color:var(--text-on-primary)}
.swz-roletab i{display:block;font-style:normal;font-size:10px;font-weight:400;opacity:.75}
.swz-roletab em{
  display:inline-block;font-style:normal;font-size:9px;font-weight:700;
  margin-top:2px;padding:1px 6px;border-radius:20px;
  background:var(--acc-l);color:var(--acc-d);text-transform:uppercase;
}
.swz-roletab.on em{background:rgba(255,255,255,.22);color:#fff}

.swz-lock{
  font-size:12px;color:var(--a);background:var(--ab);border:1px solid var(--abd);
  padding:9px 12px;border-radius:var(--rads);margin-bottom:12px;
}
.swz-mtx td.na{color:var(--t3)}

/* ── seat counters + Add User ───────────────────────────────────────────── */
.swz-userbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.swz-seatchip{
  padding:9px 16px;border:1px solid var(--bd);border-radius:var(--rads);
  background:var(--s);text-align:center;
}
.swz-seatchip b{display:block;font-size:17px;font-weight:700;color:var(--t);letter-spacing:-.3px}
.swz-seatchip span{font-size:10.5px;color:var(--t3);white-space:nowrap}

/* ── user list ──────────────────────────────────────────────────────────── */
.swz-userwrap{border:1px solid var(--bd);border-radius:var(--rad);overflow:hidden}
.swz-usercol{display:flex;flex-direction:column}
.swz-usercolhead{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;background:var(--s2);border-bottom:1px solid var(--bd);
  font-size:12px;font-weight:600;color:var(--t2);
}
.swz-usercolhead.susp{border-top:1px solid var(--bd)}
.swz-usercolhead b{
  font-size:11px;padding:1px 8px;border-radius:20px;
  background:var(--bd);color:var(--t2);
}
.swz-userlist{max-height:300px;overflow-y:auto}
.swz-userrow{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-bottom:1px solid var(--bd);background:var(--s);
}
.swz-userrow:last-child{border-bottom:none}
.swz-userrow:hover{background:var(--s2)}
.swz-userrow.off{opacity:.55}
.swz-userid{min-width:0;display:flex;flex-direction:column;line-height:1.35}
.swz-userid b{font-size:13px;font-weight:600;color:var(--t);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swz-userid span{font-size:11px;color:var(--t3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swz-av.lg{width:36px;height:36px;font-size:13px}
.swz-av.sm{width:20px;height:20px;font-size:9px}
.swz-tag.ok{background:var(--gb);border-color:var(--gbd);color:var(--g)}

/* ── Edit User modal ────────────────────────────────────────────────────── */
.swz-modalsub{margin:0 0 14px;font-size:12px;color:var(--t2)}
.swz-usercard{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 13px;border:1px solid var(--bd);border-radius:var(--rads);
  background:var(--s2);margin-bottom:16px;
}
.swz-chk.mt{margin-top:16px}
.swz-defrow{
  display:flex;align-items:center;gap:8px;margin-top:9px;
  font-size:12.5px;color:var(--t2);
}
.swz-modal footer .swz-btn.del{border-color:var(--rbd);color:var(--r)}
.swz-modal footer .swz-btn.del:hover{background:var(--rb)}
.swz-modal footer{align-items:center}

@media (max-width:820px){
  .swz-userbar{gap:8px}
  .swz-seatchip{flex:1;padding:8px 10px}
  .swz-roletab{flex:1;text-align:center}
}

/* ══ SECTION MENU (wireframe wala left nav) ════════════════════════════════ */
.swz-steps li{cursor:pointer;transition:background .12s}
.swz-steps li:hover{background:var(--sbar-hv)}
.swz-steps li em{
  margin-left:auto;font-style:normal;font-size:9px;font-weight:600;
  padding:1px 6px;border-radius:20px;background:var(--bd);color:var(--t3);
  text-transform:uppercase;letter-spacing:.3px;
}
.swz-steps li.now em{background:rgba(255,255,255,.25);color:var(--p)}
.swz-steps li.done{color:var(--t2)}
.swz-steps li.done b{background:var(--g);color:#fff}
.swz-steps li.now.done b{background:var(--p);color:var(--text-on-primary)}

/* ══ INTEGRATIONS rows ════════════════════════════════════════════════════ */
.swz-approw{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 13px;border:1px solid var(--bd);border-radius:var(--rads);
  background:var(--s);
}
.swz-approw .swz-tag{margin-left:auto}
.swz-appnote{
  flex-basis:100%;font-size:11.5px;color:var(--t3);line-height:1.5;
  padding-top:2px;
}

/* ══ SETUP REMINDER ═══════════════════════════════════════════════════════ */

/* Always-visible pill — while setup is incomplete */
.swz-pill{
  position:fixed;right:18px;bottom:18px;z-index:8900;
  display:flex;align-items:center;gap:8px;
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:10px 16px;border-radius:24px;
  background:var(--p);color:var(--text-on-primary);
  border:none;box-shadow:0 4px 16px rgba(17,24,38,.22);
  transition:transform .12s,box-shadow .12s;
}
.swz-pill:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(17,24,38,.28)}
.swz-pilldot{
  width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none;
  animation:swzpulse 2s ease-in-out infinite;
}
@keyframes swzpulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.82)}
}

/* Reminder popup */
.swz-remind{width:min(460px,100%)}
.swz-progwrap{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.swz-progbar{
  flex:1;height:7px;border-radius:4px;background:var(--bd);overflow:hidden;
}
.swz-progbar i{
  display:block;height:100%;background:var(--p);
  transition:width .3s ease;
}
.swz-progwrap b{font-size:13px;color:var(--t);white-space:nowrap}
.swz-remind .swz-ord{background:var(--ab);color:var(--a)}
.swz-remind footer{align-items:center}

@media (max-width:820px){
  .swz-pill{right:12px;bottom:12px;font-size:12px;padding:9px 14px}
}

/* ══ FIELD MANAGER ════════════════════════════════════════════════════════ */
.swz-fieldbar{
  display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;
  font-size:12.5px;color:var(--t2);
}
.swz-fieldbar b{color:var(--t);font-size:14px}
.swz-mini{
  display:flex;align-items:center;gap:4px;cursor:pointer;
  font-size:10.5px;color:var(--t3);white-space:nowrap;
  padding:2px 6px;border-radius:5px;
}
.swz-mini:hover{background:var(--s2);color:var(--t2)}
.swz-mini input{width:auto;margin:0;cursor:pointer}
.swz-tag.sys{background:var(--pl);border-color:var(--pm);color:var(--p)}
.swz-frow .swz-who{max-width:130px}

/* preview form ke disabled controls */
.swz-modal .swz-ff textarea{
  font:inherit;font-size:13px;padding:9px 11px;width:100%;resize:none;
  border:1px solid var(--inp-bd);border-radius:var(--rads);
  background:var(--inp);color:var(--t);
}
.swz-modal .swz-ff input:disabled,
.swz-modal .swz-ff select:disabled,
.swz-modal .swz-ff textarea:disabled{
  background:var(--s2);color:var(--t3);cursor:default;
}

@media (max-width:820px){
  .swz-frow{flex-wrap:wrap}
  .swz-frow .swz-who{max-width:100%;flex-basis:100%;order:9}
}

/* ══ FIELD SUGGESTIONS — you choose; nothing is created automatically ══════════ */
.swz-suggest{
  border:1px dashed var(--bd2);border-radius:var(--rads);
  background:var(--s2);padding:12px 14px;margin-bottom:16px;
}
.swz-suggesthead{margin-bottom:9px;line-height:1.45}
.swz-suggesthead b{display:block;font-size:12.5px;color:var(--t)}
.swz-suggesthead span{font-size:11px;color:var(--t3)}
.swz-suggestrow{display:flex;flex-wrap:wrap;gap:6px}
.swz-sugg{
  display:flex;align-items:center;gap:6px;cursor:pointer;font:inherit;
  font-size:12px;padding:5px 11px;border-radius:20px;
  border:1px solid var(--bd2);background:var(--s);color:var(--t2);
  transition:border-color .12s,color .12s;
}
.swz-sugg:hover{border-color:var(--p);color:var(--p)}
.swz-sugg span{font-weight:700;color:var(--p)}
.swz-sugg i{font-style:normal;font-size:10px;color:var(--t3)}

/* ══ SETUP: why it did not open (on screen, not the console) ═════════════════ */
.swz-blocked{
  position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:9400;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:92vw;
  padding:11px 16px;border-radius:var(--rads);
  background:var(--rb);border:1px solid var(--rbd);color:var(--r);
  box-shadow:var(--shadow-lg);font-size:12.5px;
}
.swz-blocked b{font-size:13px}
.swz-blocked span{color:var(--t2)}
.swz-blocked button{
  font:inherit;font-size:11.5px;cursor:pointer;padding:4px 10px;
  border-radius:6px;border:1px solid var(--rbd);background:var(--s);color:var(--r);
}
.swz-blocked button:hover{background:var(--s2)}

/* ══ bar on module switch ══════════════════════════════════════════════ */
.swz-strip{
  position:fixed;left:0;right:0;top:0;z-index:9300;
  display:flex;align-items:center;gap:10px;
  padding:9px 18px;font-size:12.5px;
  background:var(--p);color:var(--text-on-primary);
  box-shadow:0 2px 10px rgba(17,24,38,.18);
  animation:swzslide .22s ease-out;
}
@keyframes swzslide{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.swz-strip b{font-size:13px}
.swz-stripsub{opacity:.8;font-size:11.5px}
.swz-stripgo{
  font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  padding:5px 14px;border-radius:6px;border:none;
  background:var(--acc);color:#fff;
}
.swz-stripgo:hover{background:var(--acc-d)}
.swz-stripx{
  font:inherit;cursor:pointer;border:none;background:transparent;
  color:rgba(255,255,255,.75);font-size:14px;padding:2px 6px;line-height:1;
}
.swz-stripx:hover{color:#fff}

@media (max-width:820px){
  .swz-stripsub{display:none}
  .swz-strip{padding:8px 12px}
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS — beside the CRM sidebarpna menu
   --------------------------------------------------------------------------
   ZAROORI: display sirf .active par set karna hai.
   .page ka rule hai display:none, aur .page.active par display:block.
   Previously display:grid was applied directly to .settings-shell —
   usne display:none ko haraa diya aur Settings har page ke upar chipak gaya.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── nav ka roop ─────────────────────────────────────────────────────────── */
.settings-shell .set-tabs{
  display:flex;flex-direction:column;gap:1px;
  border:1px solid var(--bd);border-radius:var(--rad);
  background:var(--s);padding:7px;margin:0 0 18px;
}
.settings-shell .set-tab{
  position:relative;
  display:flex;align-items:center;gap:10px;text-align:left;width:100%;
  font:inherit;font-size:13px;line-height:1.3;cursor:pointer;
  padding:9px 11px;border-radius:var(--rads);
  border:none;background:transparent;color:var(--t2);
  transition:background .12s,color .12s;
}
.settings-shell .set-tab:hover{background:var(--s2);color:var(--t)}
.settings-shell .set-tab.active{background:var(--pl);color:var(--p);font-weight:600}
.settings-shell .set-tab.active::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--p);
}
.settings-shell .set-tab i{
  width:16px;height:16px;flex:none;display:grid;place-items:center;
  font-size:14px;opacity:.75;
}
.settings-shell .set-tab.active i{opacity:1}
.settings-shell .set-tab.setnav-cta{color:var(--acc-d)}
.settings-shell .set-tab.setnav-cta i{opacity:1}
.settings-shell .set-tab.setnav-cta:hover{background:var(--acc-l)}

.settings-shell .set-navgrp{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--t3);padding:13px 11px 5px;
}
.settings-shell .set-navgrp:first-child{padding-top:3px}

/* ── two-column layout — JS-built wrapper, no grid magic ────────── */
.set-layout{
  display:flex;
  align-items:flex-start;
  gap:24px;
  width:100%;
}
.set-layout > .set-tabs{
  flex:0 0 236px;
  width:236px;
  position:sticky;
  top:74px;
  margin:0;
  max-height:calc(100vh - 96px);
  overflow-y:auto;
}
.set-body{
  flex:1 1 auto;
  min-width:0;          /* otherwise a long table stretches the flex container */
  max-width:1080px;     /* readable width */
}
.set-body > .card{margin-bottom:16px}

/* ── small screen: menu on top, not stuck ───────────────────────────── */
@media (max-width:899px){
  .set-layout{flex-direction:column;gap:14px}
  .set-layout > .set-tabs{
    flex:none;width:100%;position:static;max-height:none;overflow:visible;
  }
  .set-body{max-width:none}
  .settings-shell .set-tabs{
    flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:4px;
    padding:6px;scrollbar-width:none;
  }
  .settings-shell .set-tabs::-webkit-scrollbar{display:none}
  .settings-shell .set-tab{width:auto;white-space:nowrap;padding:8px 12px}
  .settings-shell .set-tab.active::before{
    left:8px;right:8px;top:auto;bottom:0;width:auto;height:2px;border-radius:2px 2px 0 0;
  }
  /* the group heading takes space on small screens */
  .settings-shell .set-navgrp{display:none}
}

/* ══ Settings ke andar wizard panel ═══════════════════════════════════════ */
.setpanel .swz-panel{padding:2px 0}
.setpanel .swz-why{margin-top:0}
.setpanel .swz-userwrap{border-color:var(--bd)}


/* ══════════════════════════════════════════════════════════════════════════
   FIELDS — list on the left, live preview daayin taraf
   ══════════════════════════════════════════════════════════════════════════ */
/* Default TWO columns: section nav + list. Preview below at full width.
   The third column appears only when there is truly room (media query below).
   Previously the default was three columns, so rows overlapped in tight space. */
.swz-fieldwrap{display:grid;grid-template-columns:158px minmax(0,1fr);gap:16px;align-items:start}
.swz-previewcol{grid-column:1 / -1}
.swz-fieldcol{min-width:0}
.swz-previewcol{
  border:1px solid var(--bd);border-radius:var(--rad);
  background:var(--s2);overflow:hidden;
}
.swz-previewhead{
  display:flex;align-items:baseline;gap:7px;
  padding:10px 13px;border-bottom:1px solid var(--bd);background:var(--s);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--p);
}
.swz-previewhead span{
  font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--t3);
}
.swz-livepreview{padding:12px 13px;max-height:60vh;overflow-y:auto}

/* preview ke andar ke section aur field */
.swz-pvsec{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--t3);margin:12px 0 6px;padding-bottom:3px;border-bottom:1px solid var(--bd);
}
.swz-pvsec:first-child{margin-top:0}
.swz-pvgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.swz-pvff{display:flex;flex-direction:column;gap:3px;min-width:0;
  border-radius:6px;padding:3px;transition:background .3s}
.swz-pvff.full{grid-column:1/-1}
.swz-pvff.flash{background:var(--acc-l);box-shadow:0 0 0 2px var(--acc)}
.swz-pvff label{
  font-size:10.5px;font-weight:600;color:var(--t2);
  display:flex;align-items:center;gap:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.swz-pvff label b{color:var(--r)}
.swz-pvff label i{font-style:normal;font-size:9px;opacity:.7}
.swz-pvff input,.swz-pvff select,.swz-pvff textarea{
  font:inherit;font-size:11px;padding:5px 7px;width:100%;
  border:1px solid var(--inp-bd);border-radius:5px;
  background:var(--inp);color:var(--t3);pointer-events:none;
}
.swz-pvnote{font-size:10.5px;color:var(--a);margin-top:8px}

/* field editor ke andar ka mini preview */
.swz-ffpreview{
  border:1px dashed var(--bd2);border-radius:var(--rads);
  background:var(--s2);padding:10px 12px;margin-bottom:6px;
}
.swz-ffpreview .swz-pvsec{margin-top:0}

/* field ideas ki library */
.swz-suggest.lib{border-style:solid;border-color:var(--bd)}
.swz-libgrp{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--t3);margin:10px 0 5px;
}
.swz-libgrp:first-of-type{margin-top:2px}



/* ══════════════════════════════════════════════════════════════════════════
   LIST LAYOUT  do not waste the full width for one name
   In Dropdowns/Departments/Groups, 8 items mean 8 full-width rows
   meaning too much scroll. In two columns the same list takes half the space.
   Stages stay single-column because their order matters.
   ══════════════════════════════════════════════════════════════════════════ */
.swz-rows.cols{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:6px;
}
.swz-rows.cols .swz-row{margin:0}
.swz-rows.cols .swz-empty{grid-column:1/-1}

/* har row patli — 48px se 34px */
.swz-row{padding:5px 8px;gap:6px;min-height:0}
.swz-row input{padding:4px 7px;font-size:12.5px}
.swz-rows.tight .swz-row{padding:4px 8px}
.swz-ord{width:19px;height:19px;font-size:9.5px}
.swz-ic{width:25px;height:25px;font-size:11px}
.swz-av{width:24px;height:24px;font-size:10px}

/* add bar bhi patli */
.swz-add input,.swz-add select{padding:7px 10px;font-size:12.5px}
.swz-add .swz-btn{padding:7px 14px}

/* integrations rows */
.swz-approw{padding:9px 11px;gap:8px}
.swz-approw .swz-userid b{font-size:12.5px}
.swz-approw .swz-userid span{font-size:11px}
.swz-appnote{font-size:11px;padding-top:0}

/* less space between section headings */
.swz-gname{margin:14px 0 6px}
.swz-why{padding:9px 12px;margin-bottom:14px;font-size:12.5px}

/* user rows */
.swz-userrow{padding:7px 12px}
.swz-userlist{max-height:260px}

/* permission matrix — chhote cell, zyada dikhe */
.swz-mtx th,.swz-mtx td{padding:6px 8px}
.swz-mtx table{font-size:12px}
.swz-mtx td.lead,.swz-mtx th.lead{min-width:150px}
.swz-mtx{max-height:52vh}

/* business type cards thode chhote */
.swz-card{padding:13px 14px;gap:4px}
.swz-cards{gap:10px}


/* ══════════════════════════════════════════════════════════════════════════
   LEAD FIELDS — the section's own sidebar
   Showing all fields in one long list makes 20+ fields hard to find
   ho jata hai. Section chunne se sirf wahi dikhte hain, aur preview me
   that section is highlighted lightly  showing where it will land.
   ══════════════════════════════════════════════════════════════════════════ */
.swz-secnav{
  position:sticky;top:0;
  border:1px solid var(--bd);border-radius:var(--rad);
  background:var(--s);padding:7px;
  display:flex;flex-direction:column;gap:1px;
}
.swz-secnavhead{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--t3);padding:4px 9px 6px;
}
.swz-secbtn{
  display:flex;align-items:center;gap:7px;width:100%;text-align:left;
  font:inherit;font-size:12px;cursor:pointer;
  padding:7px 9px;border-radius:var(--rads);
  border:none;background:transparent;color:var(--t2);
}
.swz-secbtn:hover{background:var(--s2);color:var(--t)}
.swz-secbtn.on{background:var(--pl);color:var(--p);font-weight:600}
.swz-secbtn b{
  margin-left:auto;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:20px;background:var(--bd);color:var(--t3);
}
.swz-secbtn.on b{background:var(--p);color:var(--text-on-primary)}
.swz-secnavfoot{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--bd);
  display:flex;flex-direction:column;gap:5px;
}
.swz-btn.sm{padding:6px 10px;font-size:11.5px}
.swz-dim{font-size:11.5px;color:var(--t3)}
.swz-dim b{color:var(--t);font-size:13px}

/* highlight the open section in the preview */
.swz-pvblock{border-radius:7px;padding:4px 6px;margin:0 -6px;transition:background .2s}
.swz-pvblock.on{background:var(--pl)}
.swz-pvblock.on .swz-pvsec{color:var(--p)}

@media (max-width:820px){
  .swz-fieldwrap{grid-template-columns:1fr}
  .swz-secnav{position:static;flex-direction:row;flex-wrap:wrap}
  .swz-secnavhead{display:none}
  .swz-secbtn{width:auto}
  .swz-secnavfoot{flex-direction:row;margin:0;padding:0;border:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   TOPBAR vs MODAL
   --------------------------------------------------------------------------
   .topbar ka z-index 1200 hai aur modal ke .overlay ka sirf 500 — isliye
   fixed header modal ke UPAR baith jata tha aur uska top content kaat deta
   . Two fixes, both together:
     1. overlay ko header se upar uthao (har browser me chalega)
     2. modal khulte hi header ko upar sarka do (:has() wale browser me)
   ══════════════════════════════════════════════════════════════════════════ */
.overlay{z-index:1300}

.topbar{transition:transform .18s ease,opacity .18s ease}
/* Previously this also had body:has(.overlay.open). It matches anywhere in the document —
   andpp me kuch overlay aise hain jinpar
   'open' class padi rehti hai par wo display:none hote hain. Us wajah se
   topbar bina modal ke bhi gayab ho jata tha. Ab sirf ek class par bharosa,
   jise JS sahi-sahi lagata hai. */
body.modal-open .topbar{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}
body.modal-open .sbar{z-index:300}

/* The page's top content must not hide under the header.
   the header is 60px and padding-top was only 64px — a 4px gap, jisse har
   heading bar se chipki hui lagti thi. */
.page{padding-top:76px}
@media (max-width:700px){ .page{padding-top:70px} }

/* When the broadcast banner shows, header and content shift down,
   otherwise the banner covers them. */
body.has-banner .topbar{top:44px}
body.has-banner .page{padding-top:120px}


/* ══════════════════════════════════════════════════════════════════════════
   Shrink the FIELD ROW correctly
   --------------------------------------------------------------------------
   .swz-frow me naam + type tag + core tag + do checkbox + do button hote
   In tight space these do not fit on one line, so the row
   moved out of its column and below the preview. Now the row wraps
   hai aur naam sikudta hai.
   ══════════════════════════════════════════════════════════════════════════ */
.swz-frow{flex-wrap:wrap;row-gap:4px}
.swz-frow > b{
  flex:1 1 auto;min-width:90px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.swz-frow .swz-tag{flex:0 0 auto}
.swz-frow .swz-who{flex:1 1 100%;max-width:100%;order:9}
.swz-frow .swz-mini{flex:0 0 auto}
.swz-frow .swz-ic{flex:0 0 auto}
.swz-fieldcol{overflow:hidden}

/* ── Space is limited in Settings: preview below, full width ──── */
.setpanel .swz-fieldwrap{
  grid-template-columns:158px minmax(0,1fr);
}
.setpanel .swz-previewcol{
  grid-column:1 / -1;
  position:static;
  margin-top:4px;
}
.setpanel .swz-livepreview{max-height:none}
.setpanel .swz-pvgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}

/* The wizard is full-screen — there all three columns stay together,
   but only when there is truly room. */
/* The wizard is full-screen — above 1150px all three columns appear together
   and the preview stays stuck while scrollinghta hai. */
@media (min-width:1150px){
  .swz-shell .swz-fieldwrap{grid-template-columns:172px minmax(0,1fr) 300px}
  .swz-shell .swz-previewcol{grid-column:auto;position:sticky;top:0}
  .swz-shell .swz-livepreview{max-height:60vh}
}


/* ══════════════════════════════════════════════════════════════════════════
   DRAWER — full screen, top to bottome tak
   --------------------------------------------------------------------------
   Previously height:100dvh + flex stretch was tried, but top-bottom
   a little space remained: .overlay padding, flex alignment and
   animation sab milkar panel ko hilaate rehte the.
   No guessing now  the panel is pinned via position:absolute to top:0 and bottom:0
   baandh diya hai. Overlay khud position:fixed inset:0 hai, isliye panel
   is exactly the viewport size. Padding or alignment has no effect.
   ══════════════════════════════════════════════════════════════════════════ */
.overlay.drawer{
  padding:0 !important;
  overflow:hidden !important;
}
.overlay.drawer .modal{
  /* !important intentionally: index.html's inline <style> has .overlay.drawer
     .modal par height:100% aur .modal par padding/border-radius lage hain.
     All of them must be overridden here, otherwise something is left
     behind  as happened in the previous two attempts. */
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  height:auto !important;      /* height is derived from top+bottom */
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  border:none !important;
  border-radius:0 !important;
  width:min(1320px,96vw) !important;   /* wider  breathing room for fields */
  overflow-y:auto;
  overflow-x:hidden;           /* otherwise a horizontal scrollbar appears */
  padding:0 !important;
}
/* All inner parts stay within their width — padding added to width
   pushes content outside, which scrollbar ki wajah thi. */
.overlay.drawer .modal *{box-sizing:border-box}

/* title stuck at the top */
/* .modal-title has rules in three places — index.html's inline style,
   selliora-pro.css, and an id-based rule. Hence !important here, otherwise
   padding har baar kisi aur rule se haar jata hai. */
.overlay.drawer .modal > .modal-title,
.overlay.drawer .modal > .modal-head{
  position:sticky !important;
  top:0 !important;
  z-index:3;
  margin:0 !important;
  padding:20px 34px 15px !important;
  background:var(--s) !important;
  border-bottom:1px solid var(--bd);
}

/* Save / Cancel stuck at the bottom — so in a long form finding Save
   does not require full scrolling */
.overlay.drawer .modal > .factions,
.overlay.drawer .modal > .modal-actions{
  position:sticky !important;
  bottom:0 !important;
  z-index:3;
  margin:0 !important;
  padding:15px 34px !important;
  background:var(--s);
  border-top:1px solid var(--bd);
  display:flex;gap:8px;
}

/* Middle content  breathing room from the edges */
/* Breathing room from the edge. 24px felt tight, especially when
   the drawer takes full height — larger panel ho to hashiya bhi bada
   needed, otherwise content sticks to the wall. */
.overlay.drawer .modal > *:not(.modal-title):not(.modal-head):not(.factions):not(.modal-actions){
  padding-left:34px !important;
  padding-right:34px !important;
}
.overlay.drawer .modal > *:last-child{padding-bottom:0}

@media (max-width:640px){
  .overlay.drawer .modal{width:100vw}
  .overlay.drawer .modal > .modal-title,
  .overlay.drawer .modal > .modal-head{padding:14px 18px 12px}
  .overlay.drawer .modal > .factions,
  .overlay.drawer .modal > .modal-actions{padding:12px 18px}
  .overlay.drawer .modal > *:not(.modal-title):not(.modal-head):not(.factions):not(.modal-actions){
    padding-left:18px;padding-right:18px;
  }
}


/* Form grid inside the drawer  three columns in wide space, so label and
   input do not feel cramped. */
.overlay.drawer .modal > .fgrid{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
  width:100%;
  max-width:100%;
}
.overlay.drawer .modal > .fgrid > *{min-width:0}
.overlay.drawer .modal input,
.overlay.drawer .modal select,
.overlay.drawer .modal textarea{max-width:100%}


/* .modal-head is also a header — just a different name. In the drawer both are the same. */
.overlay.drawer .modal > .modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:16px;font-weight:700;letter-spacing:-.01em;
}
/* Forms like WhatsApp setup should be narrower in the drawer — at 1320px
   a one-or-two field line looks too long hai. */
#wa-setup-modal .modal{width:min(860px,96vw) !important}


/* ══════════════════════════════════════════════════════════════════════════
   SEARCH BOX — text under the icon jana
   --------------------------------------------------------------------------
   selliora-pro.css me ek generic rule hai:
     input:not([type=checkbox]):not([type=radio])…{padding:8px 11px}
   Chaar :not() iski specificity (0,4,1) kar dete hain, jabki
   .search-wrap input sirf (0,1,1) hai. Isliye har search box ka left
   padding chala jata hai aur placeholder icon ke upar chad jata hai.
   Yahan har search box ko uska padding wapas diya ja raha hai. Ye file
   sabse aakhir me load hoti hai, aur specificity bhi zyada hai.
   ══════════════════════════════════════════════════════════════════════════ */

/* Leads page ka search (icon left:9px, 13px chauda) */
.search-wrap input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){
  padding-left:32px;
}

/* Universities ka search (icon left:14px, 17px chauda, right me / aur ✕) */
.unisearch input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){
  padding-left:41px;
  padding-right:74px;
}

/* Topbar ka global search */
.topbar .tb-search input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){
  padding-left:38px;
}

/* Design-system wala search */
.ds-search input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){
  padding-left:35px;
}


/* ══════════════════════════════════════════════════════════════════════════
   WHATSAPP CHAT — search and tabs
   --------------------------------------------------------------------------
   In .wa-search-box the icon and input are flex siblings, not absolute.
   Lekin pro.css ka generic input rule (specificity 0,4,1) yahan bhi jeet
   jata hai aur input par border, background aur padding daal deta hai —
   so the input looks like a separate box inside the search box.
   ══════════════════════════════════════════════════════════════════════════ */
.wa-search-box input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){
  border:none;
  background:transparent;
  padding:0;
  border-radius:0;
  height:100%;
}
.wa-search-box input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus{
  border-color:transparent;
  box-shadow:none;
}

/* Only 2px above the tabs  they looked stuck to the search. */
.wa-tabs-row{padding-top:10px}
.wa-search-wrap{padding-bottom:4px}


/* ══════════════════════════════════════════════════════════════════════════
   WhatsApp header badge — like the sidebare bagal me hara odd lagta hai
   --------------------------------------------------------------------------
   .wa-avatar-sm par #00a884 hardcoded hai (WhatsApp ka brand green). Chat
   list me contact avatars ke liye wo theek hai, par header wala badge
   sidebar se sat kar baithta hai aur aapke orange brand se takrata hai.
   Sirf header wale ko app ke brand rang par le aaya hai — chat list waise
   ki waisi hai.
   ══════════════════════════════════════════════════════════════════════════ */
/* Exactly the two declarations on the sidebar logo:
     .sbar .sb-brand .bt::before { background:var(--acc); color:#fff }
   Previously var(--p) and var(--text-on-primary) were used  that differed
   variable hain, isliye rang thoda alag pad raha tha. Ab ek hi source se
   uses it, so changing the accent in Branding changes both together. */
/* Not just the header now — chat list and thread header avatars too. Previously
   this had only the header one, and the list WhatsApp ka hara rehta tha, jisse
   ek hi screen par do brand takra rahe the. Rang wahi --acc hai jo sidebar
   logo and topbar avatar use it, so Branding changes all at once
   badalta hai. */
.wa-avatar-sm,
[data-theme="dark"] .wa-avatar-sm{
  background:var(--acc);
  color:#fff;
}

/* ══ FACEBOOK LEAD ADS setup form ═════════════════════════════════════════ */
.fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:4px}
.fb-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.fb-f.wide{grid-column:1/-1}
.fb-f .lbl{font-size:12px;font-weight:600;color:var(--t);margin:0}
.fb-f .lbl .req{color:var(--r)}
.fb-f input{width:100%}
.fb-f i{font-style:normal;font-size:11px;color:var(--t3);line-height:1.5}
.fb-f i.warn{color:var(--a)}
.fb-row{display:flex;gap:8px}
.fb-row input{flex:1;min-width:0}
@media (max-width:720px){ .fb-grid{grid-template-columns:1fr} }

/* ══ CONNECTED APPS — one list, not three separate cards ════════════════════════ */
.ca-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;border-bottom:1px solid var(--bd);
}
.ca-sub{font-size:12px;color:var(--t3);margin-top:2px}

.ca-row{
  display:flex;align-items:center;gap:14px;
  padding:13px 18px;border-bottom:1px solid var(--bd);
}
.ca-row:last-child{border-bottom:none}
.ca-row:hover{background:var(--s2)}

.ca-ico{
  width:36px;height:36px;flex:none;border-radius:9px;
  display:grid;place-items:center;
  background:var(--s2);color:var(--t3);font-size:17px;
}
.ca-ico.on{background:var(--pl);color:var(--p)}

.ca-name{font-size:14px;font-weight:600;color:var(--t);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ca-status{
  font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;
  background:var(--s2);border:1px solid var(--bd);color:var(--t3);
  white-space:nowrap;flex:none;
}
.ca-status.on{background:var(--gb);border-color:var(--gbd);color:var(--g)}

.ca-err{color:var(--r);font-size:15px;flex:none;cursor:help}
.ca-btn{flex:none;min-width:92px}

@media (max-width:640px){
  .ca-row{flex-wrap:wrap;row-gap:8px}
  .ca-name{flex-basis:calc(100% - 50px)}
  .ca-btn{margin-left:auto}
}

/* Provider modal — jab ek hi provider ho to dropdown locked dikhe */
.ff-note{
  display:block;font-style:normal;font-size:11px;color:var(--t3);margin-top:4px;
}
#pv_provider:disabled{
  background:var(--s2);color:var(--t2);cursor:default;opacity:1;
}

/* Provider drawer  a small form, so less width.
   Lead form me bahut fields hain to 1320px kaam aata hai; yahan teen-chaar
   fields, at that width a single input is as long as the whole screen
   dikhta hai. */
#provider-modal .modal{width:min(620px,96vw) !important}