/* CrmHub24 Sozlamalar: "ro'yxat + tahrirlash kartasi" andozasi (2026-10-23, foydalanuvchi tasdiqlagan maket "CRM sozlamalar oynalari").
 * Avtomatik SMS va Maxsus maydonlar shu klasslarda (.sx-*). Ranglar CRM tokenlaridan — ikkala mavzu va fon (has-bg) bilan ishlaydi.
 * Qoida: nom + bir qator izoh TEPADA, boshqaruv ostida to'liq kenglikda; kartalar alohida (oraliq 16px); pastki panel doim ko'rinadi. */
.sx{display:flex;flex-direction:column;gap:16px;width:100%}
.sx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sx-head h3{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--text-main)}
.sx-head p{margin:0;color:var(--text-muted);font-size:13.5px;line-height:1.5;max-width:640px}
.sx-body{display:flex;gap:16px;align-items:stretch;min-height:560px}

.sx-card{background:var(--bg-panel);border:1px solid var(--border-dark);border-radius:14px;min-width:0}
.sx-list{width:330px;flex-shrink:0;padding:14px 12px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;align-self:flex-start;max-height:calc(100vh / 0.9 - 190px);overflow:auto}
.sx-ed{flex:1;display:flex;flex-direction:column;overflow:hidden}

.sx-in{width:100%;box-sizing:border-box;min-height:38px;border-radius:10px;border:1px solid var(--border-dark2);background:var(--bg-main);color:var(--text-main);padding:0 12px;font:inherit;font-size:13.5px}
textarea.sx-in{padding:11px 13px;line-height:1.55;resize:vertical;min-height:150px}
.sx-in:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.sx-in:disabled{opacity:.7;cursor:not-allowed}
select.sx-in option,select.sx-in optgroup{background:var(--bg-panel);color:var(--text-main)}

/* ro'yxat */
.sx-tabs{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--hover)}
.sx-tabs button{flex:1;min-height:32px;border:0;border-radius:8px;background:none;color:var(--text-muted);font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.sx-tabs button.on{background:var(--bg-panel);color:var(--text-main);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.sx-grp{display:flex;flex-direction:column;gap:3px}
.sx-grp-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0 6px 4px;font-size:12px}
.sx-grp-h b{font-weight:600;color:var(--text-main)}
.sx-grp-h span{color:var(--text-muted);font-size:11.5px}
.sx-row{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid transparent;background:none;color:var(--text-main);font:inherit;cursor:pointer;box-sizing:border-box}
.sx-row:hover{background:var(--hover)}
.sx-row.on{border-color:var(--accent);background:var(--accent-soft)}
.sx-row:focus-visible{outline:none;box-shadow:var(--ring)}
.sx-row-t{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:600;font-size:13.5px}
.sx-row-t>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-row-s{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-row.off{flex-direction:row;justify-content:space-between;align-items:center;cursor:default;color:var(--text-muted);font-size:13px;padding:8px 12px}
.sx-row.off:hover{background:none}
.sx-link{border:0;background:none;color:var(--accent-text);font:inherit;font-size:12.5px;cursor:pointer;padding:2px 0;white-space:nowrap}
.sx-link:hover{text-decoration:underline}
.sx-link:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.sx-pill{flex-shrink:0;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--hover);color:var(--text-muted)}
.sx-pill.ok{background:var(--green-soft);color:var(--green)}
.sx-pill.warn{background:var(--amber-soft);color:var(--amber)}
.sx-none{color:var(--text-muted);font-size:12.5px;padding:6px}

/* tahrirlash kartasi */
.sx-ed-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--border-dark)}
.sx-ed-head small{display:block;font-size:12px;color:var(--text-muted);margin-bottom:2px}
.sx-ed-head h4{margin:0;font-size:17px;font-weight:600;color:var(--text-main)}
.sx-ed-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;padding:22px 24px;align-content:start}
.sx-form{display:flex;flex-direction:column;gap:22px;min-width:0}
.sx-f{display:flex;flex-direction:column;gap:9px}
.sx-f-l{font-weight:600;font-size:13.5px;color:var(--text-main)}
.sx-f-h{font-size:12px;color:var(--text-muted);line-height:1.45;margin-top:-6px}
.sx-sep{height:1px;background:var(--border-dark)}
.sx-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sx-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sx-sub{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-muted)}
.sx-err{font-size:12px;color:var(--red)}
.sx-ed-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;border-top:1px solid var(--border-dark);background:var(--hover)}
.sx-ed-foot>div{display:flex;gap:8px;margin-left:auto}
.sx-del{border:0;background:none;color:var(--red);font:inherit;font-size:13px;cursor:pointer;padding:8px 6px;border-radius:8px}
.sx-del:hover{background:var(--red-soft)}

