/* =====================================================
 * Admin pages — shared styles
 * ===================================================== */

.admin-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-10);
    color: var(--color-text-muted);
    font-size: var(--fs-13);
}

/* ----- User name / avatar ----- */
.user-name {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.user-name__avatar {
    width: 28px;
    height: 28px;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--color-grad-from), var(--color-grad-to));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-email {
    background: transparent;
    color: var(--color-text-muted);
    font-size: 12px;
    font-family: var(--font-mono);
    padding: 0;
}

.user-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ----- Role picker (modal) ----- */
.role-picker {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.role-picker__row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .12s;
}

.role-picker__row:hover {
    background: var(--color-bg);
}

.role-picker__row--selected {
    background: var(--color-brand-soft);
}

.role-picker__row input[type="checkbox"] {
    margin-top: 4px;
}

.role-picker__title {
    font-weight: 600;
    font-size: var(--fs-13);
    color: var(--color-text);
}

.role-picker__desc {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ----- Permission chip row (shared across admin pages) ----- */
.perm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.perm-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--color-text-muted);
}

.perm-chip--read { background: var(--color-bg); color: var(--color-text-muted); }
.perm-chip--write { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
.perm-chip--destructive { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }

/* ----- Filter bar (audit / logs) ----- */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.filter-grid label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    display: block;
}

.filter-grid input,
.filter-grid select {
    width: 100%;
    height: 32px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--fs-13);
}

.filter-grid input:focus,
.filter-grid select:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(91, 91, 230, 0.15);
}

/* ----- Stat row (Cache / Audit summary) ----- */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-5);
    margin-bottom: var(--sp-7);
}

/* ----- Log stream ----- */
.log-stream {
    background: #0F1115;
    color: #E8EBF1;
    font-family: var(--font-mono);
    font-size: 12px;
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid #1F232B;
}

.log-row {
    display: grid;
    grid-template-columns: auto 60px 1fr;
    gap: var(--sp-3);
    padding: 2px 0;
    line-height: 1.5;
}

.log-row__time {
    color: #8A92A3;
    white-space: nowrap;
}

.log-row__level {
    font-weight: 600;
    text-align: center;
}

.log-row__level--info { color: #60A5FA; }
.log-row__level--warn { color: #F59E0B; }
.log-row__level--error { color: #F87171; }
.log-row__level--debug { color: #8A92A3; }

.log-row__msg { color: #E8EBF1; word-break: break-word; }

/* ----- Role cards (RoleManagement) ----- */










/* ----- Permission picker (RoleManagement modal) ----- */




/* ----- User name sub (email under name) ----- */
.user-name__sub {
    font-size: 11px;
    color: var(--color-text-soft);
    font-family: var(--font-mono);
    margin-top: 2px;
}

/* ----- TenantAccess list ----- */
.tenant-access-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: 12px;
    color: var(--color-text-muted);
    max-width: 420px;
}

.tenant-access-list__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-soft);
    margin-right: var(--sp-2);
}

.tenant-access-list code {
    background: var(--color-bg);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    font-size: 11px;
}

/* ----- Audit / Logs shared ----- */
.audit-summary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) 0;
    font-size: var(--fs-13);
}

.audit-summary > div {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.audit-timestamp {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-muted);
}

.audit-desc {
    font-size: var(--fs-13);
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-row--failed td {
    background: var(--color-danger-bg);
}

.audit-duration {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-muted);
}

.audit-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-5) 0;
    font-size: var(--fs-13);
}

.audit-pagination__controls {
    display: flex;
    gap: var(--sp-1);
}

.audit-details {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--sp-3) var(--sp-5);
    font-size: var(--fs-13);
}

.audit-details dt {
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    padding-top: 2px;
}

.audit-details dd {
    margin: 0;
    color: var(--color-text);
}

