/* «کاربران و پشتیبانی» (review section 3, 2026-10-13): overview, users list, user page, tickets.
   Built on ds.css; only what is particular to these pages lives here. */

/* overview: from sign-up to use */
.u-steps{display:grid;gap:12px;padding:4px 18px 16px}
.u-step{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr) 96px;gap:12px;align-items:center;font-size:13px}
.u-step .bar{height:12px;border-radius:9px;background:var(--surface-3);overflow:hidden;direction:ltr}
.u-step .bar i{display:block;height:100%;border-radius:9px}
.u-step b{text-align:right;font-variant-numeric:tabular-nums}
.u-weeks{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:120px;padding:4px 18px 0;direction:ltr}
.u-weeks>div{display:flex;flex-direction:column-reverse;height:100%;gap:2px;cursor:default}
.u-weeks i{display:block;border-radius:4px 4px 2px 2px;min-height:0}
.u-wkl{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;padding:4px 18px 14px;direction:ltr;font-size:10.5px;color:var(--dim);text-align:center;white-space:nowrap}
.u-cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;align-items:start}

/* users list */
.u-list{overflow-x:auto}
.u-row{display:grid;grid-template-columns:minmax(150px,1fr) 118px 104px 58px 92px 88px 88px minmax(96px,.8fr);gap:10px;align-items:center;padding:7px 16px;border-top:1px solid var(--line);font-size:13px;min-width:900px}
.u-row.h{font-size:11.5px;color:var(--dim);font-weight:700;border-top:0}
.u-row.h [data-sort]{cursor:pointer;user-select:none}.u-row.h [data-sort]:hover{color:var(--ink)}
.u-row:not(.h){cursor:pointer;transition:background .12s}
.u-row:not(.h):hover{background:rgb(242 193 78 / .06)}
.u-row:not(.h):focus-visible{outline:2px solid rgb(242 193 78 / .6);outline-offset:-2px}
.u-row .n{text-align:right}
.u-row .nm{display:flex;gap:8px;align-items:center;min-width:0}
.u-row .nm div{min-width:0}.u-row .nm b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-row .nm small,.u-row small{display:block;color:var(--dim);font-size:11px}
.u-av{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgb(155 123 255 / .14);color:var(--violet);font-weight:800;font-size:12.5px;flex:none}
.u-flags{display:flex;gap:4px;flex-wrap:wrap}.u-flags .chip{font-size:10.5px;padding:0 7px}
@media (max-width:900px){.u-row{min-width:0;grid-template-columns:minmax(0,1fr) auto}.u-row>:not(:first-child):not(:nth-child(3)){display:none}}

/* user page */
.u-id{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;background:radial-gradient(120% 160% at 100% 0%,rgb(155 123 255 / .14),transparent 55%),var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);padding:16px 18px}
.u-id .big{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgb(155 123 255 / .16);color:var(--violet);font-weight:850;font-size:22px}
.u-id h1{font-size:24px;margin:0}
.u-facts{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--muted);margin-top:6px;align-items:center}
@media (max-width:640px){.u-id{grid-template-columns:minmax(0,1fr)}.u-id .big{display:none}}

/* tickets: list and conversation */
.u-inbox{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);min-height:460px}
.u-tl{border-inline-end:1px solid var(--line);display:grid;align-content:start}
.u-inbox[data-empty="1"]{grid-template-columns:minmax(0,1fr);min-height:0}.u-inbox[data-empty="1"] .u-conv{display:none}.u-inbox[data-empty="1"] .u-tl{border-inline-end:0}
.u-tl .it{border-bottom:0;border-top:1px solid var(--line)}
.u-tl .it:first-child{border-top:0}
.u-tl .it.on{background:rgb(242 193 78 / .07);box-shadow:inset -3px 0 0 var(--gold)}
.u-conv{display:grid;align-content:start;gap:12px;padding:14px 16px;min-width:0}
.u-who{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--muted)}
.u-who b{color:var(--ink)}
.u-fix{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid rgb(255 107 122 / .3);background:rgb(255 107 122 / .06);border-radius:12px;padding:10px 12px 10px 10px}
.u-fix .s{align-self:stretch;border-radius:3px;background:var(--bad)}
.u-fix.ok{border-color:rgb(61 214 140 / .35);background:rgb(61 214 140 / .06)}.u-fix.ok .s{background:var(--ok)}
.u-fix.warn{border-color:rgb(242 153 74 / .35);background:rgb(242 153 74 / .06)}.u-fix.warn .s{background:var(--warn)}
.u-fix b{font-size:13px}.u-fix p{font-size:12px;color:var(--muted);margin:2px 0 0}
.u-fix .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:760px){
  .u-inbox{grid-template-columns:minmax(0,1fr)}.u-tl{border-inline-end:0}
  .u-inbox[data-open="1"] .u-tl{display:none}.u-inbox:not([data-open="1"]) .u-conv{display:none}
  .u-cols{grid-template-columns:minmax(0,1fr)}
  .u-step{grid-template-columns:minmax(0,1fr) 80px}.u-step .bar{grid-column:1/-1;grid-row:2}
  .u-fix{grid-template-columns:4px minmax(0,1fr)}.u-fix .acts{grid-column:2;justify-content:flex-start}
}

/* the app's technical details under the first message wrap instead of running off a phone */
#s-inbox .techinfo{display:flex;flex-wrap:wrap;gap:6px}#s-inbox .techinfo .chip{white-space:normal;overflow-wrap:anywhere;max-width:100%}