/* tanlov kartalari */
.sx-opt{display:flex;gap:10px;padding:11px 13px;border-radius:10px;border:1px solid var(--border-dark2);cursor:pointer;color:var(--text-main);background:none;font:inherit;text-align:left;align-items:flex-start;box-sizing:border-box;min-width:0}
.sx-opt input{margin:2px 0 0;accent-color:var(--accent);flex-shrink:0}
.sx-opt b{display:block;font-weight:600;font-size:13px}
.sx-opt small{display:block;font-size:12px;color:var(--text-muted);line-height:1.45;margin-top:2px}
.sx-opt.on{border-color:var(--accent);background:var(--accent-soft)}
.sx-opt:disabled,.sx-opt.dis{opacity:.55;cursor:not-allowed}
button.sx-opt{justify-content:flex-start;align-items:center;min-height:40px;font-size:13px}

/* kalit */
.sx-switch{display:inline-flex;align-items:center;gap:10px;border:0;background:none;color:var(--text-main);font:inherit;font-size:13px;cursor:pointer;padding:4px;border-radius:8px}
.sx-switch .tr{width:38px;height:22px;border-radius:999px;background:var(--border-dark2);position:relative;flex-shrink:0;transition:background .15s}
.sx-switch .tr::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.sx-switch[aria-checked="true"] .tr{background:var(--accent)}
.sx-switch[aria-checked="true"] .tr::after{left:19px}
.sx-switch:focus-visible{outline:none;box-shadow:var(--ring)}
.sx-switch:disabled{opacity:.55;cursor:not-allowed}

/* o'zgaruvchi tugmalari va hisoblagich */
.sx-chips-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.sx-chips{display:flex;gap:6px;flex-wrap:wrap}
.sx-chip{min-height:28px;padding:0 10px;border-radius:7px;border:1px solid var(--border-dark2);background:none;color:var(--text-main);font:inherit;font-size:12px;cursor:pointer}
.sx-chip:hover{background:var(--hover)}
.sx-chip:focus-visible{outline:none;box-shadow:var(--ring)}
.sx-count{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:6px}

/* variantlar ro'yxati */
.sx-opts{display:flex;flex-direction:column;gap:6px}
.sx-opts>div{display:flex;gap:6px}
.sx-x{width:38px;flex-shrink:0;border-radius:10px;border:1px solid var(--border-dark2);background:none;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sx-x:hover{color:var(--red);border-color:var(--red)}
.sx-add{align-self:flex-start;min-height:32px;padding:0 12px;border-radius:9px;border:1px dashed var(--border-dark2);background:none;color:var(--text-main);font:inherit;font-size:12.5px;cursor:pointer}
.sx-add:hover{background:var(--hover)}

/* ko'rinish */
.sx-prev{display:flex;flex-direction:column;gap:8px}
.sx-prev>span{font-size:12px;color:var(--text-muted)}
.sx-phone{border-radius:16px;border:1px solid var(--border-dark);background:var(--bg-main);padding:14px 12px;display:flex;flex-direction:column;gap:10px}
.sx-phone em{font-style:normal;font-size:11.5px;color:var(--text-muted);text-align:center}
.sx-bubble{align-self:flex-start;max-width:94%;background:var(--bg-panel);border:1px solid var(--border-dark);border-radius:14px 14px 14px 4px;padding:9px 12px;font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--text-main)}
.sx-prev small{font-size:11.5px;color:var(--text-muted);line-height:1.5}
.sx-mock{border-radius:12px;border:1px solid var(--border-dark);background:var(--bg-main);padding:14px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-muted)}
.sx-mock .req{color:var(--amber)}
.sx-mock .box{min-height:36px;border-radius:9px;border:1px solid var(--border-dark2);display:flex;align-items:center;padding:0 12px;color:var(--text-muted);background:var(--bg-panel)}

/* bo'sh holat */
.sx-empty{margin:24px;padding:28px;border-radius:12px;border:1px dashed var(--border-dark2);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sx-empty b{font-size:15px;color:var(--text-main)}
.sx-empty p{margin:0;color:var(--text-muted);line-height:1.5;max-width:460px}

/* fon (has-bg) bo'lsa kartalar yarim shaffof */
#page-settings.has-bg .sx-card{background:color-mix(in srgb,var(--bg-panel) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#page-settings.has-bg .sx-head{background:color-mix(in srgb,var(--bg-panel) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:14px 20px;border-radius:14px}

@media (max-width:1200px){
  .sx-ed-main{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .sx-body{flex-direction:column}
  .sx-list{width:100%;max-height:none}
  .sx-2,.sx-3{grid-template-columns:minmax(0,1fr)}
}
/* saqlangan maydon turi: o'zgarmaydi — o'chirilgan tugmalar to'plami emas, bitta aniq qiymat */
.sx-fixed{display:flex;align-items:center;min-height:40px;padding:0 13px;border-radius:10px;border:1px solid var(--border-dark);background:var(--hover);font-size:13.5px;color:var(--text-main);box-sizing:border-box}
.sx-fixed b{font-weight:600}