/* AgenticOps.Web — SVG grafikler. Seri renkleri dataviz referans paletinden (yuva 1 mavi, yuva 3 su yeşili;
   validate_palette.js ile açık yüzeyde doğrulandı). Yuva 0 = nötr karşılaştırma tabanı (vurgu kodlaması).
   Su yeşili 3:1 kontrastın altında kaldığı için değerler doğrudan etiketlenir ve tablo görünümü sunulur. */

.viz-card {
    --surface-1: #ffffff;
    --series-0: #b4bcc8;
    --series-1: #2a78d6;
    --series-3: #1baf7a;
    --viz-text-1: #0f172a;
    --viz-text-2: #52606f;
    --viz-grid: #e8ecf1;
    --viz-axis: #c6ced8;

    min-width: 0;
    margin: 0;
    padding: 24px 24px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-1);
    box-shadow: var(--shadow-sm);
    color: var(--viz-text-2);
}

.viz-card__head { margin-bottom: 14px; }
.viz-card .viz-card__title { margin: 0 0 2px; font-size: 1.05rem; color: var(--viz-text-1); }
.viz-card__subtitle { margin: 0; font-size: 0.88rem; color: var(--viz-text-2); }

.viz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--viz-text-1);
}

.viz-legend li { display: inline-flex; align-items: center; gap: 8px; }

.viz-legend__swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Her grafik geniş ve dar iki SVG düzeniyle gelir; dar ekranda yazılar küçülmesin diye dar düzen gösterilir. */
.viz-svg { display: block; width: 100%; height: auto; }
.viz-svg--compact { display: none; }

.viz-fill-0 { fill: var(--series-0); background: var(--series-0); }
.viz-fill-1 { fill: var(--series-1); background: var(--series-1); }
.viz-fill-3 { fill: var(--series-3); background: var(--series-3); }
.viz-stroke-1 { stroke: var(--series-1); }
.viz-stroke-3 { stroke: var(--series-3); }

.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-baseline { stroke: var(--viz-axis); stroke-width: 1; }

.viz-axis-label,
.viz-category-label,
.viz-value-label,
.viz-end-label {
    font-family: var(--font);
    font-size: 12px;
    fill: var(--viz-text-2);
}

.viz-category-label { font-size: 13px; fill: var(--viz-text-1); }
.viz-value-label { font-weight: 650; fill: var(--viz-text-1); }
.viz-end-label { font-size: 12.5px; fill: var(--viz-text-2); }
.viz-end-label__value { font-weight: 700; fill: var(--viz-text-1); }

.viz-hit { fill: transparent; }
.viz-mark, .viz-col { outline: none; cursor: default; }

.viz-bar { transition: opacity 0.15s ease; }
.viz-svg:has(.viz-mark:hover, .viz-mark:focus-visible) .viz-mark:not(:hover, :focus-visible) .viz-bar { opacity: 0.45; }
.viz-mark:focus-visible .viz-bar { stroke: var(--viz-text-1); stroke-width: 1.5; }

.viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-area { opacity: 0.1; }

.viz-dot { stroke: var(--surface-1); stroke-width: 2; }
.viz-dot--hover, .viz-crosshair { opacity: 0; transition: opacity 0.1s ease; }
.viz-crosshair { stroke: var(--viz-axis); stroke-width: 1; stroke-dasharray: 3 3; }
.viz-col:hover .viz-dot--hover, .viz-col:hover .viz-crosshair,
.viz-col:focus-visible .viz-dot--hover, .viz-col:focus-visible .viz-crosshair { opacity: 1; }

/* Tablo görünümü */

.viz-table { margin-top: 10px; font-size: 0.88rem; }

.viz-table summary {
    display: inline-block;
    cursor: pointer;
    color: var(--brand-600);
    font-weight: 600;
}

.viz-table__scroll { overflow-x: auto; margin-top: 10px; }

.viz-table table { width: 100%; border-collapse: collapse; }

.viz-table th,
.viz-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--viz-grid);
    text-align: left;
    white-space: nowrap;
}

.viz-table td { text-align: right; font-variant-numeric: tabular-nums; color: var(--viz-text-1); }
.viz-table thead th { color: var(--viz-text-2); font-weight: 600; }
.viz-table tbody th { color: var(--viz-text-1); font-weight: 500; }

.viz-card__note { margin: 10px 0 0; font-size: 0.76rem; color: var(--viz-text-2); }

/* İpucu (site.js oluşturur) */

.viz-tooltip {
    position: fixed;
    z-index: 80;
    max-width: 260px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #0f172a;
    color: #f1f5f9;
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre-line;
    box-shadow: 0 8px 24px -8px rgb(0 0 0 / 45%);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.1s ease, transform 0.1s ease;
}

.viz-tooltip.is-visible { opacity: 1; transform: none; }

.viz-tooltip::first-line { font-weight: 700; }

@media (max-width: 620px) {
    .viz-card { padding: 18px 16px 12px; }
    .viz-svg--wide { display: none; }
    .viz-svg--compact { display: block; }
}

@media (forced-colors: active) {
    .viz-bar, .viz-dot, .viz-legend__swatch { forced-color-adjust: none; }
}