/* ═══════════════════════════════════════════════════════════════════════
   SQL diff görünümü — paylaşılan stiller (SqlDiffView component'i).
   Eski yeri: DatabaseMigration.razor inline <style> (sadece SC sayfasında
   yüklenirdi). RC (ObjectTree) detay panelinde de aynı diff kullanıldığı için
   global dosyaya taşındı → App.razor head'inde link'li, tüm sayfalarda geçerli.
   JS (App.razor → renderDiffSql) .ddl-* elementlerini innerHTML ile ürettiği
   için bu CSS GLOBAL olmalı (scoped .razor.css JS-generated içeriği yakalamaz).
   ═══════════════════════════════════════════════════════════════════════ */

/* Diff kartı (toolbar + body) */
.sc-diff-card {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
    border: 1px solid var(--rn-border); border-radius: 11px;
    overflow: hidden;
}

/* SQL diff toolbar — tree header pattern (Kaynak Nesneler bar) */
.sc-diff-toolbar {
    display: flex; align-items: center; gap: 8px;
    height: var(--rn-grid-row-h); padding: 0 var(--rn-diff-toolbar-pad-x);
    background: #E7EBF2;
    border-bottom: 1px solid var(--rn-border-2);
    flex: 0 0 auto;
}
.sc-diff-toolbar-title {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 700; color: #41506B;
    letter-spacing: .02em;
}
.sc-diff-toolbar-title i { color: var(--rn-blue); font-size: 12px; }
/* Dil etiketi — Claude/Notion code-block tarzı küçük mono pill */
.sc-diff-lang {
    display: inline-flex; align-items: center; height: var(--rn-control-h-sm, 20px);
    padding: 0 7px; margin-left: 2px;
    border: 1px solid var(--rn-border); border-radius: 5px;
    background: var(--rn-surface-2); color: var(--rn-muted);
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600;
    letter-spacing: .03em; text-transform: lowercase;
}
.sc-diff-count {
    min-width: 22px; height: 20px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rn-blue); color: #fff; border-radius: 5px;
    font-size: 11.5px; font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
    margin-left: 4px;
}
.sc-diff-count-label { font-size: 11.5px; color: var(--rn-muted-2); font-weight: 500; }
/* dr-14: sayaç → ilk değişikliğe atla (tıklanabilir) */
.sc-diff-count-jump {
    display: inline-flex; align-items: center; gap: 4px;
    border: none; background: transparent; padding: 0 2px; margin: 0;
    cursor: pointer; border-radius: 6px;
    transition: background .12s ease;
}
.sc-diff-count-jump:hover { background: rgba(47, 107, 237, .10); }
.sc-diff-count-jump:hover .sc-diff-count-label { color: var(--rn-blue); }
.sc-diff-count-jump:active { transform: translateY(1px); }
.sc-diff-nav-btn {
    width: var(--rn-control-h-sm); height: var(--rn-control-h-sm);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #E6EAF1; background: #fff; color: var(--rn-muted-2);
    border-radius: 7px; cursor: pointer;
    flex: 0 0 auto;
    transition: all .12s ease;
}
.sc-diff-nav-btn:hover { background: #F4F7FC; color: var(--rn-blue); border-color: var(--rn-faint); }
.sc-diff-nav-btn:active { transform: translateY(1px); }
/* Diff-içi arama artık paylaşılan SearchBox component'i (.sc-search-box). Üst toolbar SearchBox'ı
   .page-toolbar altında stillenir; diff toolbar farklı kapsam → burada compact (20px) varyantı verilir.
   Böylece iki arama kutusu TEK component + tutarlı görsel dil (ikon, temizle butonu, tooltip). */
.sc-diff-toolbar .sc-search-box {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--rn-control-h-sm); padding: 0 10px; width: 250px;
    background: var(--rn-white); border: 1px solid var(--rn-control-border); border-radius: 8px;
    font-size: var(--rn-control-font); color: var(--rn-muted-3); /* container font FIX (browser default 16px'e düşüyordu) */
}
.sc-diff-toolbar .sc-search-box i { font-size: 11px; flex: 0 0 auto; }
.sc-diff-toolbar .sc-search-box input {
    border: none; background: transparent; outline: none;
    flex: 1 1 0; min-width: 0; width: auto;   /* küçülebilsin → sayaç + × her zaman görünür */
    font-size: var(--rn-control-font); color: var(--rn-ink);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.sc-diff-toolbar .sc-search-box input::placeholder { color: var(--rn-muted-3); }
.sc-diff-search-count {
    flex: 0 0 auto;                            /* sabit → kırpılmaz */
    font-size: 10.5px; color: var(--rn-muted-2);
    font-family: 'IBM Plex Mono', monospace;
    white-space: nowrap;
}

/* Search highlight */
.sc-diff-pane mark.diff-search-hit {
    background: #FFE066; color: var(--rn-ink);
    padding: 0 1px; border-radius: 2px;
}
.sc-diff-pane mark.diff-search-hit.active {
    background: #FFB300; color: var(--rn-ink); outline: 1px solid var(--rn-diff);
}
/* dr-12: dış kapsayıcı scroll ETMEZ — scroll SADECE pane'lerde. */
.sc-diff-body { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.sc-diff-body > .row { flex: 1 1 0; min-height: 0; flex-wrap: nowrap; }

/* ═══ line-level diff pane (jsdiff + Prism) ═══ */
.sc-diff-pane {
    background: var(--rn-code-bg);
    height: 100%;
    overflow: auto;
    font-family: 'IBM Plex Mono','Consolas','Courier New',monospace;
    font-size: var(--rn-diff-font);
    line-height: var(--rn-diff-line-h);
    border: 1px solid var(--rn-border);
}
/* Section-aware sticky band ("Kolonlar") — grid-group satırı ile AYNI compact ölçü (token). */
.sc-diff-pane .ddl-section {
    position: sticky; top: 0; left: 0; z-index: 2;
    display: flex; align-items: center;
    padding: var(--rn-grid-group-pad-y) var(--rn-grid-head-pad-x);
    background: var(--rn-surface);
    border-top: 1px solid var(--rn-border-2);
    border-bottom: 1px solid var(--rn-border-2);
}
.sc-diff-pane .ddl-section-glyph {
    width: 16px; height: 16px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 5px;
    background: rgba(122, 138, 163, .16);
    color: var(--rn-muted);
    font-size: 12px; font-weight: 700; line-height: 1;
    margin-right: 7px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.sc-diff-pane .ddl-section-label {
    font-size: 11.5px; color: var(--rn-ink-2); font-weight: 600;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
/* Per-object (trigger) başlık bandı — her trigger kendi ⚡ + ad bandı (satır no 1'den).
   Section bandından biraz daha hafif; ad mono (nesne adı). */
.sc-diff-pane .ddl-section.ddl-object {
    background: var(--rn-surface-2);
    border-top-color: var(--rn-faint);
}
.sc-diff-pane .ddl-section.ddl-object .ddl-section-glyph {
    background: rgba(176, 113, 10, .14); color: var(--rn-diff);
}
.sc-diff-pane .ddl-section.ddl-object .ddl-section-label {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--rn-ink-2);
}
/* Ayna (mirror) band — section karşı pane'de yok; sadece hizalama için yer tutar (hayalet). */
.sc-diff-pane .ddl-section.ddl-section-mirror {
    background: repeating-linear-gradient(135deg, var(--rn-surface-2), var(--rn-surface-2) 6px, transparent 6px, transparent 12px);
    opacity: .5;
}
.sc-diff-pane .ddl-section.ddl-section-mirror .ddl-section-glyph { opacity: .5; }
.sc-diff-pane .ddl-section.ddl-section-mirror .ddl-section-label { color: var(--rn-muted-3); font-style: italic; }
/* Info section band — pasif renk (deploy'a girmiyor) */
.sc-diff-pane .ddl-section.ddl-section-info {
    background: var(--rn-surface-2);
}
.sc-diff-pane .ddl-section.ddl-section-info .ddl-section-glyph {
    background: rgba(122, 138, 163, .12); color: var(--rn-muted-3);
}
.sc-diff-pane .ddl-section.ddl-section-info .ddl-section-label {
    color: var(--rn-muted-3); font-style: italic;
}
/* Info satırı — pasif gri (Renium diff renkleri override) */
.sc-diff-pane .ddl-line.ddl-info,
.sc-diff-pane .ddl-line.ddl-info.ddl-added,
.sc-diff-pane .ddl-line.ddl-info.ddl-removed,
.sc-diff-pane .ddl-line.ddl-info.ddl-same {
    background: var(--rn-surface-2) !important;
    opacity: .65;
    border-left: 2px solid var(--rn-faint);
}
.sc-diff-pane .ddl-line.ddl-info .ddl-num { color: var(--rn-faint); background: transparent !important; }
.sc-diff-pane .ddl-line.ddl-info .ddl-code { color: var(--rn-muted-3) !important; }
.sc-diff-pane .ddl-line { display: flex; align-items: stretch; min-height: 1.5em; }
/* Gutter: satır no 3+ haneli (100+) olunca sarmasın → nowrap + ch-tabanlı min-width (4 hane + padding).
   box-sizing:content-box → min-width net rakam alanı, padding onun DIŞINDA (border-box'ta padding
   içeriği daraltıp "12 / 0" sarmasına yol açıyordu). */
.sc-diff-pane .ddl-num { box-sizing: content-box; position: sticky; left: 0; z-index: 1; min-width: 4ch; padding: 0 .5rem; text-align: right; white-space: nowrap; color: var(--rn-muted-3); background: var(--rn-code-bg); user-select: none; border-right: 1px solid var(--rn-border); flex-shrink: 0; }
.sc-diff-pane .ddl-code { flex: 1; padding: 0 .75rem; white-space: pre; background: transparent !important; }
/* Diff renkleri — Renium semantik token (kaynak → hedef yönünde):
   - 'removed' (sadece kaynakta) = INSERT (hedefe eklenecek) → YEŞİL
   - 'added'   (sadece hedefte)   = DELETE (hedeften silinecek) → KIRMIZI
   - 'chg'     (iki tarafta da var, tip/def farklı) = UPDATE → SARI (ada göre hizalı kolon çifti) */
.sc-diff-pane .ddl-removed { background: color-mix(in srgb, var(--rn-source-bg) 70%, var(--rn-source-accent) 12%); }
.sc-diff-pane .ddl-removed .ddl-num { background: #C9E9DC; color: var(--rn-source); font-weight: 700; box-shadow: inset 3px 0 0 var(--rn-source-accent); }
.sc-diff-pane .ddl-added   { background: color-mix(in srgb, var(--rn-target-bg) 70%, var(--rn-target-accent) 12%); }
.sc-diff-pane .ddl-added   .ddl-num { background: #F0C2CC; color: var(--rn-target); font-weight: 700; box-shadow: inset 3px 0 0 var(--rn-target-accent); }
.sc-diff-pane .ddl-chg     { background: color-mix(in srgb, var(--rn-diff-bg) 70%, var(--rn-diff-accent) 12%); }
.sc-diff-pane .ddl-chg     .ddl-num { background: #F3E4C4; color: var(--rn-diff); font-weight: 700; box-shadow: inset 3px 0 0 var(--rn-diff-accent); }
.sc-diff-pane .ddl-pad     { background: var(--rn-surface-2); }
.sc-diff-pane .ddl-pad     .ddl-num { background: var(--rn-surface-2); }
.sc-diff-pane .ddl-same    { background: var(--rn-code-bg); }

/* ── Alt-nesne deploy checkbox şeridi (SC detay, SqlDiffView üstünde) ── */
.sc-subobj-strip {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px; min-height: var(--rn-control-h);
    padding: 3px 8px; margin-bottom: 4px;
    background: var(--rn-surface); border: 1px solid var(--rn-border);
    border-radius: 7px; font-size: 11.5px;
}
.sc-subobj-lbl { color: var(--rn-muted); font-size: 11px; font-weight: 600; }
.sc-subobj-item {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; margin: 0; cursor: pointer;
    border: 1px solid var(--rn-border); border-radius: 6px;
    background: var(--rn-surface-2); color: var(--rn-ink);
    line-height: 1.4;
}
.sc-subobj-item input { margin: 0; cursor: pointer; }
.sc-subobj-item i     { font-size: 11px; color: var(--rn-muted); }
.sc-subobj-item.is-changed { border-left: 3px solid var(--rn-diff); }