/* ============================================================================
   Права доступу (дворівнева модель). Самодостатній файл: усі кольори мають
   фолбеки, тож блок коректний і без app.css. Токени — з дизайн-системи хаба.
   ========================================================================== */
#permRoot{
  --lv-none:#a89a8a; --lv-view:#3d6ea5; --lv-custom:var(--primary,#c2410c); --lv-full:#1f9d57;
}
[data-theme="dark"] #permRoot{
  --lv-none:#7d7061; --lv-view:#5b8fc9; --lv-full:#45b085;
}
.rc--neutral{--rc:#8a7d6d}.rc--primary{--rc:#c2410c}.rc--blue{--rc:#3d6ea5}
.rc--green{--rc:#1f9d57}.rc--warn{--rc:#b9791b}.rc--violet{--rc:#7c5cbf}.rc--teal{--rc:#0f8a8a}
[data-theme="dark"] .rc--neutral{--rc:#a89a87}[data-theme="dark"] .rc--primary{--rc:#e2622a}
[data-theme="dark"] .rc--blue{--rc:#5b8fc9}[data-theme="dark"] .rc--green{--rc:#45b085}
[data-theme="dark"] .rc--warn{--rc:#e0a92e}[data-theme="dark"] .rc--violet{--rc:#a186dd}
[data-theme="dark"] .rc--teal{--rc:#3fb5b5}

.container--wide{max-width:1560px}
/* [hidden] має перемагати display:flex/grid у класах нижче */
#permRoot [hidden],.pm-savebar[hidden],.pm-copy[hidden]{display:none!important}
.pm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pm-grow{flex:1}
.pm-hint{display:block;margin-top:8px}
.pm-headact{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── Вкладки ─────────────────────────────────────────────────────────────── */
.pm-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border,#e8dfd1);margin:6px 0 18px;
  overflow-x:auto;scrollbar-width:none}
.pm-tabs::-webkit-scrollbar{display:none}
.pm-tab{padding:9px 14px;font-size:.9rem;font-weight:600;color:var(--text-mut,#7c6d60);
  border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none}
.pm-tab:hover{color:var(--text,#2c2420)}
.pm-tab--on{color:var(--primary,#c2410c);border-bottom-color:var(--primary,#c2410c)}

.pm-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.pm-sel{max-width:240px}
.pm-tunetitle{font-size:1.06rem;font-weight:700}

/* ── Матриця ─────────────────────────────────────────────────────────────── */
.pm-wrap{background:var(--surface,#fffdf9);border:1px solid var(--border,#e8dfd1);
  border-radius:var(--radius,14px);box-shadow:var(--shadow,0 1px 2px rgba(80,55,30,.06));
  overflow:auto;max-height:calc(100vh - 300px)}
table.pm-mx,table.pm-cmp{border-collapse:separate;border-spacing:0;width:100%;font-size:.85rem}
.pm-mx th,.pm-mx td{padding:0;border-bottom:1px solid var(--divider,#efe7db)}
.pm-mx thead th{position:sticky;top:0;z-index:3;background:var(--surface,#fffdf9);
  border-bottom:1px solid var(--border,#e8dfd1);padding:9px 8px;font-size:.76rem;font-weight:700;
  vertical-align:bottom;text-align:center;min-width:96px}
.pm-mx thead th:first-child{left:0;z-index:5;text-align:left;min-width:300px;width:300px;
  box-shadow:1px 0 0 var(--border,#e8dfd1)}
.pm-mx tbody th{position:sticky;left:0;z-index:2;background:var(--surface,#fffdf9);text-align:left;
  padding:8px 12px;font-weight:500;box-shadow:1px 0 0 var(--divider,#efe7db)}
.pm-mx tbody tr:hover th,.pm-mx tbody tr:hover td{background:var(--primary-soft,rgba(194,65,12,.12))}
.pm-rolehead{display:flex;flex-direction:column;align-items:center;gap:3px}
.pm-rolehead b{font-weight:700;font-size:.76rem;line-height:1.2;max-width:100px}
.pm-av{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:700;
  font-size:.7rem;background:color-mix(in srgb,var(--rc,#8a7d6d) 16%,var(--surface,#fffdf9));color:var(--rc,#8a7d6d)}
.pm-ctr th{background:var(--surface-2,#f1e9dd)!important;font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-mut,#7c6d60);padding:7px 12px!important;
  position:static!important;box-shadow:none!important}
.pm-mod{display:flex;align-items:center;gap:9px}
.pm-ico{width:24px;height:24px;border-radius:7px;background:var(--surface-2,#f1e9dd);display:grid;
  place-items:center;font-size:.82rem;flex:0 0 auto}
.pm-mn b{display:block;font-weight:600;font-size:.86rem;line-height:1.3}
.pm-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.pm-cnt{font-size:.72rem;color:var(--text-mut,#7c6d60)}
/* Гейт має два підписи: повний і гліф для щільного режиму. */
.pm-gt__s{display:none}
.pm-mx td{text-align:center;padding:4px}

.pm-cell{width:100%;min-height:40px;border:1px solid transparent;border-radius:9px;background:none;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font:inherit;padding:3px 2px;transition:border-color .13s,background .13s}
.pm-cell:hover{border-color:var(--primary,#c2410c);background:var(--surface,#fffdf9)}
.pm-dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--lv);position:relative;overflow:hidden}
.pm-dot::after{content:"";position:absolute;inset:0;background:var(--lv);clip-path:inset(0 var(--fill) 0 0)}
.pm-lbl{font-size:.65rem;font-weight:700;color:var(--lv);letter-spacing:.01em}
.pm-cell--none{--lv:var(--lv-none);--fill:100%;opacity:.55}
.pm-cell--view{--lv:var(--lv-view);--fill:50%}
.pm-cell--custom{--lv:var(--lv-custom);--fill:50%}
.pm-cell--full{--lv:var(--lv-full);--fill:0%}
.pm-cell--dirty{box-shadow:0 0 0 2px var(--primary,#c2410c);background:var(--surface,#fffdf9)}
.pm-cell--sel{background:color-mix(in srgb,var(--primary,#c2410c) 16%,var(--surface,#fffdf9));
  border-color:var(--primary,#c2410c)}

.pm-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.76rem;color:var(--text-mut,#7c6d60);margin:10px 2px 0}
.pm-lv{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--lv)}
.pm-lv i{width:11px;height:11px;border-radius:50%;border:2px solid var(--lv);position:relative;
  overflow:hidden;flex:0 0 auto}
.pm-lv i::after{content:"";position:absolute;inset:0;background:var(--lv);clip-path:inset(0 var(--fill) 0 0)}
.pm-lv--none{--lv:var(--lv-none);--fill:100%;opacity:.7}
.pm-lv--view{--lv:var(--lv-view);--fill:50%}
.pm-lv--custom{--lv:var(--lv-custom);--fill:50%}
.pm-lv--full{--lv:var(--lv-full);--fill:0%}

/* Спливне меню рівня */
.pm-pop{position:absolute;z-index:1100;background:var(--surface,#fffdf9);
  border:1px solid var(--border,#e8dfd1);border-radius:var(--radius-sm,11px);
  box-shadow:var(--shadow-lg,0 14px 34px rgba(80,55,30,.16));padding:5px;min-width:230px}
.pm-pop__h{font-size:.72rem;color:var(--text-mut,#7c6d60);padding:4px 9px 6px;
  border-bottom:1px solid var(--divider,#efe7db);margin-bottom:4px}
.pm-pop__i{display:flex;align-items:flex-start;gap:9px;width:100%;padding:7px 9px;border:0;
  background:none;border-radius:8px;cursor:pointer;font:inherit;text-align:left}
.pm-pop__i:hover{background:var(--primary-soft,rgba(194,65,12,.12))}
.pm-pop__i--on{background:var(--surface-2,#f1e9dd)}
.pm-pop__i b{display:block;font-size:.84rem;font-weight:600}
.pm-pop__i span{display:block;font-size:.72rem;color:var(--text-mut,#7c6d60);line-height:1.35}
.pm-pop__d{width:14px;height:14px;border-radius:50%;border:2px solid var(--lv);margin-top:3px;
  flex:0 0 auto;position:relative;overflow:hidden}
.pm-pop__d::after{content:"";position:absolute;inset:0;background:var(--lv);clip-path:inset(0 var(--fill) 0 0)}

.pm-savebar{position:sticky;bottom:0;margin-top:12px;background:var(--surface,#fffdf9);
  border:1px solid var(--primary,#c2410c);border-radius:var(--radius,14px);
  box-shadow:var(--shadow-lg,0 14px 34px rgba(80,55,30,.16));padding:11px 16px;
  display:flex;align-items:center;gap:10px;z-index:20}

/* ── Тонке налаштування ──────────────────────────────────────────────────── */
.pm-tune{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:start}
@media(max-width:960px){.pm-tune{grid-template-columns:1fr}.pm-side{position:static!important}}
.pm-side{background:var(--surface,#fffdf9);border:1px solid var(--border,#e8dfd1);
  border-radius:var(--radius,14px);box-shadow:var(--shadow,0 1px 2px rgba(80,55,30,.06));
  padding:6px;position:sticky;top:104px}
.pm-side__r{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid transparent;
  border-radius:var(--radius-sm,11px);text-decoration:none;color:var(--text,#2c2420)}
.pm-side__r:hover{background:var(--primary-soft,rgba(194,65,12,.12))}
.pm-side__r--on{background:color-mix(in srgb,var(--rc,#8a7d6d) 12%,var(--surface,#fffdf9));
  border-color:color-mix(in srgb,var(--rc,#8a7d6d) 45%,var(--border,#e8dfd1))}
.pm-side__r b{flex:1;font-size:.85rem;font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pm-side__dot{width:9px;height:9px;border-radius:50%;background:var(--rc,#8a7d6d);flex:0 0 auto}

.pm-ctrh{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-mut,#7c6d60);margin:14px 2px 6px}
.pm-card{display:block;background:var(--surface,#fffdf9);border:1px solid var(--border,#e8dfd1);
  border-radius:var(--radius,14px);box-shadow:var(--shadow,0 1px 2px rgba(80,55,30,.06));
  overflow:hidden;margin-bottom:10px}
.pm-card--on{border-color:color-mix(in srgb,var(--primary,#c2410c) 40%,var(--border,#e8dfd1))}
.pm-card__h{display:flex;align-items:center;gap:11px;padding:11px 14px;flex-wrap:wrap}
.pm-card--on .pm-card__h{background:color-mix(in srgb,var(--primary,#c2410c) 5%,var(--surface,#fffdf9))}
.pm-card__t{flex:1;min-width:180px}
.pm-card__t b{display:block;font-size:.94rem;font-weight:600}
.pm-card__t span{font-size:.77rem;color:var(--text-mut,#7c6d60)}
.pm-card__b{border-top:1px solid var(--divider,#efe7db);padding:6px 8px 8px}
.pm-card__f{border-top:1px solid var(--divider,#efe7db);padding:9px 14px;display:flex;
  align-items:center;gap:10px;justify-content:flex-end;background:var(--surface-2,#f1e9dd)}

.pm-seg{display:flex;background:var(--surface-2,#f1e9dd);border-radius:10px;padding:2px;gap:1px;flex:0 0 auto}
.pm-seg button{border:0;background:none;font:inherit;font-size:.77rem;font-weight:600;
  color:var(--text-mut,#7c6d60);padding:5px 11px;border-radius:8px;cursor:pointer;white-space:nowrap}
.pm-seg button:hover{color:var(--text,#2c2420)}
.pm-seg button[aria-pressed="true"]{background:var(--surface,#fffdf9);color:var(--lvc);
  box-shadow:var(--shadow,0 1px 2px rgba(80,55,30,.06))}
.pm-seg button[data-lv="none"]{--lvc:var(--lv-none)}
.pm-seg button[data-lv="view"]{--lvc:var(--lv-view)}
.pm-seg button[data-lv="custom"]{--lvc:var(--lv-custom)}
.pm-seg button[data-lv="full"]{--lvc:var(--lv-full)}

.pm-note{background:var(--surface-2,#f1e9dd);border-radius:var(--radius-sm,11px);padding:8px 12px;
  font-size:.79rem;color:var(--text-mut,#7c6d60);margin:0 12px 8px;display:flex;gap:8px;align-items:flex-start}
.pm-fn{display:flex;align-items:flex-start;gap:10px;padding:7px 10px;border-radius:var(--radius-sm,11px)}
.pm-fn:hover{background:var(--surface-2,#f1e9dd)}
.pm-fn--locked{opacity:.45}
.pm-fn input{margin-top:3px;width:15px;height:15px;accent-color:var(--primary,#c2410c);
  cursor:pointer;flex:0 0 auto}
.pm-fn--locked input{cursor:default}
.pm-fn__t{flex:1;min-width:0}
.pm-fn__t b{font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pm-fn__t>span{display:block;font-size:.76rem;color:var(--text-mut,#7c6d60);line-height:1.35}
.pm-fn__t code{font-size:.7rem;color:var(--text-mut,#7c6d60);opacity:.8}
.pm-kind{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--surface-2,#f1e9dd);color:var(--text-mut,#7c6d60);border-radius:5px;padding:0 5px}
.pm-kind--view{background:color-mix(in srgb,var(--lv-view) 15%,transparent);color:var(--lv-view)}
.pm-danger{color:var(--danger,#b91c1c);font-size:.8rem}

/* ── Порівняння ──────────────────────────────────────────────────────────── */
.pm-cmp th,.pm-cmp td{padding:8px 12px;border-bottom:1px solid var(--divider,#efe7db);text-align:left}
.pm-cmp thead th{position:sticky;top:0;background:var(--surface,#fffdf9);font-size:.78rem;z-index:2;
  border-bottom:1px solid var(--border,#e8dfd1)}
.pm-cmp td+td,.pm-cmp th+th{text-align:center;width:190px}
.pm-cmp small{display:block;font-size:.7rem;color:var(--text-mut,#7c6d60)}
.pm-cmp tr.pm-diff{background:color-mix(in srgb,#f5a623 10%,transparent)}

/* ── Копіювання ролі ─────────────────────────────────────────────────────── */
.pm-copy{background:var(--surface,#fffdf9);border:1px solid var(--primary,#c2410c);
  border-radius:var(--radius,14px);box-shadow:0 0 0 3px var(--primary-soft,rgba(194,65,12,.12));
  padding:16px 18px;margin-top:16px}
.pm-copy__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
.pm-copy__foot{display:flex;gap:8px}

/* ── Модалка «очима ролі» ────────────────────────────────────────────────── */
.pm-modal{position:fixed;inset:0;z-index:1000;background:rgba(30,20,12,.42);display:grid;
  place-items:center;padding:20px}
.pm-modal__box{background:var(--surface,#fffdf9);border-radius:var(--radius,14px);
  box-shadow:var(--shadow-lg,0 14px 34px rgba(80,55,30,.16));width:min(620px,100%);
  max-height:86vh;display:flex;flex-direction:column}
.pm-modal__h{padding:15px 20px 12px;border-bottom:1px solid var(--border,#e8dfd1);
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pm-modal__h h3{margin:0;font-size:1.1rem}
.pm-modal__h p{margin:3px 0 0;font-size:.84rem;color:var(--text-mut,#7c6d60)}
.pm-modal__b{padding:14px 20px;overflow:auto}
.pm-modal__f{padding:12px 20px;border-top:1px solid var(--border,#e8dfd1);display:flex;
  justify-content:flex-end;background:var(--surface-2,#f1e9dd);
  border-radius:0 0 var(--radius,14px) var(--radius,14px)}
.pm-modal__x{background:none;border:0;color:var(--text-mut,#7c6d60);font-size:1.4rem;
  cursor:pointer;line-height:1;padding:0 4px}
.pm-modal__x:hover{color:var(--danger,#b91c1c)}
.pm-prev{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;
  background:var(--surface-2,#f1e9dd);font-size:.84rem;margin-bottom:5px}
.pm-prev b{flex:1}
.pm-prevctr{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-mut,#7c6d60);margin:12px 0 5px}
.pm-prevctr:first-child{margin-top:0}

.pm-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:1200;
  background:var(--text,#2c2420);color:var(--bg,#f6f2ec);padding:10px 18px;border-radius:999px;
  font-size:.86rem;font-weight:600;box-shadow:var(--shadow-lg,0 14px 34px rgba(80,55,30,.16))}

/* ════════════════════════════════════════════════════════════════════════════
   ЩІЛЬНИЙ РЕЖИМ (data-dens="1", типовий).
   Мета — більше рядків на екрані без втрати сенсу: жодна цифра й жоден
   перемикач не зникають, вони лише стають компактнішими. Просторий режим
   (data-dens="0") — це попередній вигляд, він лишається доступним кнопкою.
   ══════════════════════════════════════════════════════════════════════════ */
.pm-dens{--lvc:var(--primary,#c2410c)}
.pm-dens button{padding:4px 10px;font-size:.74rem}

[data-dens="1"] #permRoot{max-width:1780px}
[data-dens="1"] #permRoot .page-head__subtitle{font-size:.82rem;line-height:1.35;margin-top:3px}
[data-dens="1"] #permRoot .pm-tabs{margin:4px 0 10px}
[data-dens="1"] #permRoot .pm-tab{padding:7px 12px;font-size:.86rem}
[data-dens="1"] #permRoot .pm-toolbar{gap:8px;margin-bottom:8px}
[data-dens="1"] #permRoot .pm-wrap{max-height:calc(100vh - 236px)}

/* Шапка ролей: аватар менший, назва — у два вузькі рядки замість трьох */
[data-dens="1"] #permRoot .pm-mx thead th{padding:5px 4px;font-size:.7rem;min-width:78px}
[data-dens="1"] #permRoot .pm-mx thead th:first-child{min-width:250px;width:250px}
[data-dens="1"] #permRoot .pm-rolehead{gap:2px}
[data-dens="1"] #permRoot .pm-av{width:20px;height:20px;border-radius:6px;font-size:.62rem}
/* «взаєморозрахунків» довше за колонку — переносимо зі складом, а не наїжджаємо
   на сусідню роль (lang="uk" у layout, тож hyphens:auto працює коректно). */
[data-dens="1"] #permRoot .pm-rolehead b{font-size:.7rem;line-height:1.15;max-width:92px;
  overflow-wrap:break-word;hyphens:auto}

/* Смуга контуру */
[data-dens="1"] #permRoot .pm-ctr th{padding:3px 10px!important;font-size:.68rem}

/* Рядок модуля: назва + рядок «лічильник · код · гейт» */
[data-dens="1"] #permRoot .pm-mx tbody th{padding:3px 9px}
[data-dens="1"] #permRoot .pm-mod{gap:7px}
[data-dens="1"] #permRoot .pm-ico{width:19px;height:19px;border-radius:6px;font-size:.7rem}
[data-dens="1"] #permRoot .pm-mn b{font-size:.79rem;line-height:1.25}
/* Якщо поруч є перемикач гейта (суперадмін) — текстовий бейдж дублює його
   стан і лише переносить назву на другий рядок. Ховаємо саме в цьому випадку;
   там, де перемикача немає, бейдж лишається єдиним індикатором режиму.
   Браузер без :has() просто покаже бейдж — це поточна поведінка, не поломка. */
[data-dens="1"] #permRoot .pm-mn:has(.pm-gate) b .badge{display:none}
[data-dens="1"] #permRoot .pm-meta{gap:6px;margin-top:0}
[data-dens="1"] #permRoot .pm-cnt{font-size:.67rem}
[data-dens="1"] #permRoot .pm-gate{margin-top:0;padding:1px;gap:0}
[data-dens="1"] #permRoot .pm-gate button{padding:1px 6px;font-size:.72rem;line-height:1.35}
[data-dens="1"] #permRoot .pm-gt__l{display:none}
[data-dens="1"] #permRoot .pm-gt__s{display:inline}

/* Комірка: крапка й підпис в один рядок — головна економія висоти */
[data-dens="1"] #permRoot .pm-mx td{padding:2px}
[data-dens="1"] #permRoot .pm-cell{min-height:24px;flex-direction:row;gap:5px;padding:2px 4px;border-radius:7px}
[data-dens="1"] #permRoot .pm-dot{width:11px;height:11px}
[data-dens="1"] #permRoot .pm-lbl{font-size:.67rem}
[data-dens="1"] #permRoot .pm-legend{font-size:.72rem;gap:12px;margin-top:7px}

/* Тонке налаштування: функція займає один рядок замість трьох */
[data-dens="1"] #permRoot .pm-ctrh{margin:10px 2px 5px}
[data-dens="1"] #permRoot .pm-card{margin-bottom:7px}
[data-dens="1"] #permRoot .pm-card__h{padding:8px 12px;gap:9px}
[data-dens="1"] #permRoot .pm-card__t b{font-size:.88rem}
[data-dens="1"] #permRoot .pm-card__t span{font-size:.74rem}
[data-dens="1"] #permRoot .pm-card__b{padding:3px 6px 5px}
[data-dens="1"] #permRoot .pm-card__f{padding:6px 12px}
[data-dens="1"] #permRoot .pm-note{padding:6px 10px;font-size:.76rem;margin:0 10px 6px}
[data-dens="1"] #permRoot .pm-fn{padding:3px 8px;gap:8px}
[data-dens="1"] #permRoot .pm-fn input{margin-top:2px}
[data-dens="1"] #permRoot .pm-fn__t b{display:inline-flex;font-size:.82rem}
[data-dens="1"] #permRoot .pm-fn__t>span{display:inline;font-size:.75rem;margin-left:7px}
[data-dens="1"] #permRoot .pm-fn__t code{margin-left:7px}
[data-dens="1"] #permRoot .pm-side__r{padding:5px 9px;gap:8px}
[data-dens="1"] #permRoot .pm-side{top:96px}

/* Порівняння ролей */
[data-dens="1"] #permRoot .pm-cmp th,[data-dens="1"] #permRoot .pm-cmp td{padding:5px 11px}
[data-dens="1"] #permRoot .pm-cmp td+td,[data-dens="1"] #permRoot .pm-cmp th+th{width:170px}

@media (prefers-reduced-motion:reduce){.pm-cell,.pm-side__r{transition:none}}