/* ============================================================
   TABLO GÖRÜNÜMLERİ — sekmeler (Tablo | Grafikler | Pivot) + özet kutucukları
   Views/Tables/_SheetEditor.cshtml, js/pages/sheet-views.js
   ============================================================ */
#sheetApp .sv-pane[hidden], #sheetApp .sv-kpis[hidden] { display: none !important; }

/* Özet kutucukları (KPI) */
.sv-kpis { display: flex; align-items: stretch; gap: 8px; padding: 8px 12px 0; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.sv-kpis::-webkit-scrollbar { display: none; }
.sv-kpi { flex: 1 0 140px; max-width: 260px; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 11px; background: var(--bg-elevated); border: 1px solid var(--border); min-width: 0; }
.sv-kpi-l { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-kpi-v { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--text-primary); line-height: 1.15; white-space: nowrap; }
.sv-kpi-edit { flex-shrink: 0; align-self: center; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: none; color: var(--text-muted); cursor: pointer; }
.sv-kpi-edit:hover { color: var(--accent); border-color: var(--accent); }
.sv-kpi-edit svg { width: 15px; height: 15px; }

/* Sekmeler (bölümlü düğme) */
.sv-tabs { display: flex; gap: 4px; margin: 8px 12px; padding: 4px; border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--border); flex-shrink: 0; }
.sv-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 10px; border: 0; border-radius: 9px; background: none; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.sv-tab svg { width: 15px; height: 15px; }
.sv-tab:hover { color: var(--text-primary); }
.sv-tab.on { background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 1px 3px rgba(15,27,45,.12); }
.sv-tab.on svg { color: var(--accent); }
.sv-tab-n:not(:empty) { min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-bright); font-size: 11px; line-height: 18px; }

/* Bölmeler: Tablo bölmesi eski düzeni (formül çubuğu + ızgara + durum) taşır */
.sv-pane-table { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sv-pane:not(.sv-pane-table) { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 14px; }

.sv-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.sv-bar-t { margin-right: auto; font-size: 12.5px; color: var(--text-muted); }
.sv-empty { display: flex; align-items: center; justify-content: center; min-height: 80px; padding: 16px; color: var(--text-muted); font-size: 13px; text-align: center; }
.sv-empty[hidden] { display: none; }
.sv-empty.big { flex-direction: column; gap: 8px; min-height: 260px; border: 1px dashed var(--border-strong); border-radius: 14px; }
.sv-empty.big > svg { width: 34px; height: 34px; color: var(--accent); }
.sv-empty.big h3 { font-family: var(--font-display); font-size: 17px; color: var(--text-primary); margin: 0; }
.sv-empty.big p { max-width: 460px; margin: 0 0 6px; line-height: 1.5; }
.sv-hint { font-size: 12px; color: var(--text-muted); }

/* Grafik kartları */
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.sv-card { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-surface); padding: 12px 14px; min-width: 0; }
.sv-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sv-card-h b { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-card-acts { display: flex; gap: 2px; flex-shrink: 0; }
.sv-card-b { position: relative; height: 290px; }
.sv-card-b canvas[hidden] { display: none; }

/* Grafik düzenleyici */
.sv-modal { max-width: 980px; width: 100%; display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
.sv-modal-sm { max-width: 520px; }
.sv-modal-body { display: grid; grid-template-columns: 340px 1fr; gap: 18px; overflow: auto; min-height: 0; }
.sv-form { display: flex; flex-direction: column; gap: 10px; }
.sv-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 0; }
.sv-f input, .sv-f select, .sv-pf-row select, .sv-kpi-row select { width: 100%; min-width: 0; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 400; }
.sv-f input:focus, .sv-f select:focus { outline: none; border-color: var(--accent); }
.sv-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sv-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sv-type { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.sv-type svg { width: 18px; height: 18px; }
.sv-type.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-bright); }
.sv-checks { display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow-y: auto; padding: 4px 2px; font-weight: 400; }
.sv-checks .wf-check { margin: 0; display: flex; align-items: center; gap: 8px; width: auto; font-size: 13px; white-space: nowrap; }
.sv-checks .wf-check input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }
.sv-preview { position: relative; min-height: 340px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--bg-surface); }
.sv-preview canvas[hidden] { display: none; }
.sv-preview .sv-empty { position: absolute; inset: 0; }

/* Özet kutucuğu düzenleyici */
.sv-kpi-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sv-kpi-row { display: grid; grid-template-columns: 1fr 140px 30px; gap: 8px; align-items: center; }
.sv-kpi-hide { margin-top: 6px; }

/* Pivot */
.sv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sv-chip svg { width: 13px; height: 13px; }
.sv-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-bright); }
.sv-pivot { display: grid; grid-template-columns: 290px 1fr; gap: 14px; align-items: start; }
.sv-pivot-cfg { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-surface); }
.sv-pf { display: flex; flex-direction: column; gap: 6px; }
.sv-pf-h { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.sv-pf-row { display: flex; gap: 6px; align-items: center; }
.sv-pf-row select:first-child { flex: 1; }
.sv-pf-row select + select { width: 112px; flex-shrink: 0; }
.sv-pf .btn-sm { align-self: flex-start; }
.sv-pivot-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-pivot-acts .danger { color: #e5484d; }
.sv-pivot-out { min-width: 0; }
.sv-pinfo { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.sv-pscroll { overflow: auto; max-height: calc(100vh - 330px); border: 1px solid var(--border); border-radius: 12px; }
.sv-ptable { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 100%; }
.sv-ptable th, .sv-ptable td { padding: 6px 10px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); white-space: nowrap; }
.sv-ptable th { position: sticky; top: 0; z-index: 1; background: var(--bg-elevated); font-weight: 700; color: var(--text-primary); text-align: center; }
.sv-ptable thead tr:nth-child(2) th { top: 30px; }
.sv-ptable td { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.sv-ptable td.lab { text-align: left; font-weight: 600; }
.sv-ptable .tot { background: color-mix(in srgb, var(--accent) 6%, transparent); font-weight: 700; }
.sv-ptable tr.sub td { background: var(--bg-elevated); font-weight: 700; }
.sv-ptable tr.sub td:first-child, .sv-ptable tr.grand td:first-child { text-align: left; }
.sv-ptable tr.grand td { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 800; border-bottom: 0; }

@media (max-width: 900px) {
    .sv-modal-body { grid-template-columns: 1fr; }
    .sv-preview { min-height: 260px; }
    .sv-pivot { grid-template-columns: 1fr; }
    .sv-pscroll { max-height: none; }
}
@media (max-width: 640px) {
    .sv-kpis { padding: 6px 8px 0; gap: 6px; }
    .sv-kpi { flex-basis: 120px; padding: 6px 10px; }
    .sv-kpi-v { font-size: 16px; }
    .sv-tabs { margin: 6px 8px; }
    .sv-tab { font-size: 12px; padding: 6px 6px; gap: 5px; }
    .sv-pane:not(.sv-pane-table) { padding: 2px 8px 12px; }
    .sv-grid { grid-template-columns: 1fr; }
    .sv-card-b { height: 240px; }
    .sv-types { grid-template-columns: repeat(4, 1fr); }
    .sv-f-row { grid-template-columns: 1fr; }
}