/* ============================================================
   Shared page grid — kompakt, Octo-benzeri kurumsal görünüm.
   Tüm sayfalardaki grid'ler aynı görsel dilde kalmalı.
   ============================================================ */

.page-grid {
    background: #fff;
    border: 1px solid var(--rn-border);
    border-radius: 8px;
    overflow: hidden;
}

.page-grid-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* Grid başlık — gri ton merdiveni (Token Reference "Başlık katmanları"):
   üst başlık en koyu kat (--rn-head-1), koyu metin (--rn-head-ink). */
.page-grid-head th {
    background: var(--rn-head-1);
    color: var(--rn-head-ink);
    text-align: left;
    padding: var(--rn-grid-head-pad-y) var(--rn-grid-head-pad-x);
    font-size: var(--rn-grid-head-font);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: var(--rn-head-transform);
    border-bottom: 1px solid var(--rn-border-2);
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}
.page-grid-head th.sortable { cursor: pointer; user-select: none; }
.page-grid-head th.sortable:hover { background: #D5DCE8; }
/* Token: inactive ↕ → muted · active ▲/▼ → head-ink · font 9px */
.page-grid-sort-caret { display: inline-block; margin-left: 4px; font-size: 9px; color: var(--rn-muted-3); }
.page-grid-sort-caret.active { color: var(--rn-head-ink); }

.page-grid-row > td {
    padding: 0 var(--rn-grid-cell-pad-x);
    height: var(--rn-grid-row-h);            /* satır yüksekliği — token */
    max-height: var(--rn-grid-row-h);
    border-bottom: 1px solid #F1F4F9;
    font-size: var(--rn-grid-font);
    color: var(--rn-ink-2);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;            /* #52 — sığmayan hücre `…` ile kırpılsın (auto-tooltip hover'da tam metni verir) */
    vertical-align: middle;
}

.page-grid-row:hover > td { background: var(--rn-surface-3); }
.page-grid-row-active > td { background: #E7F0FF !important; }
.page-grid-row.zebra > td { background: #FAFBFD; }
.page-grid-row.zebra:hover > td { background: #F4F7FC; }

/* ---- Cell utilities ---- */
.page-grid-cell-mono {
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    color: var(--rn-muted);
}

.page-grid-cell-check {
    text-align: center;
    width: 32px;
}
.page-grid-cell-check .form-check-input {
    width: 15px;
    height: 15px;
    margin: 0;
}

.page-grid-cell-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
}

/* ---- Type / badge sütunu ---- */
.page-grid-cell-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--rn-muted);
    font-family: inherit !important;
}
.page-grid-type-ico {
    font-size: 13px;
    color: var(--rn-muted-3);
}
.page-grid-type-name {
    font-size: 11.5px;
    color: var(--rn-muted-2);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* ============================================================
   Group header rows (sticky-section style group headers)
   ============================================================ */
.page-grid-group-row > td {
    padding: var(--rn-grid-group-pad-y) var(--rn-grid-cell-pad-x) !important;
    background: var(--rn-surface);
    border-top: 1px solid var(--rn-border-2);
    border-bottom: 1px solid var(--rn-border-2);
    font-size: var(--rn-grid-group-font);
    color: #41506B;
}
.page-grid-group-glyph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-right: 7px;
    background: rgba(47, 107, 237, .16); color: var(--rn-blue);
    border-radius: 5px; font-size: 11px; font-weight: 700;
}
.page-grid-group-text { color: var(--rn-muted-2); margin-left: 6px; }

/* ============================================================
   Row coloring — semantic
   (Source-only yeşil / Different sarı / Target-only kırmızı / Identical gri)
   Uses left border to indicate kind; cell colors live separately.
   ============================================================ */
.page-grid-row-srconly > td:first-child  { border-left: 3px solid var(--rn-source-accent); }
.page-grid-row-diff    > td:first-child  { border-left: 3px solid var(--rn-diff-accent); }
.page-grid-row-tgtonly > td:first-child  { border-left: 3px solid var(--rn-target-accent); }
.page-grid-row-iden    > td:first-child  { border-left: 3px solid var(--rn-muted-3); }
.page-grid-row-iden    > td               { background: #FAFBFD !important; color: var(--rn-muted-2); }

/* ============================================================
   Sticky first column — keeps the colored row indicator (3px
   border-left on td:first-child) visible during horizontal scroll.
   Without this the stripe scrolls off the left edge with the first
   cell and the row's source/diff/target color is lost.
   ============================================================ */
.page-grid-table > thead > tr > th:first-child,
.page-grid-table > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}
.page-grid-table > thead > tr > th:first-child { z-index: 3; }
.page-grid-row > td:first-child { background: #fff; }
.page-grid-row.zebra > td:first-child { background: #FAFBFD; }
.page-grid-row:hover > td:first-child { background: var(--rn-surface-3); }
.page-grid-row.zebra:hover > td:first-child { background: #F4F7FC; }
.page-grid-row-active > td:first-child { background: #E7F0FF !important; }
.page-grid-row-iden > td:first-child { background: #FAFBFD !important; }
.page-grid-group-row > td:first-child { background: var(--rn-surface) !important; }

/* ============================================================
   Doubled (paired source/target) grid
   ============================================================ */
.page-grid-doubled { width: auto !important; min-width: 100%; }

/* Üst seviye column-group header — gri merdiven üst kat (--rn-head-1) */
.page-grid-head-pair > th.page-grid-pair-group {
    background: var(--rn-head-1) !important;
    color: var(--rn-head-ink) !important;
    text-align: center;
    border-bottom: 1px solid var(--rn-border-2) !important;
    font-weight: 700;
    text-transform: var(--rn-head-transform);
    font-size: var(--rn-grid-head-font);
    letter-spacing: .02em;
    padding: var(--rn-grid-head-pad-y) var(--rn-grid-head-pad-x);
}

/* Sub-header — Source / Target ayrımı. Token Reference (doubled grid): gri zemin
   var(--rn-surface) + SOURCE yeşil var(--rn-source) / TARGET kırmızı var(--rn-target) metin (9.5px). */
.page-grid-subhead-src,
.page-grid-subhead-tgt {
    background: var(--rn-surface) !important;
    text-align: center;
    font-size: 9.5px !important;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 5px 6px !important;
    text-transform: var(--rn-head-transform);
    border-bottom: 1px solid var(--rn-border-2) !important;
}
.page-grid-subhead-src { color: var(--rn-source) !important; }
.page-grid-subhead-tgt { color: var(--rn-target) !important; }

/* PK cell — sadece body satırlarında açık zemin (header'da gradient kalsın) */
.page-grid-pk-cell {
    background: #F8F9FB;
    font-weight: 600;
    color: #495057;
    min-width: 60px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
}
/* Header satırındaki PK / Include cell'leri gradient'a uydur */
.page-grid-head .page-grid-pk-cell,
.page-grid-head .rg-incl-cell,
.page-grid-head-pair .page-grid-pk-cell,
.page-grid-head-pair .rg-incl-cell {
    background: var(--rn-head-1) !important;
    color: var(--rn-head-ink) !important;
    border-bottom: 1px solid var(--rn-border-2) !important;
}

/* Paired cells — Token Reference semantiği: identical = transparent (tint YOK);
   source-only kaynak yeşil var(--rn-source-bg); target-only hedef pembe var(--rn-target-bg);
   modified hedef hücresi sarı var(--rn-diff-bg); eksik taraf transparent + soluk tire. */
.page-grid-doubled td.page-grid-cell-plain   { background: transparent; color: var(--rn-ink-2); }
.page-grid-doubled td.page-grid-cell-srconly { background: var(--rn-source-bg); color: var(--rn-source); }
.page-grid-doubled td.page-grid-cell-tgtonly { background: var(--rn-target-bg); color: var(--rn-target); }
.page-grid-doubled td.page-grid-cell-diff    { background: var(--rn-diff-bg); color: var(--rn-diff); font-weight: 600; }
.page-grid-doubled td.page-grid-cell-missing { background: transparent; color: var(--rn-faint); text-align: center; }

/* Doubled grid body — Token Reference: IBM Plex Mono 11.5px, ferah 9px padding,
   açık var(--rn-surface) ayraçlar. */
.page-grid-doubled td {
    padding: var(--rn-grid-doubled-pad-y) var(--rn-grid-doubled-pad-x);
    font-size: var(--rn-grid-doubled-font);
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    color: var(--rn-ink-2);
    border-right: 1px solid var(--rn-surface);
    border-bottom: 1px solid var(--rn-surface);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Soft legend strip — minimal, low attention
   ============================================================ */
.page-grid-legend {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 6px 10px; margin-top: 6px;
    border-top: 1px solid #F1F4F9;
    font-size: 10px; color: var(--rn-muted-3);
    opacity: .8;
}
.page-grid-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.page-grid-legend-box {
    width: 9px; height: 9px; border-radius: 2px; display: inline-block;
}
.page-grid-legend-box-src  { border: 1px solid var(--rn-source-accent); background: var(--rn-source-bg); }
.page-grid-legend-box-diff { background: var(--rn-diff-bg); border: 1px solid #EAD9B0; }
.page-grid-legend-box-tgt  { border: 1px solid var(--rn-target-accent); background: #FCE7EB; }

/* ============================================================
   Kod / script bloğu — TEK KAYNAK (.rn-code-block, dr-13).
   Tüm <pre> / SQL / deploy editörleri bundan beslenir: compact
   IBM Plex Mono + token padding/bg + Prism (line-numbers) uyumlu.
   Hex literal YOK — değerler tokens.css'ten (--rn-code-*).
   ============================================================ */
.rn-code-block {
    margin: 0;
    background: var(--rn-code-bg);
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius);
    padding: var(--rn-code-pad-y) var(--rn-code-pad-x);
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: var(--rn-code-font);
    line-height: var(--rn-code-line-h);
    color: var(--rn-ink-2);
    white-space: pre;
    overflow: auto;
    max-height: var(--rn-code-max-h);
    tab-size: 4;
}
/* code child reset (inline veya Prism dışı) */
.rn-code-block > code { font-family: inherit; font-size: inherit; background: none; padding: 0; color: inherit; white-space: inherit; }

/* Varyantlar */
.rn-code-block.rn-code-wrap { white-space: pre-wrap; word-break: break-word; }   /* hata/segment çıktısı sarılsın */
/* Word-wrap (kullanıcı toggle) — Prism iç pre/code de sarılsın */
.rn-code-block.rn-code-wrap pre[class*="language-"],
.rn-code-block.rn-code-wrap code[class*="language-"] { white-space: pre-wrap; word-break: break-word; }
.rn-code-block.rn-code-fill { max-height: none; flex: 1 1 auto; min-height: 0; } /* modal içinde flex-fill */

/* ---- Prism (line-numbers) uyumu ----
   .rn-code-block bir wrapper'a uygulanır; içteki <pre class="language-*">
   şeffaf kalır, stil wrapper'dan gelir. Prism selector specificity'sini
   (pre[class*=language-]) yenmek için iç-seçici (0,0,2,1) kullanılır. */
.rn-code-block pre[class*="language-"] {
    margin: 0;
    padding: 0;
    background: transparent;
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: var(--rn-code-font);
    line-height: var(--rn-code-line-h);
    text-shadow: none;
    white-space: pre;
    /* Prism teması pre'ye overflow:auto verir → .rn-code-block ile İÇ İÇE iki scroller (çift scrollbar).
       Tek scroller wrapper (.rn-code-block) olsun: iç pre taşmayı dışarı bıraksın. */
    overflow: visible;
}
.rn-code-block code[class*="language-"] {
    font-family: inherit;
    font-size: var(--rn-code-font);
    text-shadow: none;
}
.rn-code-block .line-numbers-rows { border-right-color: var(--rn-border); }
/* Gutter satır yüksekliği kod metniyle BİREBİR olmalı: Prism teması span'lere default 1.5 verir,
   bizim kod line-height'ımız --rn-code-line-h (1.55) → 0.05 fark × N satır birikip numaraları
   yukarı kaydırıyor, son satır(lar) numarasız kalıyordu. Token'a sabitle (drift sıfır). */
.rn-code-block .line-numbers-rows > span { line-height: var(--rn-code-line-h); }
.rn-code-block .line-numbers-rows > span:before { color: var(--rn-muted-3); }