/* МАЯК · экран «Доступы» — группы и гранты. Префиксы .access- / .acc- .
   Тема наследуется через CSS-переменные из tokens.css. */

.access-admin {
  grid-column: 1 / -1;        /* растянуть на всю область .main (grid 380px 1fr) */
  min-width: 0;
  background: var(--bg);
  overflow: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 24px;
  gap: 18px;
  overflow: auto;
}

/* ── шапка ── */
.access-header {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.access-title h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.access-title p { margin: 2px 0 0; font-size: 13px; }
.access-sections { margin-left: auto; }
.access-sections .seg-item { display: inline-flex; align-items: center; gap: 6px; height: 30px; }

.access-body { flex: 1; min-height: 0; overflow-y: auto; }

/* ── общие мелочи ── */
.acc-count {
  margin-left: 4px;
  font-size: 10.5px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bg-sub);
  color: var(--muted);
}
.seg-item.active .acc-count { background: var(--accent-bg); color: var(--accent); }

.acc-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted-2);
  font-size: 13px;
}
.acc-empty.sm { padding: 16px; font-size: 12.5px; }

/* ─────────────────────────────────────────────────────────────
   Раздел «Группы»
   ───────────────────────────────────────────────────────────── */
.acc-groups { display: flex; flex-direction: column; gap: 14px; }
.acc-groups-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.acc-groups-bar .seg-item { display: inline-flex; align-items: center; gap: 6px; }
.acc-typetag {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: var(--bg-sub); border: 1px solid var(--line); border-radius: var(--r-2);
  font-size: 13px; font-weight: 600; color: var(--fg);
}


/* список групп */
.acc-group-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-2);
  background: var(--bg-sub); color: var(--accent);
}
.acc-group-ic.lg { width: 40px; height: 40px; }
.acc-group-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.acc-group-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-group-id { font-size: 10.5px; }
/* Описание под названием группы: одна строка, длинное — с многоточием. */
.acc-group-desc {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acc-group-desc.empty { color: var(--muted-2); font-style: italic; }

/* поиск групп над сеткой */
.acc-group-search {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; max-width: 420px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-2); color: var(--muted);
}
.acc-group-search svg { flex: none; }
.acc-group-search input {
  border: none; background: transparent; outline: none;
  font: inherit; color: var(--fg); width: 100%;
}

/* сетка групп: до 4 в ряд, прокрутка вниз */
.acc-group-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
}
@media (max-width: 1240px) { .acc-group-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .acc-group-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .acc-group-grid { grid-template-columns: 1fr; } }

.acc-group-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; text-align: left;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-2); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.acc-group-card:hover { background: var(--bg-sub); }
.acc-group-card.active { background: var(--accent-bg); border-color: var(--accent-line); }
.acc-group-card.active .acc-group-ic { background: var(--paper); }

/* прокрутка таблицы грантов и списка участников */
.acc-table-wrap.scroll { max-height: 340px; overflow-y: auto; }
.acc-member-list { max-height: 320px; overflow-y: auto; }

/* детали группы */
.acc-group-detail {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 18px;
  min-height: 220px;
}

.acc-detail-head { display: flex; align-items: flex-start; gap: 12px; }
.acc-detail-title { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.acc-detail-title h3 { margin: 0; font-size: 17px; font-weight: 600; }
.acc-detail-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 2px; }
.acc-detail-desc { margin: 12px 0 0; font-size: 12.5px; }

.acc-member-toolbar { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; }

.acc-member-list { display: flex; flex-direction: column; gap: 4px; }
.acc-member {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--paper-2);
}
.acc-member-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  border-radius: var(--r-1);
  background: var(--bg-sub); color: var(--muted);
}
.acc-member-text { flex: 1; min-width: 0; }
.acc-member-name { font-size: 13px; font-weight: 500; }
.acc-member-id { font-size: 10.5px; }

/* ─────────────────────────────────────────────────────────────
   Раздел «Права доступа»
   ───────────────────────────────────────────────────────────── */
.acc-grants { display: flex; flex-direction: column; gap: 18px; }

.acc-grant-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 16px 18px;
}
.acc-grant-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.acc-grant-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.acc-grant-sub { margin: 2px 0 0; font-size: 12px; }
.acc-grant-head .btn { margin-left: auto; flex: none; }

.acc-table-wrap { overflow-x: auto; }
.acc-table { width: 100%; border-collapse: collapse; }
.acc-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.acc-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.acc-table tbody tr:last-child td { border-bottom: 0; }
.acc-table tbody tr:hover td { background: var(--bg-sub); }
.acc-arrow-col { width: 28px; color: var(--muted-2); text-align: center; }

.acc-target { display: flex; align-items: center; gap: 10px; min-width: 0; }
.acc-target-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border-radius: var(--r-2);
  background: var(--bg-sub); color: var(--muted);
}
.acc-target-icon.group { background: var(--accent-bg); color: var(--accent); }
.acc-target-text { min-width: 0; }
.acc-target-name { font-size: 13px; font-weight: 500; }
.acc-target-sub { font-size: 10px; }


/* ── модалка добавления участника (живой поиск) ── */
.mk-modal.acc-picker { width: min(460px, 94vw); }
.acc-picker-search { flex: 1 1 auto; margin-bottom: 10px; }
.acc-picklist {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--border, #2a3350); border-radius: 10px; padding: 4px;
}
.acc-pick {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: inherit; cursor: pointer; text-align: left;
}
.acc-pick:hover { background: var(--hover, rgba(120,140,190,0.12)); }
.acc-pick .acc-member-text { flex: 1 1 auto; min-width: 0; }
.acc-pick .acc-member-name { font-size: 13px; font-weight: 500; }
.acc-pick .acc-member-id { font-size: 10.5px; }
.acc-pick-empty { padding: 14px 10px; font-size: 12.5px; text-align: center; }

/* выбранная (состоит в группе) строка — явная подсветка + галочка */
.acc-pick.on { background: var(--accent-soft, rgba(74,140,255,0.14)); }
.acc-pick.on:hover { background: var(--accent-soft, rgba(74,140,255,0.20)); }
.acc-pick.on .acc-member-name { color: var(--accent, #4f8cff); }
.acc-pick-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px; flex: 0 0 auto;
  color: var(--muted, #8792ad); border: 1px solid var(--border, #2a3350);
}
.acc-pick-check.on {
  color: #fff; background: var(--accent, #4f8cff); border-color: var(--accent, #4f8cff);
}

/* ── адаптив ── */
@media (max-width: 900px) {
  .access-sections { margin-left: 0; }
}
@media (max-width: 560px) {
  .access-admin { padding: 16px; }
  .acc-grant-head { flex-wrap: wrap; }
  .acc-grant-head .btn { margin-left: 0; }
}