.audit-metadata {
    background: var(--color-bg);
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    max-height: 280px;
    overflow: auto;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ----- Log table ----- */
.log-table-wrap {
    max-height: 65vh;
    overflow-y: auto;
}

.log-table {
    font-family: var(--font-mono);
    font-size: 12px;
    /* Fixed layout honors <th> widths and keeps the message column flex. Without
       this, auto-layout shrinks the message column to its minimum intrinsic
       width (near 0 because word-break:break-word lets any char be a break),
       producing the 2-char-per-line ladder we saw in the screenshot. */
    table-layout: fixed;
    width: 100%;
}

.log-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.log-msg {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}

.log-row--err td,
.log-row--ftl td {
    background: var(--color-danger-bg);
}

.log-row--wrn td {
    background: var(--color-warning-bg);
}

.log-exc {
    color: var(--color-danger);
    font-size: 11px;
    margin-top: var(--sp-1);
}

.log-exc pre {
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* ----- Cache ----- */
.cache-filter {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
}

.cache-filter__select {
    height: 32px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--fs-13);
    min-width: 180px;
}

.cache-filter__select:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(91, 91, 230, 0.15);
}

.cache-key {
    background: transparent;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text);
    padding: 0;
    word-break: break-all;
}

/* ----- API keys ----- */
.apikey-row--revoked td {
    opacity: 0.55;
}

.apikey-perms {
    max-width: 320px;
}

.apikey-reveal {
    display: flex;
    gap: var(--sp-2);
    align-items: stretch;
}

.apikey-reveal input {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 12px;
}

/* ── Rol yönetimi: izin × rol matrisi ─────────────────────────────────────────
   Tasarım kararları:
   - Kolon (rol) başlığı ve ilk kolon (izin) YAPIŞIK: 45 izin × N rolde kaydırırken
     "hangi hücre neydi" kaybolmasın.
   - Kaydedilmemiş hücreler renkli: yeşil = eklenecek, kırmızı = kaldırılacak. Kaydete
     basana kadar hiçbir şey canlıya gitmez, o yüzden "ne değişti" görünür olmalı.
   - Risk noktası izin adının solunda; renk katalogdan gelir (tahmin değil).
   ────────────────────────────────────────────────────────────────────────── */

.rm-toolbar {
    display: flex; align-items: center; gap: var(--space-3);
    flex-wrap: wrap; margin-bottom: var(--space-3);
}

.rm-search { position: relative; flex: 1 1 320px; max-width: 460px; }
.rm-search > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: var(--fs-12); }
.rm-search .form-control { padding-left: 30px; padding-right: 30px; }
.rm-search__clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--color-text-muted); cursor: pointer; padding: 4px;
}

.rm-toggle {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: var(--fs-12); color: var(--color-text); user-select: none;
    padding: 5px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface);
}
.rm-toggle input { margin: 0; }

.rm-legend { display: flex; gap: var(--space-3); margin-left: auto; flex-wrap: wrap; }
.rm-legend__item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-11); color: var(--color-text-muted); }

.rm-risk { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 8px; }
.rm-risk--read { background: var(--color-text-muted); }
.rm-risk--write { background: var(--color-warning); }
.rm-risk--sensitive { background: var(--color-brand); }
.rm-risk--destructive { background: var(--color-danger); }

/* Bekleyen değişiklik çubuğu — kaydetmeden önce ne olacağını yazar. */
.rm-diffbar {
    display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-3); margin-bottom: var(--space-3);
    border: 1px solid var(--color-warning-border); background: var(--color-warning-bg);
    border-radius: var(--radius-lg);
    position: sticky; top: 0; z-index: 6;
}
.rm-diffbar__summary { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 420px; flex-wrap: wrap; }
.rm-diffbar__items { display: flex; gap: 6px; flex-wrap: wrap; }
.rm-diffbar__item {
    font-family: var(--font-mono); font-size: var(--fs-11);
    padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.rm-diffbar__item em { font-style: normal; opacity: .7; margin-left: 4px; }
.rm-diffbar__item--add { border-color: var(--color-success-border); color: var(--color-success); }
.rm-diffbar__item--remove { border-color: var(--color-danger-border); color: var(--color-danger); }
.rm-diffbar__more { font-size: var(--fs-11); color: var(--color-text-muted); align-self: center; }
.rm-diffbar__actions { display: flex; gap: var(--space-2); margin-left: auto; }

.rm-matrix-wrap {
    overflow: auto; max-height: calc(100vh - 260px);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.rm-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-12); }

