/* CrmHub24 — Sozlamalar: bosqichlar taxtasi (2026-10-19, amoCRM "Воронка" uslubi). Eski .stage-row qoidalari boshqa joylar uchun qoladi. */
.st-section[data-st="pipeline"]{max-width:none}
.stage-board{display:flex;gap:0;overflow-x:auto;border:1px solid var(--border-dark);border-radius:14px;background:var(--bg-panel);margin:4px 0 14px;scrollbar-width:thin}
.stage-col{flex:1 0 176px;max-width:260px;min-width:176px;display:flex;flex-direction:column;border-right:1px solid var(--border-dark);transition:opacity .15s,box-shadow .15s}
.stage-col:last-child{border-right:0}
.stage-col[draggable="true"]{cursor:grab}
.stage-col.dragging{opacity:.4}
.stage-col.drop-before{box-shadow:inset 3px 0 0 var(--accent)}
.stage-col.drop-after{box-shadow:inset -3px 0 0 var(--accent)}
.stage-col.won{background:color-mix(in srgb,var(--green) 6%,transparent)}
.stage-col.lost{background:color-mix(in srgb,var(--red) 6%,transparent)}
.sc-head{display:flex;align-items:center;gap:8px;height:54px;box-sizing:border-box;padding:0 12px;border-bottom:3px solid var(--border-dark2)}
.sc-grip{color:var(--text-dim);flex-shrink:0;opacity:.7}
.sc-head input[type=text]{flex:1;min-width:0;border:1px solid transparent!important;background:transparent!important;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:6px 4px!important;border-radius:8px;color:var(--text-main)}
.sc-head input[type=text]:hover{border-color:var(--border-dark2)!important}
.sc-head input[type=text]:focus{border-color:var(--accent)!important;background:var(--bg-input,var(--bg-panel))!important;outline:none}
.sc-body{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 10px 18px;min-height:112px}
.sc-body .color-palette{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:150px}
.sc-body .cp-swatch{width:18px;height:18px}
.sc-body .stage-closed-badge,.sc-body .stage-unsorted-badge{text-align:center;white-space:normal;line-height:1.35}
.sc-ctl{display:flex;gap:4px;margin-top:auto}
.sc-ib{width:30px;height:30px;border:1px solid var(--border-dark2);border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.sc-ib:hover:not(:disabled){background:var(--hover);color:var(--text-main)}
.sc-ib:disabled{opacity:.35;cursor:default}
.sc-ib.del{font-size:18px}.sc-ib.del:hover:not(:disabled){color:var(--red);border-color:var(--red-soft,var(--red))}
.sc-ib:focus-visible{outline:none;box-shadow:var(--ring)}
@media (max-width:700px){.stage-col{flex-basis:160px}}
.sc-body .cp-swatch{border-radius:50%;cursor:pointer;border:2px solid transparent}
.sc-body .cp-swatch.selected{border-color:var(--text-main)}
.stage-col{flex-basis:200px;min-width:200px}
.sc-head input[type=text]{font-size:12px;letter-spacing:.02em}
.stage-col{flex:1 1 0;min-width:156px;max-width:none}
.sc-head{padding:0 8px}
.sc-trg{display:flex;flex-direction:column;gap:8px;width:100%}
.sc-tc{display:block;width:100%;text-align:left;background:color-mix(in srgb,var(--text-main) 5%,transparent);border:1px solid var(--border-dark);border-radius:9px;padding:9px 10px;font:inherit;font-size:12.5px;color:var(--text-main);cursor:pointer}
.sc-tc:hover{border-color:var(--accent)}
.sc-tc b{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-add{width:100%;border:1px dashed var(--border-dark2);border-radius:9px;background:transparent;color:var(--text-muted);font:inherit;font-size:12.5px;padding:9px 10px;cursor:pointer}
.sc-add:hover{color:var(--accent-text);border-color:var(--accent)}
.sc-body{align-items:stretch}
.sc-body .color-palette,.sc-body .stage-closed-badge,.sc-ctl{align-self:center}

/* ======== Voronka sahifasi: artifakt maketi (2026-10-19) — chapda panel, o'ngda keng ustunli taxta ======== */
.vr-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px;align-items:start}
.vr-aside{background:var(--bg-panel);border:1px solid var(--border-dark);border-radius:14px;padding:18px 18px 22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.vr-ah{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.vr-ah2{margin-top:10px}
.vr-pl{display:flex;flex-direction:column;gap:10px}
.vr-tabs{display:flex;flex-direction:column;gap:2px}
.vr-tabs .role-tab{padding:9px 12px;border-radius:9px;font-size:13.5px;cursor:pointer;border:0;color:var(--text-muted)}
.vr-tabs .role-tab:hover{background:var(--hover);color:var(--text-main)}
.vr-tabs .role-tab.active{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.vr-cur{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12.5px;color:var(--text-muted);padding-top:8px;border-top:1px solid var(--border-dark)}
.vr-cur-b{display:inline-flex;gap:2px}
.vr-card{border:1px solid var(--border-dark2);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.vr-ct{display:flex;align-items:center;justify-content:space-between;font-size:14px}
.vr-on{font-size:11px;font-weight:600;color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent);padding:2px 8px;border-radius:999px}
.vr-card p,.vr-p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-muted)}
.vr-link{font-size:13px;font-weight:600;color:var(--accent-text);text-decoration:underline}
.vr-main{min-width:0}
.vr-board-wrap{overflow-x:auto;border:1px solid var(--border-dark);border-radius:14px;background:var(--bg-panel);scrollbar-width:thin}
.vr-addrow{display:flex;gap:8px;margin-top:14px}
.vr-addrow input{flex:1;padding:9px 12px;border:1px solid var(--border-dark2);border-radius:10px;background:transparent}

/* taxta: keng ustunlar */
.vr-board-wrap .stage-board{border:0;border-radius:0;background:transparent;margin:0;overflow:visible;min-width:min-content}
.vr-board-wrap .stage-col{flex:0 0 270px;min-width:270px;max-width:270px;position:relative;border-right:1px solid var(--border-dark)}
.vr-board-wrap .sc-head{height:52px;border-bottom-width:4px;justify-content:center;padding:0 14px}
.vr-board-wrap .sc-head input[type=text]{font-size:13px;font-weight:700;letter-spacing:.06em}
.vr-board-wrap .sc-grip{position:absolute;left:12px;top:19px}
.vr-board-wrap .sc-body{flex:1;min-height:360px;align-items:stretch;gap:10px;padding:14px 14px 10px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 65px,color-mix(in srgb,var(--text-main) 6%,transparent) 65px,color-mix(in srgb,var(--text-main) 6%,transparent) 66px)}
.vr-board-wrap .stage-closed-badge{white-space:normal;text-align:center;line-height:1.45;font-size:12px;color:var(--text-muted);background:transparent;padding:6px 0}
.sc-tc{display:flex!important;flex-direction:column;gap:3px;background:var(--bg-panel)!important;border:1px solid var(--border-dark2)!important}
.sc-tc b{font-size:13px}.sc-tc span{font-size:12px;color:var(--text-muted);display:block;white-space:normal;line-height:1.4}
.sc-add{display:flex!important;align-items:center;justify-content:center;gap:10px;border:0!important;height:48px;font-size:13.5px!important;color:var(--text-main)!important}
.sc-add i{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--text-muted);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:16px;line-height:1}
.sc-add:hover i{border-color:var(--accent);color:var(--accent-text)}
.sc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px 14px;border-top:1px solid var(--border-dark);min-height:50px;box-sizing:border-box}
.sc-foot .color-palette{display:flex;flex-wrap:wrap;gap:6px}
.sc-foot .cp-swatch{width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.sc-foot .cp-swatch.selected{border-color:var(--text-main)}
.sc-plus{position:absolute;right:-14px;top:19px;width:28px;height:28px;border-radius:50%;background:var(--bg-panel);border:1px solid var(--border-dark2);color:var(--text-muted);font-size:18px;line-height:1;cursor:pointer;z-index:3;opacity:0;transition:opacity .12s;display:flex;align-items:center;justify-content:center}
.stage-col:hover .sc-plus,.sc-plus:focus-visible{opacity:1}
.sc-plus:hover{color:var(--accent-text);border-color:var(--accent)}
#page-settings.has-bg .vr-aside,#page-settings.has-bg .vr-board-wrap{background:color-mix(in srgb,var(--bg-panel) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (max-width:1000px){.vr-layout{grid-template-columns:minmax(0,1fr)}}
#page-settings.active{max-width:none}

/* ---- Trigger popup (sahifa ichida) ---- */
#page-settings .trg-ov{position:fixed;top:0;left:0;width:calc(100vw / 0.9);height:calc(100vh / 0.9);z-index:80;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;background:rgba(6,10,14,.55)}
.trg-modal{width:min(560px,100%);max-height:calc(100vh / 0.9 - 40px);overflow-y:auto;background:var(--bg-panel);border:1px solid var(--border-dark2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.5);padding:0 24px 22px}
.trg-mh{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0 12px;margin-bottom:6px;background:var(--bg-panel);border-bottom:1px solid var(--border-dark)}
.trg-mh h3{margin:0;font-size:17px;font-weight:700;color:var(--text-main)}
.trg-modal .cf-add-form{border:0!important;background:transparent!important;padding:0!important;margin:0!important;box-shadow:none}
.trg-modal input:not([type=checkbox]):not([type=radio]),.trg-modal select{width:100%;min-height:40px;box-sizing:border-box;border:1px solid var(--border-dark2);border-radius:10px;background:transparent;color:var(--text-main);padding:0 12px;font:inherit;font-size:14px}
.trg-modal input[type=number]{width:90px}
.trg-modal select option{background:var(--bg-panel);color:var(--text-main)}
.trg-modal .field-label{display:block;margin:14px 0 6px;font-size:11px;letter-spacing:.06em}
.trg-modal .field-label:first-of-type{margin-top:4px}

/* ---- Trigger: amal tanlash (amoCRM kabi plitkalar) va ustundagi karta ---- */
.trg-modal.wide{width:min(720px,100%)}
.trg-mh h3{flex:1}
#trg-search{width:100%;min-height:42px;box-sizing:border-box;border:1px solid var(--border-dark2);border-radius:10px;background:transparent;color:var(--text-main);padding:0 14px;font:inherit;font-size:14px;margin:4px 0 16px}
.trg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.trg-tile{border:1px solid var(--border-dark);border-radius:12px;background:color-mix(in srgb,var(--text-main) 4%,transparent);padding:18px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--accent-text);text-align:center}
.trg-tile button{width:100%;border:0;border-radius:9px;background:color-mix(in srgb,var(--text-main) 8%,transparent);color:var(--text-main);font:inherit;font-size:13px;padding:9px 8px;cursor:pointer;line-height:1.3}
.trg-tile button:hover{background:var(--accent);color:#fff}
.trg-tile button:focus-visible{outline:none;box-shadow:var(--ring)}
@media (max-width:600px){.trg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sc-tc{flex-direction:row!important;align-items:center;gap:10px!important}
.sc-tc .tc-ic{color:var(--green);display:inline-flex;flex-shrink:0}
.sc-tc.off .tc-ic{color:var(--text-dim)}
.sc-tc .tc-tx{display:flex;flex-direction:column;min-width:0;gap:1px}
.sc-tc .tc-tx small{font-size:12px;color:var(--text-muted);white-space:normal;line-height:1.3}
.sc-tc .tc-tx b{font-size:13px;white-space:normal}