/* ДНЖ · днж-практики.рф · access.css
   Админка → «Доступы» (28.09.2026): форма «Новый доступ», дерево прав, список «профиль → доступы». */

.acs-new{padding:16px 18px}
.acs-head h3,.acs-listhead h3,.acs-donehead h3{color:var(--violet); margin:0 0 4px; font-size:16px}
.acs-head p{font-size:13px; color:var(--mut); margin:0 0 6px; max-width:900px; line-height:1.5}
.acs-hint{font-size:12px; color:var(--mut); line-height:1.45}
.acs-opt{font-weight:400; color:var(--mut); text-transform:none; letter-spacing:0}
.acs-meta{font-size:12.5px; color:var(--mut); font-weight:400}

.acs-grid{display:grid; grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr); gap:10px 22px; align-items:start}
.acs-col{min-width:0}
.acs-col textarea{min-height:88px; resize:vertical; font-family:inherit}
.acs-col-tree{background:var(--violet-l2); border:1px solid var(--line-2); border-radius:12px; padding:10px 14px 12px; margin-top:8px}
.acs-treehead{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; font-size:13px; color:var(--violet)}
.acs-link{border:0; background:none; padding:0; color:var(--violet); font-size:12.5px; text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.acs-link:hover{color:var(--orange-d)}

/* дерево прав: ветка — название слева, листья-галочки справа */
.acs-tree{display:grid; gap:2px}
.acs-branch{display:grid; grid-template-columns:128px minmax(0,1fr); gap:10px; padding:8px 0; border-top:1px solid var(--line-2)}
.acs-branch:first-child{border-top:0}
.acs-bname{font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--violet); padding-top:7px}
.acs-leaves{display:flex; flex-wrap:wrap; gap:6px 6px; align-items:center}
.acs-leaf{display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--line); border-radius:999px; padding:5px 12px 5px 9px;
  background:#fff; cursor:pointer; font-size:13px; color:var(--ink-2); user-select:none; transition:border-color .15s, background .15s}
.acs-leaf input{margin:0; accent-color:var(--violet); width:15px; height:15px}
.acs-leaf:hover{border-color:var(--violet)}
.acs-leaf:has(input:checked){border-color:var(--violet); background:var(--violet-l); color:var(--violet); font-weight:600}
.acs-choice{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; width:100%; margin-top:2px}
.acs-clabel{font-size:13px; color:var(--ink-2)}
.acs-choice .acs-seg{flex-wrap:nowrap; white-space:nowrap}
.acs-choice .acs-seg label{padding:5px 10px}

