/* users.css — kullanıcı yönetimi ekranı. reports.css'in ÜSTÜNE biner: token'lar,
   topbar, .tablecard ve tablo oradan gelir; burada yalnız form, modal ve izin
   kutucukları var.

   Kutucuk listesi bilerek YOĞUN: 20+ izin var ve yetki verirken kullanıcının
   tamamını tek bakışta görmesi gerekir. Gruplar arası ayrım renkle değil
   başlık + çizgiyle yapılır (renk, "tehlikeli izin" işareti için saklandı). */

/* --- tablo satırı --- */
.rolepill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11.5px; font-weight:600;
            background:var(--accent-weak); color:var(--accent-ink); border:1px solid transparent; }
.ovpill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11.5px; font-weight:600;
          background:var(--amber-bg); color:var(--amber); border:1px solid var(--line); }
.okpill { color:var(--green); font-weight:600; font-size:12.5px; }
.offpill { color:var(--ink-3); font-weight:600; font-size:12.5px; }
.rowbtn { font:inherit; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:8px;
          border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); cursor:pointer; }
.rowbtn:hover { border-color:var(--accent); color:var(--accent); }

/* --- modal --- */
.modal { position:fixed; inset:0; background:rgba(8,11,17,.55); display:flex; align-items:flex-start;
         justify-content:center; padding:24px 16px; overflow-y:auto; z-index:50; }
.modal__card { background:var(--surface); border:1px solid var(--line); border-radius:16px;
               box-shadow:var(--shadow); width:100%; max-width:720px; }
.modal__head { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); }
.modal__head h3 { margin:0; font-size:15px; font-weight:700; flex:1; }
.modal__card form { padding:18px; display:flex; flex-direction:column; gap:14px; }
.modal__foot { display:flex; align-items:center; gap:10px; padding-top:6px; border-top:1px solid var(--line); }

/* --- form alanları --- */
.fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field > span { font-size:11.5px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.03em; }
.field input, .field select {
  font:inherit; padding:8px 10px; border-radius:9px; border:1px solid var(--line-2);
  background:var(--surface-3); color:var(--ink); min-width:0;
}
.field input:focus, .field select:focus { outline:2px solid var(--accent-weak); border-color:var(--accent); }
.field input[disabled], .field select[disabled] { opacity:.55; cursor:not-allowed; }
.rolehint { margin:-6px 0 0; font-size:12.5px; }

/* --- izin kutucukları --- */
.permhead { display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); padding-top:14px; }
.permhead h4 { margin:0; font-size:14px; font-weight:700; }
.permlead { margin:-6px 0 0; font-size:12.5px; }
.linkbtn { background:none; border:none; padding:0; font:inherit; font-size:12.5px; font-weight:600;
           color:var(--accent); cursor:pointer; }
.ghostbtn { font:inherit; font-weight:600; padding:7px 14px; border-radius:9px; border:1px solid var(--line-2);
            background:var(--surface); color:var(--ink-2); cursor:pointer; }

.permgroups { display:flex; flex-direction:column; gap:14px; }
.permgroup__t { font-size:11.5px; font-weight:700; color:var(--ink-3); text-transform:uppercase;
                letter-spacing:.04em; margin:0 0 6px; }
.permlist { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.perm { display:flex; gap:9px; align-items:flex-start; padding:8px 10px; border-radius:10px;
        border:1px solid var(--line); background:var(--surface-3); cursor:pointer; }
.perm:hover { border-color:var(--line-2); }
.perm input { margin:2px 0 0; accent-color:var(--accent); }
.perm > span { min-width:0; } /* uzun açıklama kutuyu taşırmasın */
.perm__t { display:block; font-size:13px; font-weight:600; line-height:1.3; }
.perm__h { display:block; font-size:11.5px; color:var(--ink-3); line-height:1.35; margin-top:2px; }
/* Etkisi geniş / geri dönüşü zor izinler: kırmızı kenar. Renk TEK BİR anlam
   taşısın diye başka hiçbir yerde kullanılmıyor. */
.perm.is-danger { border-color:var(--red); background:var(--red-bg); }
/* Çağıranın dağıtamayacağı izin: gizlenmez, kilitlenir — yetkinin nerede
   bittiği görünmeli. */
.perm.is-locked { opacity:.5; cursor:not-allowed; }
.perm.is-locked input { cursor:not-allowed; }
.perm__lock { font-size:11px; color:var(--ink-3); }

.msg { margin:0; font-size:12.5px; color:var(--ink-3); }
.msg.err { color:var(--red); font-weight:600; }
.msg.ok { color:var(--green); font-weight:600; }

@media (max-width:640px) {
  .fields, .permlist { grid-template-columns:1fr; }
}