.rm-matrix__corner,
.rm-matrix__perm,
.rm-matrix__group {
    position: sticky; left: 0; z-index: 3;
    background: var(--color-surface); text-align: left;
    border-right: 1px solid var(--color-border);
}
.rm-matrix__corner {
    top: 0; z-index: 5; padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    display: table-cell; min-width: 300px;
}
.rm-matrix__corner span { display: block; font-weight: 600; }
.rm-matrix__corner small { color: var(--color-text-muted); font-size: var(--fs-11); }

.rm-matrix__rolehead {
    position: sticky; top: 0; z-index: 4;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    padding: var(--space-2); vertical-align: top;
    /* Sabit genişlik + sarma: "Deployment Administrator" gibi uzun adlar kolonu
       şişirip komşu kolonun üstüne taşmasın (ölçüldü: max-width bir <th>'de yeterli değil). */
    width: 165px; min-width: 140px;
}
.rm-rolehead { display: flex; flex-direction: column; gap: 4px; }
.rm-rolehead__top { display: flex; align-items: center; gap: 4px; justify-content: space-between; }
.rm-rolehead__name { font-weight: 600; font-size: var(--fs-12); line-height: 1.2; overflow-wrap: anywhere; }
.rm-rolehead__key { font-size: var(--fs-10); color: var(--color-text-muted); background: none; padding: 0; overflow-wrap: anywhere; }
.rm-rolehead__badges { display: flex; gap: 4px; flex-wrap: wrap; }

.rm-chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: var(--fs-10); padding: 1px 5px; border-radius: var(--radius-sm);
    border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text-muted);
}
.rm-chip--muted { opacity: .55; }
.rm-chip--seed { border-color: var(--color-success-border); color: var(--color-success); background: var(--color-success-bg); }
.rm-chip--custom { border-color: var(--color-warning-border); color: var(--color-warning); background: var(--color-warning-bg); }

.rm-matrix__grouprow > * { background: var(--color-bg); }
.rm-matrix__group {
    padding: 6px var(--space-3); font-size: var(--fs-11); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted);
    border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.rm-matrix__groupcount { margin-left: 6px; opacity: .6; font-weight: 500; }
.rm-matrix__groupcell {
    text-align: center; border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
    background: var(--color-bg);
}
/* Kategori hücresi: üç durumlu kutu + sayaç.
   Gerçek checkbox yerine buton, çünkü "indeterminate" HTML attribute'u yok (yalnız JS
   property'si) — her hücre için interop yapmadan aynı görünümü ve aria semantiğini veriyoruz. */
.rm-matrix__groupcell { white-space: nowrap; }