/* переключатель из нескольких вариантов */
.acs-seg{display:inline-flex; flex-wrap:wrap; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; background:#fff}
.acs-seg label{position:relative; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; font-size:12.5px; cursor:pointer; color:var(--ink-2); border-left:1px solid var(--line-2)}
.acs-seg label:first-child{border-left:0}
.acs-seg input[type=radio]{position:absolute; opacity:0; pointer-events:none}
.acs-seg label:has(input[type=radio]:checked){background:var(--violet); color:#fff; font-weight:600}
.acs-seg-wide{display:flex; width:100%}
.acs-seg-wide label{flex:1; justify-content:center; text-align:center; padding:7px 12px; font-size:13px}
.acs-seg input[type=number]{width:52px; border:1px solid var(--line); border-radius:6px; padding:2px 4px; font-size:13px; text-align:center; color:var(--ink)}

.acs-foot{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px}
.acs-foot>.btn{padding:9px 20px; font-size:14px}

/* результат создания */
.acs-done{border:1.5px solid var(--ok-b); background:linear-gradient(180deg,var(--ok-bg),#fff 60px)}
.acs-donehead{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.acs-donerow{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--line-2)}
.acs-donerow b{font-size:14.5px}
.acs-donerow .acs-meta{flex:1; min-width:160px}
.acs-donerow .btn{padding:5px 11px; font-size:12.5px}
.acs-danger{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.acs-foot .acs-danger .btn{padding:5px 11px; font-size:12.5px}

.acs-pwd{display:inline-flex; align-items:baseline; gap:8px; border:1px dashed var(--line); background:var(--bg); border-radius:8px; padding:5px 10px;
  font:600 12.5px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--ink); cursor:pointer; white-space:nowrap}
.acs-pwd i{font:italic 400 11px/1 var(--font,inherit); color:var(--mut)}
.acs-pwd:hover{border-color:var(--violet)}

.acs-acts,.acs-racts{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.acs-acts .btn,.acs-racts .btn{padding:5px 11px; font-size:12.5px}
.acs-del{color:var(--err)!important}

/* список: профиль → доступы */
.acs-listhead{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:18px 0 8px}
.acs-listhead h3{margin:0}
.acs-listhead input{border:1.5px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13.5px; min-width:300px; background:#fff}
.acs-group{background:#fff; border-radius:12px; box-shadow:var(--shadow); margin-bottom:8px; overflow:hidden}
.acs-group>summary{list-style:none; display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; padding:11px 16px; cursor:pointer}
.acs-group>summary::-webkit-details-marker{display:none}
.acs-caret{width:8px; height:8px; border-right:2px solid var(--violet); border-bottom:2px solid var(--violet); transform:rotate(-45deg); transition:transform .15s; margin-right:2px; flex:none}
.acs-group[open]>summary .acs-caret{transform:rotate(45deg)}
.acs-gname{font-weight:700; font-size:14.5px; color:var(--ink)}
.acs-gcount{font-size:12.5px; color:var(--mut)}
.acs-gchips{display:flex; flex-wrap:wrap; gap:4px; margin-left:auto; justify-content:flex-end}
.acs-gbody{border-top:1px solid var(--line-2); padding:2px 16px 8px}
.acs-chip{font-size:11.5px; background:var(--violet-l2); border:1px solid var(--line-2); color:var(--ink-2); border-radius:999px; padding:2px 8px; white-space:nowrap}
.acs-chip.off{color:var(--mut); font-style:italic}
.acs-chip.neg{color:var(--mut); text-decoration:line-through}
.acs-fixedleaf{cursor:default; background:var(--bg); color:var(--mut)!important; border-style:dashed!important; font-weight:400!important}
.acs-fixedleaf input{accent-color:var(--mut)}
.acs-own{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-d); white-space:nowrap}

.acs-row,.acs-prow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; align-items:center; padding:10px 0; border-top:1px solid var(--line-2)}
.acs-gbody>.acs-prow:first-child{border-top:0}
.acs-prow{background:linear-gradient(90deg,var(--violet-l2),transparent 70%); margin:0 -16px; padding:10px 16px}
.acs-rmain{display:flex; align-items:baseline; gap:6px 10px; flex-wrap:wrap; min-width:0}
.acs-rmain .st{font-size:10.5px; font-weight:700; border-radius:999px; padding:2px 9px; text-transform:uppercase; letter-spacing:.05em; border:1px solid transparent; align-self:center}
.acs-name{font-size:14.5px}
.acs-rchips{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px; align-items:center}
.acs-racts{grid-column:2; grid-row:1; justify-content:flex-end}
.acs-row.off .acs-name,.acs-row.off .acs-rchips{opacity:.55}
.acs-edit{grid-column:1 / -1; background:var(--bg); border-radius:10px; padding:10px 14px; margin-top:4px}
.acs-edit .acs-col-tree{background:#fff; margin-top:8px}
.acs-inline{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.acs-inline .mini-fld{min-width:260px; margin:0}
.acs-chk{margin-top:10px!important; font-size:13px!important}
.acs-fixed{font-size:12.5px; color:var(--mut); padding:6px 4px 0}
.acs-fixed b{color:var(--ink-2)}

@media (max-width:980px){
  .acs-grid{grid-template-columns:1fr}
  .acs-row,.acs-prow{grid-template-columns:1fr}
  .acs-racts{grid-column:1; grid-row:auto; justify-content:flex-start}
  .acs-gchips{margin-left:0; justify-content:flex-start}
}
@media (max-width:560px){
  .acs-branch{grid-template-columns:1fr; gap:4px}
  .acs-bname{padding-top:0}
  .acs-listhead input{min-width:0; width:100%}
  .acs-choice .acs-seg{flex-wrap:wrap; white-space:normal}
  .acs-seg-wide{flex-direction:column; border-radius:12px}
  .acs-seg-wide label{border-left:0; border-top:1px solid var(--line-2)}
  .acs-seg-wide label:first-child{border-top:0}
}