.rm-tri {
    width: 14px; height: 14px; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle;
    background: var(--color-surface); border: 1px solid var(--color-border-strong, var(--color-border));
    border-radius: 3px; color: transparent; font-size: 9px; line-height: 1;
}
.rm-tri:hover { border-color: var(--color-brand); }
.rm-tri--all { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.rm-tri--some { background: var(--color-surface); border-color: var(--color-brand); color: var(--color-brand); }

.rm-groupcount {
    font-size: var(--fs-10); font-family: var(--font-mono);
    color: var(--color-text-muted); margin-left: 5px; vertical-align: middle;
}
.rm-groupcount--all { color: var(--color-success); }
.rm-groupcount--some { color: var(--color-warning); }

.rm-matrix__perm {
    padding: 4px var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
    font-weight: 400; display: flex; align-items: center; gap: 7px;
}
.rm-matrix__permkey { font-family: var(--font-mono); font-size: var(--fs-11); }
.rm-matrix__permhelp {
    background: none; border: 0; padding: 0 2px; line-height: 1;
    color: var(--color-text-muted); font-size: var(--fs-11); cursor: pointer;
}
.rm-matrix__permhelp:hover { color: var(--color-brand); }

/* Satır takibi: 44 satır × N kolonda gözün kaymaması için satırın TAMAMI vurgulanır
   (yapışık ilk kolon dahil) ve sol kenarda bir işaret çizgisi çıkar. Eski hali yalnız
   surface-alt idi ve koyu temada neredeyse görünmüyordu. */
.rm-matrix__row:hover .rm-matrix__perm,
.rm-matrix__row:hover .rm-cell {
    /* --color-brand-soft: temaya göre tanımlı gerçek token (koyu #22223E, açık #EEEEFB).
       İlk denemede var olmayan bir --color-brand-bg kullanmıştım; %10 alfa yedeğine düşüyor
       ve koyu temada gözle görünmüyordu — tarayıcıda hover ederek fark edildi. */
    background: var(--color-brand-soft);
}
.rm-matrix__row:hover .rm-matrix__perm {
    box-shadow: inset 3px 0 0 var(--color-brand);
}
.rm-matrix__row:hover .rm-matrix__permkey { color: var(--color-text); font-weight: 600; }
/* Kaydedilmemiş hücrenin kendi rengi satır vurgusuna yenilmesin. */
.rm-matrix__row:hover .rm-cell--added { background: var(--color-success-bg); }
.rm-matrix__row:hover .rm-cell--removed { background: var(--color-danger-bg); }

.rm-cell {
    text-align: center; padding: 0;
    border-left: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
}
.rm-cell__label { display: flex; align-items: center; justify-content: center; height: 28px; margin: 0; cursor: pointer; }
.rm-cell__label input { margin: 0; cursor: pointer; }
.rm-cell--added { background: var(--color-success-bg); box-shadow: inset 2px 0 0 var(--color-success); }
.rm-cell--removed { background: var(--color-danger-bg); box-shadow: inset 2px 0 0 var(--color-danger); }

.rm-matrix__empty { text-align: center; padding: var(--space-6); color: var(--color-text-muted); }

/* Silinmiş yerleşik rolleri geri yükleme paneli */
.rm-restore {
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface); padding: var(--space-3); margin-bottom: var(--space-3);
}
.rm-restore__title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.rm-restore__hint { color: var(--color-text-muted); font-size: var(--fs-12); margin: 6px 0 var(--space-2); }
.rm-restore__list { display: flex; flex-direction: column; gap: 6px; }
.rm-restore__row { display: flex; align-items: center; gap: var(--space-3); }
.rm-restore__name { font-family: var(--font-mono); font-size: var(--fs-12); min-width: 140px; }
.rm-restore__meta { color: var(--color-text-muted); font-size: var(--fs-12); flex: 1; }

@media (max-width: 900px) {
    .rm-matrix__corner { min-width: 200px; }
    .rm-legend { display: none; }
}

/* ── İzin bilgi dialogu ─────────────────────────────────────────────────────── */
.rm-info__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rm-info__key { font-family: var(--font-mono); font-size: var(--fs-14); background: none; padding: 0; color: var(--color-text); }
.rm-chip--risk-read { border-color: var(--color-border); }
.rm-chip--risk-write { border-color: var(--color-warning-border); color: var(--color-warning); background: var(--color-warning-bg); }
.rm-chip--risk-sensitive { border-color: var(--color-brand); color: var(--color-brand); }
.rm-chip--risk-destructive { border-color: var(--color-danger-border); color: var(--color-danger); background: var(--color-danger-bg); }

.rm-info__short { font-size: var(--fs-14); font-weight: 600; margin-bottom: var(--space-2); }
.rm-info__detail { color: var(--color-text-muted); line-height: 1.6; white-space: pre-line; margin-bottom: var(--space-3); }

.rm-info__section {
    border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-3);
}
.rm-info__section-title {
    font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: var(--space-2);
}
.rm-info__examples { margin: 0; padding-left: 18px; color: var(--color-text); line-height: 1.6; }
.rm-info__examples li { margin-bottom: 6px; }
.rm-info__holders { display: flex; gap: 6px; flex-wrap: wrap; }
.rm-info__usercount { color: var(--color-text-muted); font-size: var(--fs-12); margin: 8px 0 0; }
.rm-info__none { color: var(--color-text-muted); margin: 0; }