/* BiAce Premium Dashboard Styling - AdminLTE v4 Aesthetic */

/* ===== CSS VARIABLES FOR PREMIUM THEME ===== */
:root {
    /* MERKEZE BAGLANDI — acex-tokens.css. Bu blok eskiden AdminLTE paletinden
       kopyalanmis sabit degerler tasiyordu ve uygulamanin temasini hic tanimiyordu:
       BiAce'in "basarili" yesili (#198754) uygulamanin yesiliyle, "uyari" sarisi
       (#ffc107) uygulamanin amberiyle ayni ekranda yan yana duruyordu.
       --biace-* adlari korundu (3158 satir onlari kullaniyor); yalnizca kaynaklari
       degisti. Modul kimlik rengi de elektrik/dogalgaz/su gibi merkezde tanimli. */
    --biace-accent-primary: var(--acex-mod-bi);
    --biace-accent-secondary: var(--acex-accent);
    --biace-accent-success: var(--acex-success);
    --biace-accent-warning: var(--acex-warning);
    --biace-accent-danger: var(--acex-error);

    --biace-shadow-sm: var(--acex-shadow-1);
    --biace-shadow-md: var(--acex-shadow-2);
    --biace-shadow-lg: var(--acex-shadow-4);

    --biace-border-color: var(--acex-line);
    --biace-border-radius: var(--acex-radius-sm);

    --biace-transition-fast: var(--acex-dur-fast) var(--acex-ease);
    --biace-transition-normal: var(--acex-dur-slow) var(--acex-ease);
}

/* Pano grafiginin MudChart animasyonlari KALDIRILDI (P3.1 sonrasi olu kod).
   Grafik artik Highcharts ile ciziliyor ve .mud-chart-* elemani hic uretilmiyor;
   kurallar da onlari besleyen uc @keyframes de hicbir seyi etkilemiyordu.
   Highcharts tarafinda animasyon zaten kapali (plotOptions.series.animation = false),
   yani hareket azaltma acisindan da kaldirilacak bir sey kalmiyor. */

/* ===== PREMIUM CONTAINER & BACKGROUND ===== */
.biace-premium-container {
    background-color: var(--mud-palette-background-grey);
    min-height: 100vh;
    padding: 24px;
    font-family: 'Source Sans 3', 'Inter', 'Segoe UI', sans-serif;
}

/* ===== DYNAMIC DASHBOARD THEME ===== */
.biace-dashboard-theme-light {
    --biace-theme-page: #f5f7fb;
    --biace-theme-chrome: #ffffff;
    --biace-theme-header: #f8fafc;
    --biace-theme-card: #ffffff;
    --biace-theme-text: #142033;
    --biace-theme-muted: #64748b;
    --biace-theme-border: rgba(100, 116, 139, .20);
    --biace-table-header: #edf2f8;
    --biace-table-row-alt: rgba(37, 99, 235, .025);
    --biace-table-hover: rgba(37, 99, 235, .075);
    --biace-chart-grid: rgba(100, 116, 139, .22);
    --biace-theme-grid-neutral: rgba(100, 116, 139, .32);
    --biace-theme-grid-contrast: rgba(15, 23, 42, .50);
}

.biace-dashboard-theme-slate {
    --biace-theme-page: #edf1f6;
    --biace-theme-chrome: #fbfcfe;
    --biace-theme-header: #eef3f8;
    --biace-theme-card: #fbfcfe;
    --biace-theme-text: #172033;
    --biace-theme-muted: #5d6b7d;
    --biace-theme-border: rgba(71, 85, 105, .22);
    --biace-table-header: #e4eaf1;
    --biace-table-row-alt: rgba(71, 85, 105, .045);
    --biace-table-hover: rgba(37, 99, 235, .08);
    --biace-chart-grid: rgba(71, 85, 105, .23);
    --biace-theme-grid-neutral: rgba(71, 85, 105, .30);
    --biace-theme-grid-contrast: rgba(30, 41, 59, .48);
}

.biace-dashboard-theme-ocean {
    --biace-theme-page: #edf7fb;
    --biace-theme-chrome: #fbfeff;
    --biace-theme-header: #eaf7fb;
    --biace-theme-card: #fbfeff;
    --biace-theme-text: #123047;
    --biace-theme-muted: #527083;
    --biace-theme-border: rgba(8, 145, 178, .20);
    --biace-table-header: #dff2f8;
    --biace-table-row-alt: rgba(8, 145, 178, .045);
    --biace-table-hover: rgba(8, 145, 178, .105);
    --biace-chart-grid: rgba(8, 145, 178, .20);
    --biace-theme-grid-neutral: rgba(8, 145, 178, .30);
    --biace-theme-grid-contrast: rgba(3, 105, 161, .48);
}

.biace-dashboard-theme-emerald {
    --biace-theme-page: #eef8f4;
    --biace-theme-chrome: #fbfffd;
    --biace-theme-header: #eaf8f1;
    --biace-theme-card: #fbfffd;
    --biace-theme-text: #12372b;
    --biace-theme-muted: #537366;
    --biace-theme-border: rgba(16, 185, 129, .20);
    --biace-table-header: #dcf3e8;
    --biace-table-row-alt: rgba(16, 185, 129, .05);
    --biace-table-hover: rgba(16, 185, 129, .12);
    --biace-chart-grid: rgba(16, 185, 129, .20);
    --biace-theme-grid-neutral: rgba(16, 185, 129, .30);
    --biace-theme-grid-contrast: rgba(4, 120, 87, .48);
}

.biace-dashboard-theme-warm {
    --biace-theme-page: #fff7ed;
    --biace-theme-chrome: #fffdf9;
    --biace-theme-header: #fff4e5;
    --biace-theme-card: #fffdf9;
    --biace-theme-text: #42270f;
    --biace-theme-muted: #7c654f;
    --biace-theme-border: rgba(245, 158, 11, .22);
    --biace-table-header: #ffecd0;
    --biace-table-row-alt: rgba(245, 158, 11, .05);
    --biace-table-hover: rgba(245, 158, 11, .12);
    --biace-chart-grid: rgba(194, 65, 12, .18);
    --biace-theme-grid-neutral: rgba(245, 158, 11, .30);
    --biace-theme-grid-contrast: rgba(194, 65, 12, .46);
}

.biace-dashboard-theme-dark {
    color-scheme: dark;
    --biace-theme-page: #0b1017;
    --biace-theme-chrome: #151b23;
    --biace-theme-header: #171f28;
    --biace-theme-card: #151b23;
    --biace-theme-text: #e7eef7;
    --biace-theme-muted: #8d9aaa;
    --biace-theme-border: rgba(45, 212, 191, .17);
    --biace-table-header: #1b2832;
    --biace-table-row-alt: rgba(45, 212, 191, .035);
    --biace-table-hover: rgba(45, 212, 191, .105);
    --biace-chart-grid: rgba(148, 163, 184, .18);
    --biace-theme-grid-neutral: rgba(100, 116, 139, .30);
    --biace-theme-grid-contrast: rgba(45, 212, 191, .28);
}

.biace-dashboard-accent-primary { --biace-accent-primary: var(--acex-info); --biace-grid-accent: rgba(37, 99, 235, .42); }
.biace-dashboard-accent-success { --biace-accent-primary: var(--acex-success); --biace-grid-accent: rgba(16, 185, 129, .42); }
.biace-dashboard-accent-info { --biace-accent-primary: #0891b2; --biace-grid-accent: rgba(8, 145, 178, .42); }
.biace-dashboard-accent-warning { --biace-accent-primary: var(--acex-warning); --biace-grid-accent: rgba(245, 158, 11, .44); }
.biace-dashboard-accent-error { --biace-accent-primary: var(--acex-error); --biace-grid-accent: rgba(239, 68, 68, .42); }
.biace-dashboard-accent-purple { --biace-accent-primary: #7c3aed; --biace-grid-accent: rgba(124, 58, 237, .42); }

.biace-card-tone-default {
    --biace-card-text: var(--biace-theme-text);
    --biace-card-muted: var(--biace-theme-muted);
    --biace-card-border: var(--biace-theme-border);
    --biace-card-table-header: var(--biace-table-header);
    --biace-card-table-alt: var(--biace-table-row-alt);
    --biace-card-table-hover: var(--biace-table-hover);
    --biace-card-chart-grid: var(--biace-chart-grid);
}

.biace-card-tone-cloud {
    --biace-card-text: #1e293b;
    --biace-card-muted: #64748b;
    --biace-card-border: rgba(100, 116, 139, .22);
    --biace-card-table-header: #e5ebf2;
    --biace-card-table-alt: rgba(71, 85, 105, .05);
    --biace-card-table-hover: rgba(37, 99, 235, .09);
    --biace-card-chart-grid: rgba(71, 85, 105, .22);
}

.biace-card-tone-mint {
    --biace-card-text: #12372b;
    --biace-card-muted: #527366;
    --biace-card-border: rgba(5, 150, 105, .22);
    --biace-card-table-header: #d5f1e4;
    --biace-card-table-alt: rgba(5, 150, 105, .065);
    --biace-card-table-hover: rgba(5, 150, 105, .145);
    --biace-card-chart-grid: rgba(5, 150, 105, .20);
}

.biace-card-tone-sky {
    --biace-card-text: #12324b;
    --biace-card-muted: #55738a;
    --biace-card-border: rgba(2, 132, 199, .22);
    --biace-card-table-header: #dceefb;
    --biace-card-table-alt: rgba(2, 132, 199, .055);
    --biace-card-table-hover: rgba(2, 132, 199, .13);
    --biace-card-chart-grid: rgba(2, 132, 199, .20);
}

.biace-card-tone-rose {
    --biace-card-text: #4a1c2a;
    --biace-card-muted: #80606a;
    --biace-card-border: rgba(225, 29, 72, .20);
    --biace-card-table-header: #f9dfe5;
    --biace-card-table-alt: rgba(225, 29, 72, .045);
    --biace-card-table-hover: rgba(225, 29, 72, .105);
    --biace-card-chart-grid: rgba(225, 29, 72, .17);
}

.biace-card-tone-dark {
    --biace-card-text: #e7eef7;
    --biace-card-muted: #8d9aaa;
    --biace-card-border: rgba(45, 212, 191, .17);
    --biace-card-table-header: #1b2832;
    --biace-card-table-alt: rgba(45, 212, 191, .035);
    --biace-card-table-hover: rgba(45, 212, 191, .105);
    --biace-card-chart-grid: rgba(148, 163, 184, .18);
}

#biace-dashboard-stage {
    background: var(--biace-theme-page) !important;
}

/* Toolbar kendi kuralinda. Onceden PageBar ile AYNI kuralda paylasiliyordu; PageBar
   cikarilirken bu secici askida kalmis ve bir sonraki koyu tema kuralina baglanmisti.
   (Not: bu sinif yeni arayuzde artik kullanilmiyor; temizligi ayri bir is.) */
#biace-dashboard-stage .biace-premium-toolbar {
    background: var(--biace-theme-chrome) !important;
}

/* Kaldirildi (V4.3 gecisi): sayfa sekme rayinin arka plani artik
   BiAceDashboardPageBar.razor.css'te. Buradaki kural ID secici + !important tasidigi icin
   scoped kuralin OZGULLUGUNU asiyor ve yeni yuzeyi sessizce eziyordu -- yani tasarim
   uygulanmis gibi gorunup ekranda cikmiyordu.
   Ayni degiskeni (--biace-theme-chrome) scoped kural da kullaniyor; kaldirmakla tema
   davranisi degismiyor, yalnizca ince vurgu tonu artik gorunur hale geliyor. */

/* Kaldirildi (V4.3 gecisi): kart basligi gradyani artik V4.3 blogunda ve orada
   !important ile basiliyor -- yani buradaki kural ID secicisine ragmen TAMAMEN oluydu.
   Otoriter gorunup hicbir sey yapmayan bir kural, sonraki okuyucuyu yaniltir. */

.biace-dashboard-theme-dark .biace-dashboard-canvas-surface.biace-canvas-background-default,
.biace-dashboard-theme-dark .biace-dashboard-canvas-surface.biace-canvas-background-cloud,
.biace-dashboard-theme-dark .biace-dashboard-canvas-surface.biace-canvas-background-slate,
.biace-dashboard-theme-dark .biace-dashboard-canvas-surface.biace-canvas-background-blue,
.biace-dashboard-theme-dark .biace-dashboard-canvas-surface.biace-canvas-background-mint {
    background:
        radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--biace-accent-primary) 10%, transparent), transparent 30%),
        linear-gradient(145deg, #0b1017, #0e141c) !important;
}

/* Metin ve kenarlik rengi BES bilesende de ortak kaliyor. */
.biace-dashboard-theme-dark .biace-premium-toolbar,
.biace-dashboard-theme-dark .biace-dashboard-pagebar,
.biace-dashboard-theme-dark .biace-dashboard-theme-panel,
.biace-dashboard-theme-dark .biace-dashboard-ops-filterbar,
.biace-dashboard-theme-dark .biace-dashboard-cross-filter {
    color: var(--biace-theme-text) !important;
    border-color: var(--biace-theme-border) !important;
}

/* Arka plandan PageBar CIKARILDI: kendi yuzeyini scoped dosyasinda tanimliyor ve o dosya
   zaten --biace-theme-chrome kullaniyor, yani koyu temada dogru rengi aliyor. Burada
   !important ile yeniden basmak, yalnizca yeni yuzeyin vurgu tonunu eziyordu.
   Diger dort bilesen bu turda yeniden tasarlanmadigi icin oldugu gibi birakiliyor. */
.biace-dashboard-theme-dark .biace-premium-toolbar,
.biace-dashboard-theme-dark .biace-dashboard-theme-panel,
.biace-dashboard-theme-dark .biace-dashboard-ops-filterbar,
.biace-dashboard-theme-dark .biace-dashboard-cross-filter {
    background-color: var(--biace-theme-chrome) !important;
}

.biace-dashboard-theme-dark .biace-premium-toolbar .mud-typography,
.biace-dashboard-theme-dark .biace-dashboard-pagebar .mud-typography,
.biace-dashboard-theme-dark .biace-dashboard-theme-panel .mud-typography,
.biace-dashboard-theme-dark .biace-dashboard-card-header .mud-typography {
    color: var(--biace-theme-text);
}

/* PageBar cikarildi: katmanli golgesini scoped dosyasinda tanimliyor. Buradaki
   !important onu eziyordu. Toolbar bu turda degismedigi icin kaliyor. */
.biace-dashboard-theme-dark .biace-premium-toolbar {
    box-shadow: 0 12px 34px rgba(0, 0, 0, .24) !important;
}

.biace-dashboard-theme-dark .mud-input,
.biace-dashboard-theme-dark .mud-select-input,
.biace-dashboard-theme-dark .mud-input-label,
.biace-dashboard-theme-dark .mud-switch-label,
.biace-dashboard-theme-dark .mud-input-helper-text,
.biace-dashboard-theme-dark .mud-input-adornment,
.biace-dashboard-theme-dark .mud-input-adornment .mud-icon-root,
.biace-dashboard-theme-dark .mud-button-label {
    color: var(--biace-theme-text) !important;
}

.biace-dashboard-theme-dark .biace-dashboard-theme-panel .mud-secondary-text,
.biace-dashboard-theme-dark .biace-dashboard-theme-panel .mud-typography-color-secondary {
    color: #aebdce !important;
}

.biace-dashboard-theme-dark .biace-dashboard-theme-panel .mud-input-control {
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
}

.biace-dashboard-theme-dark .mud-input-outlined-border {
    border-color: rgba(148, 163, 184, .28) !important;
}

.biace-dashboard-theme-dark .mud-input-control:hover .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--biace-accent-primary) 58%, #94a3b8) !important;
}

.biace-dashboard-theme-dark .mud-icon-button:not(.mud-icon-button-color-primary):not(.mud-icon-button-color-success):not(.mud-icon-button-color-info):not(.mud-icon-button-color-warning):not(.mud-icon-button-color-error) {
    color: var(--biace-theme-muted);
}


.biace-dashboard-theme-panel {
    border-radius: 16px !important;
    border-color: color-mix(in srgb, var(--biace-accent-primary) 34%, var(--biace-border-color)) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--biace-accent-primary) 5%, transparent), transparent 46%),
        var(--mud-palette-surface) !important;
}

.biace-dashboard-canvas-surface.biace-canvas-background-default {
    background:
        radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--biace-accent-primary) 7%, transparent), transparent 28%),
        #f8fafc !important;
}
.biace-dashboard-canvas-surface.biace-canvas-background-cloud {
    background: linear-gradient(145deg, #ffffff, #f2f5fa) !important;
}
.biace-dashboard-canvas-surface.biace-canvas-background-slate {
    background: linear-gradient(145deg, #f3f6fa, #e5ebf3) !important;
}
.biace-dashboard-canvas-surface.biace-canvas-background-blue {
    background:
        radial-gradient(circle at 92% 5%, rgba(56, 189, 248, .18), transparent 32%),
        linear-gradient(145deg, #f5faff, #e7f2ff) !important;
}
.biace-dashboard-canvas-surface.biace-canvas-background-mint {
    background:
        radial-gradient(circle at 8% 2%, rgba(52, 211, 153, .16), transparent 30%),
        linear-gradient(145deg, #f7fffb, #e7f7f0) !important;
}

.biace-grid-pattern-none.grid-stack {
    background: transparent !important;
}

.biace-grid-pattern-dots.grid-stack {
    background-color: transparent !important;
    background-image: radial-gradient(circle, var(--biace-grid-color) 1.5px, transparent 1.6px) !important;
    background-size: 18px 18px !important;
}

.biace-grid-pattern-lines.grid-stack {
    background-color: transparent !important;
    background-image:
        linear-gradient(var(--biace-grid-color) 1.2px, transparent 1.2px),
        linear-gradient(90deg, var(--biace-grid-color) 1.2px, transparent 1.2px) !important;
    background-size: 32px 32px !important;
}

.biace-grid-tone-neutral { --biace-grid-color: var(--biace-theme-grid-neutral); }
.biace-grid-tone-accent { --biace-grid-color: var(--biace-grid-accent); }
.biace-grid-tone-contrast { --biace-grid-color: var(--biace-theme-grid-contrast); }

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content.biace-card-radius-small { border-radius: var(--acex-radius-xs) !important; }
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content.biace-card-radius-medium { border-radius: var(--acex-radius-lg) !important; }
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content.biace-card-radius-large { border-radius: 26px !important; }

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content.biace-card-shadow-none,
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content.biace-card-shadow-none:hover { box-shadow: none !important; }
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content.biace-card-shadow-soft,
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content.biace-card-shadow-soft:hover { box-shadow: var(--acex-shadow-3) !important; }
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content.biace-card-shadow-strong,
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content.biace-card-shadow-strong:hover { box-shadow: var(--acex-shadow-4) !important; }

.grid-stack.biace-card-spacing-compact > .grid-stack-item > .grid-stack-item-content { inset: 2px !important; }
.grid-stack.biace-card-spacing-comfortable > .grid-stack-item > .grid-stack-item-content { inset: 12px !important; }
.grid-stack.biace-card-spacing-airy > .grid-stack-item > .grid-stack-item-content { inset: 22px !important; }

/* ===== TOOLBAR (Compact Command Bar) ===== */
.biace-premium-toolbar {
    background-color: var(--mud-palette-surface) !important;
    border-radius: var(--biace-border-radius) !important;
    box-shadow: var(--biace-shadow-sm) !important;
    padding: 8px 10px !important;
    margin-bottom: 12px !important;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--biace-border-color) !important;
    color: var(--mud-palette-text-primary) !important;
    overflow: visible;
}

.biace-dashboard-toolbar-row {
    display: grid;
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
    grid-template-areas:
        "brand actions"
        "controls controls";
    align-items: center;
    width: 100%;
    gap: 8px 14px;
    min-width: 0;
}

.biace-dashboard-toolbar-brand {
    grid-area: brand;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-right: 1px solid var(--biace-border-color);
    padding-right: 10px;
    min-width: 0;
}

.biace-dashboard-toolbar-brand .mud-icon-button-root {
    width: 32px;
    height: 32px;
    padding: 4px;
}

.biace-dashboard-toolbar-brand-copy {
    min-width: 0;
}

.biace-dashboard-toolbar-brand-copy .mud-typography-caption {
    display: block;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.biace-dashboard-toolbar-brand-copy .mud-typography-h6 {
    line-height: 1.15;
}

.biace-dashboard-toolbar-brand-copy .mud-typography-h6 strong {
    display: block;
    font-size: var(--acex-text-lg);
    font-weight: var(--acex-weight-bold);
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.biace-dashboard-toolbar-actions,
.biace-dashboard-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.biace-dashboard-toolbar-actions {
    grid-area: actions;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.biace-dashboard-toolbar-controls {
    grid-area: controls;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px 12px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--biace-border-color) 78%, transparent);
}

.biace-dashboard-toolbar-control-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    padding: 3px 5px;
    border: 1px solid color-mix(in srgb, var(--biace-border-color) 72%, transparent);
    border-radius: var(--acex-radius-lg);
    background: color-mix(in srgb, var(--mud-palette-surface) 90%, var(--biace-accent-primary) 10%);
}

.biace-dashboard-toolbar-selects {
    flex: 1 1 auto;
    justify-content: center;
}

.biace-dashboard-toolbar-selects .mud-select {
    width: 112px;
}

.biace-dashboard-toolbar-quick-actions {
    justify-content: flex-end;
}

.biace-dashboard-name-input {
    width: 180px;
    flex: 1 1 160px;
    max-width: 220px;
}

.biace-premium-toolbar .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.biace-premium-toolbar .mud-input-control > .mud-input-control-input-container > .mud-input,
.biace-premium-toolbar .mud-select,
.biace-premium-toolbar .mud-button-root {
    min-height: 36px;
}

.biace-premium-toolbar .mud-button-root {
    padding: 5px 10px;
    border-radius: var(--biace-border-radius);
    font-size: var(--acex-text-xs);
    white-space: nowrap;
}

.biace-premium-toolbar .mud-button-group-root .mud-button-root {
    min-width: 44px;
    padding-left: 8px;
    padding-right: 8px;
}

.biace-premium-toolbar .mud-icon-button-root {
    width: 34px;
    height: 34px;
    padding: 5px;
}

.biace-premium-toolbar .mud-switch {
    margin: 0;
    white-space: nowrap;
}

.biace-premium-toolbar .mud-chip {
    height: 26px;
}

.biace-premium-toolbar .mud-button-filled.mud-button-filled-primary {
    background-color: var(--biace-accent-primary) !important;
    color: var(--acex-text-on-brand) !important;
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.28) !important;
    font-weight: var(--acex-weight-semibold);
}

.biace-premium-toolbar .mud-button-filled.mud-button-filled-primary:hover {
    background-color: #0b5ed7 !important;
}

@media (max-width: 1380px) {
    .biace-dashboard-toolbar-row {
        grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
        gap: 8px;
    }

    .biace-dashboard-name-input {
        width: 152px;
        flex-basis: 140px;
    }
}

@media (max-width: 1100px) {
    .biace-dashboard-toolbar-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "actions"
            "controls";
        align-items: stretch;
    }

    .biace-dashboard-toolbar-brand {
        border-right: 0;
        border-bottom: 1px solid var(--biace-border-color);
        padding-right: 0;
        padding-bottom: 6px;
    }

    .biace-dashboard-toolbar-actions,
    .biace-dashboard-toolbar-controls {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .biace-dashboard-toolbar-selects {
        flex: 0 1 auto;
    }
}

@media (max-width: 720px) {
    .biace-dashboard-toolbar-actions,
    .biace-dashboard-toolbar-controls {
        gap: 6px;
    }

    .biace-dashboard-name-input {
        width: 100%;
        max-width: none;
        flex-basis: 100%;
    }

    .biace-dashboard-toolbar-control-group {
        flex-wrap: wrap;
    }

    .biace-dashboard-toolbar-selects {
        width: 100%;
        justify-content: flex-start;
    }

    .biace-dashboard-toolbar-quick-actions {
        margin-left: 0;
    }
}

/* ===== CANVAS & EMPTY STATE ===== */
.biace-dashboard-canvas-surface {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.biace-dashboard-viewport-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--biace-border-color);
    border-radius: var(--acex-radius-md);
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
}

.biace-dashboard-viewport-switch .mud-icon-button-root {
    width: 32px;
    height: 32px;
    padding: 4px;
    border-radius: var(--acex-radius-sm);
}

.biace-dashboard-design-preview {
    width: 100%;
    margin-inline: auto;
    overflow: auto !important;
    border: 1px solid color-mix(in srgb, var(--biace-accent-primary) 22%, var(--biace-border-color)) !important;
    border-radius: var(--acex-radius-lg);
    box-shadow: var(--acex-shadow-3) !important;
    transition: max-width .22s ease, box-shadow .22s ease;
}

.biace-dashboard-design-preview-tablet {
    max-width: 920px;
}

.biace-dashboard-design-preview-mobile {
    max-width: 430px;
}

.biace-dashboard-grid-zone-preview.grid-stack {
    display: grid !important;
    grid-auto-flow: row dense;
    align-items: stretch;
    height: auto !important;
    min-height: 550px !important;
    gap: 12px;
}

.biace-dashboard-grid-zone-preview-tablet.grid-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.biace-dashboard-grid-zone-preview-mobile.grid-stack {
    grid-template-columns: minmax(0, 1fr);
}

.biace-dashboard-grid-zone-preview.grid-stack > .grid-stack-item {
    position: relative !important;
    inset: auto !important;
    grid-column: auto !important;
    width: 100% !important;
    height: 340px !important;
    min-height: 260px;
    margin: 0 !important;
    transform: none !important;
}

.biace-dashboard-grid-zone-preview-tablet.grid-stack > .grid-stack-item {
    height: 360px !important;
}

.biace-dashboard-grid-zone-preview.grid-stack > .grid-stack-item:has(> .biace-card-kind-metric) {
    height: 250px !important;
    min-height: 220px;
}

.biace-dashboard-grid-zone-preview.grid-stack > .grid-stack-item > .grid-stack-item-content {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
}

.biace-dashboard-grid-zone-preview .ui-resizable-handle {
    display: none !important;
}

.biace-dashboard-empty-state {
    background-color: var(--mud-palette-surface) !important;
    border-radius: var(--biace-border-radius) !important;
    border: 2px dashed var(--biace-border-color) !important;
    text-align: center;
    padding: 60px 20px !important;
    color: var(--mud-palette-text-primary) !important;
}

.biace-dashboard-empty-state .mud-icon-root {
    color: var(--biace-accent-primary) !important;
    font-size: 3rem !important;
    margin-bottom: 16px;
}

/* ===== TOOLBOX (Left sidebar) ===== */
.biace-dashboard-toolbox {
    background-color: var(--mud-palette-surface) !important;
    border-radius: var(--biace-border-radius) !important;
    border: 1px solid var(--biace-border-color) !important;
    box-shadow: var(--biace-shadow-sm) !important;
    height: calc(100vh - 164px);
    min-height: 520px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.biace-dashboard-toolbox .biace-dashboard-panel-head {
    flex: 0 0 auto;
    align-items: flex-start !important;
}

.biace-dashboard-toolbox .biace-dashboard-query-search {
    flex: 0 0 auto;
}

.biace-dashboard-toolbox-list {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 4px 10px 0;
    align-content: flex-start;
}

.biace-toolbox-item {
    display: block !important;
    flex: 0 0 auto;
    width: 100%;
    height: auto !important;
    min-height: 54px;
    max-height: 78px;
    background-color: var(--mud-palette-background) !important;
    border: 1px solid var(--biace-border-color) !important;
    border-left: 3px solid var(--biace-accent-primary) !important;
    border-radius: var(--biace-border-radius) !important;
    padding: 8px !important;
    margin: 0;
    cursor: grab;
    overflow: hidden;
    transition: box-shadow var(--biace-transition-fast), transform var(--biace-transition-fast), border-color var(--biace-transition-fast);
}

.biace-toolbox-item:hover {
    box-shadow: var(--biace-shadow-sm) !important;
    transform: translateY(-1px);
    border-color: rgba(13, 110, 253, .45) !important;
}

.biace-toolbox-item:active {
    cursor: grabbing;
}

.biace-dashboard-toolbox-card-inner {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.biace-dashboard-toolbox-card-inner > .mud-icon-root {
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: var(--acex-radius-sm);
    background: rgba(25, 135, 84, .12);
    color: var(--biace-accent-success) !important;
}

.biace-dashboard-toolbox-card-copy {
    min-width: 0;
}

.biace-dashboard-toolbox-card-copy .mud-typography-body2,
.biace-dashboard-toolbox-card-copy .mud-typography-caption {
    overflow: hidden;
    text-overflow: ellipsis;
}

.biace-dashboard-toolbox-card-copy .mud-typography-body2 strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.15;
    font-size: var(--acex-text-sm);
    font-weight: var(--acex-weight-bold);
}

.biace-dashboard-toolbox-card-copy .mud-typography-caption {
    display: block;
    margin-top: 1px;
    white-space: nowrap;
    font-size: var(--acex-text-2xs);
}

.biace-dashboard-toolbox-card-inner .mud-icon-button-root {
    width: 28px;
    height: 28px;
    padding: 3px;
}
/* ===== GRIDSTACK WIDGET CARDS (AdminLTE Card Style) ===== */
/* 10 Eylul: .grid-stack secicileri :where(.biace-dashboard-grid-zone) ile BiAce panosuna daraltildi.
   Ana sayfa widget panosu da ayni motoru (AceXGridStack) kullaniyor; bu kart stilleri ona sizmamali.
   :where() ozgulluk eklemez, dolayisiyla dosya icindeki oncelik sirasi degismez. */
.grid-stack:where(.biace-dashboard-grid-zone) {
    background: transparent !important;
    min-height: 400px;
}

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content {
    background-color: var(--biace-card-background, var(--mud-palette-surface)) !important;
    color: var(--biace-card-text, var(--mud-palette-text-primary)) !important;
    border-radius: var(--biace-border-radius) !important;
    box-shadow: var(--biace-shadow-sm) !important;
    border: 1px solid var(--biace-card-border, var(--biace-border-color)) !important;
    border-top: 3px solid var(--biace-accent-primary) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transition: box-shadow var(--biace-transition-normal) !important;
    /* 10 Eylul: "inset: 0 !important" buradan kaldirildi -- gridstack'in kart araligini (margin) ve
       yukaridaki .biace-card-spacing-* kurallarini eziyordu; kartlar her ayarda birbirine yapisiyordu. */
    cursor: default;
}

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content.biace-card-tone-dark {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28) !important;
}

.grid-stack-item-content.biace-card-tone-dark .biace-dashboard-card-header .mud-typography,
.grid-stack-item-content.biace-card-tone-dark .biace-dashboard-kpi-caption,
.grid-stack-item-content.biace-card-tone-dark .biace-dashboard-kpi-subtext,
.grid-stack-item-content.biace-card-tone-dark .biace-dashboard-kpi-records,
.grid-stack-item-content.biace-card-tone-dark .biace-dashboard-gauge-center strong,
.grid-stack-item-content.biace-card-tone-dark .biace-dashboard-gauge-copy > strong,
.grid-stack-item-content.biace-card-tone-dark .biace-dashboard-comparison strong {
    color: var(--biace-card-text) !important;
}

/* Alternate top border colors based on theme if set, otherwise primary */
.grid-stack-item-content[style*="background-color: var(--mud-palette-success)"] { border-top-color: var(--biace-accent-success) !important; }
.grid-stack-item-content[style*="background-color: var(--mud-palette-info)"] { border-top-color: var(--biace-accent-secondary) !important; }
.grid-stack-item-content[style*="background-color: var(--mud-palette-warning)"] { border-top-color: var(--biace-accent-warning) !important; }
.grid-stack-item-content[style*="background-color: var(--mud-palette-error)"] { border-top-color: var(--biace-accent-danger) !important; }


.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content:hover {
    box-shadow: var(--biace-shadow-md) !important;
}

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content {
    box-shadow: var(--biace-shadow-lg) !important;
    z-index: 100 !important;
    opacity: 0.95;
}

.grid-stack.biace-gridstack-interacting,
.grid-stack.biace-gridstack-interacting .grid-stack-item,
.grid-stack.biace-gridstack-interacting .grid-stack-item-content {
    transition: none !important;
    animation: none !important;
}

.grid-stack.biace-gridstack-interacting .mud-chart,
.grid-stack.biace-gridstack-interacting .biace-dashboard-table,
.grid-stack.biace-gridstack-interacting .acex-pivot-workbench {
    pointer-events: none;
}

.grid-stack.biace-gridstack-interacting .grid-stack-item-content {
    will-change: width, height, transform;
}

.grid-stack:where(.biace-dashboard-grid-zone) .ui-resizable-handle {
    touch-action: none;
}

/* Drag Handle Styling */
/* YALNIZCA YAPISAL ozellikler. Olcu ve yuzey (yukseklik, padding, gap, kenarlik, arka plan)
   asagidaki V4.3 blogunda; burada tekrar edilmeleri ayni ozelligin iki sahibi olmasi demekti
   ve bir sonraki duzenleme buyuk ihtimalle yanlis yere yapilirdi.
   Silinen bildirimler zaten V4.3 tarafindan eziliyordu, yani gorunum DEGISMIYOR. */
.grid-stack-item-content .biace-dashboard-card-header {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    cursor: grab;
}

.biace-dashboard-card-header .mud-typography-body2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
}

.biace-dashboard-card-header .mud-typography-body2 strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--acex-text-md);
    font-weight: var(--acex-weight-bold);
    color: var(--biace-card-text, var(--mud-palette-text-primary));
}

.biace-dashboard-card-header > .mud-icon-root {
    flex: 0 0 auto;
    font-size: var(--acex-text-lg);
}

.biace-dashboard-card-header > .mud-icon-button-root {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 3px;
}

/* font-size kaldirildi: V4.3 blogu "inherit" basiyor, buradaki deger zaten oluydu. */
.biace-dashboard-card-header .biace-dashboard-freshness {
    flex: 0 0 auto;
}

/* Kaldirildi: V4.3 blogu ayni secicide display:inline basiyor, buradaki none oluydu. */

/* --- Grup: secim kutucugu + slayt gecis bari --- */
.biace-dashboard-select {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: -4px;
}

.biace-dashboard-select .mud-checkbox {
    margin: 0;
}

/* Gruplanmis kartta katmanli (stacked) gorunum ipucu */
.biace-dashboard-card-grouped {
    border-top-color: var(--biace-accent-secondary) !important;
    box-shadow: 4px 6px 0 -2px var(--mud-palette-surface), 5px 7px 0 -2px var(--biace-border-color), var(--biace-shadow-sm) !important;
}

.biace-dashboard-slidebar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
    padding: 5px 9px;
    border-top: 1px solid var(--biace-card-border, var(--biace-border-color));
    background-color: color-mix(in srgb, var(--biace-card-background, var(--mud-palette-background-gray)) 90%, var(--biace-accent-primary) 3%);
    flex-shrink: 0;
}

.biace-dashboard-slide-dot {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--acex-radius-lg);
    border: 1px solid var(--biace-border-color);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: var(--acex-text-2xs);
    font-weight: var(--acex-weight-semibold);
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.biace-dashboard-slide-dot:hover {
    border-color: var(--biace-accent-primary);
    color: var(--biace-accent-primary);
}

.biace-dashboard-slide-dot.active {
    background-color: var(--biace-accent-primary);
    border-color: var(--biace-accent-primary);
    color: var(--acex-text-on-brand);
}

.biace-dashboard-slidebar .mud-icon-button-root {
    width: 26px;
    height: 26px;
    padding: 3px;
}

/* Placeholder during drag */
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-placeholder > .placeholder-content {
    border: 2px dashed var(--biace-accent-primary) !important;
    border-radius: var(--biace-border-radius) !important;
    background-color: rgba(13, 110, 253, 0.05) !important;
}

/* Resize Handle Styling */
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-handle {
    opacity: 0;
    transition: opacity var(--biace-transition-fast);
    z-index: 30;
    pointer-events: auto;
}

.biace-gridstack-editable > .grid-stack-item:hover > .ui-resizable-handle,
.biace-gridstack-editable > .grid-stack-item.ui-resizable-resizing > .ui-resizable-handle {
    opacity: 1;
    display: block !important;
}

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-se {
    background: none !important;
    width: 22px !important;
    height: 22px !important;
    bottom: -4px !important;
    right: -4px !important;
}

/* Kenar tutamaklari: GridStack dogu/bati icin YATAY CAPA vermiyor (right/left yok), bu
   yuzden sag tutamak sagda durmuyordu. Kuzey/guney de kenarlardan 25px iceride basliyordu.
   Dordu de kendi kenarina oturuyor ve kose payi disinda kenarin tamamini kapliyor. */
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-n,
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-s {
    left: var(--biace-resize-corner, 20px);
    right: var(--biace-resize-corner, 20px);
}

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-n { top: 0; }
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-s { bottom: 0; }

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-e,
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-w {
    top: var(--biace-resize-corner, 20px);
    bottom: var(--biace-resize-corner, 20px);
}

/* Asil eksik olan iki bildirim: bunlar olmadan dogu/bati tutamagi yatayda capasiz kaliyor. */
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-e { right: 0; }
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-w { left: 0; }

/* Kose tutamaklari kendi koselerinde; kenar tutamaklariyla ustuste binmiyorlar. */
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-ne { top: 0; right: 0; }
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-nw { top: 0; left: 0; }
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-sw { bottom: 0; left: 0; }

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .ui-resizable-se::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--biace-accent-secondary);
    border-bottom: 2px solid var(--biace-accent-secondary);
}

/* Card Content Area */
.grid-stack-item-content .widget-body,
.grid-stack-item-content .biace-dashboard-visual-content,
.grid-stack-item-content .biace-dashboard-visual-shell {
    flex: 1 1 auto;
    padding: 0;
    overflow: auto;
    position: relative;
    background-color: transparent;
    /* Flexbox tasma onlemi: icerik konteyneri genisletmesin, kart icinde kaysin */
    min-width: 0;
    min-height: 0;
    max-width: 100%;
}

/* Fix table display to be prominent and clear */
.biace-dashboard-table {
    border-radius: 0;
    border: none !important;
}
.biace-dashboard-table thead tr th {
    font-weight: var(--acex-weight-semibold);
    color: var(--mud-palette-text-primary);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--biace-card-background, var(--biace-theme-header)) 88%, var(--biace-accent-primary) 4%),
            color-mix(in srgb, var(--biace-card-background, var(--biace-theme-header)) 96%, transparent)
        );
    border-bottom: 2px solid var(--biace-border-color);
}
.biace-dashboard-table tbody tr td {
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--biace-border-color);
    white-space: nowrap;
    padding: 6px 12px;
}

/* --- Dashboard gorsellerinin karta responsive sigmasi --- */
/* Shell'i dikey flex yap ki gorsel kalan alani doldursun ve icinde olceklenebilsin */
.biace-dashboard-visual-shell {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/*
 * Dashboard visual viewport
 * ResizeObserver only updates presentation parameters. It never reloads widget data.
 */
.biace-responsive-visual-host {
    container-type: size;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.biace-responsive-visual-host.biace-responsive-table,
.biace-responsive-visual-host.biace-responsive-pivot {
    position: relative;
    overflow: hidden;
    scrollbar-gutter: auto;
}

.biace-responsive-visual-host.biace-responsive-table > .biace-dashboard-table-shell {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.biace-responsive-visual-host.biace-responsive-pivot > .biace-dashboard-preset-visual {
    display: flex;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    flex: 1 1 0;
    overflow: hidden;
}

.biace-responsive-visual-host.biace-responsive-pivot .acex-pivot-workbench {
    width: 100%;
    height: 100% !important;
    max-height: 100%;
    flex: 1 1 0;
}

.biace-responsive-visual-host.biace-responsive-chart > .biace-dashboard-preset-visual,
.biace-responsive-visual-host.biace-responsive-chart .biace-mudchart-shell,
.biace-responsive-visual-host.biace-responsive-chart .biace-mudchart-main,
.biace-responsive-visual-host.biace-responsive-chart .biace-mudchart-surface,
.biace-responsive-visual-host.biace-responsive-chart .biace-dashboard-basic-chart,
.biace-responsive-visual-host.biace-responsive-chart .mud-chart {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

.biace-responsive-visual-host.biace-responsive-chart > .mud-chart,
.biace-responsive-visual-host.biace-responsive-chart .biace-dashboard-basic-chart {
    flex: 1 1 auto;
}

.biace-responsive-visual-host.biace-responsive-chart .mud-chart {
    align-self: stretch;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.biace-responsive-visual-host.biace-responsive-chart .mud-chart > svg,
.biace-responsive-visual-host.biace-responsive-chart .mud-chart > canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: 100% !important;
}

/* Short dashboard cards scale the complete plot, axes and labels into the
 * available height instead of clipping the lower part of the SVG. */
@container (max-height: 210px) {
        .biace-responsive-chart .biace-mudchart-frame {
        width: calc(100% - 12px);
        margin-inline: 6px;
    }

    .biace-responsive-chart .biace-mudchart-frame,
    .biace-responsive-chart .biace-mudchart-shell.visual-only .biace-mudchart-frame {
        padding-top: 2px;
    }

    .biace-responsive-chart .mud-chart svg text {
        font-size: var(--acex-text-3xs) !important;
    }
}

@container (max-height: 150px) {
        .biace-responsive-chart .biace-mudchart-frame {
        width: 100%;
        margin-inline: 0;
    }

    .biace-responsive-chart .mud-chart svg text {
        font-size: 8px !important;
    }
}

.grid-stack-item-content .biace-responsive-chart,
.grid-stack-item-content .biace-responsive-chart .biace-dashboard-preset-visual,
.grid-stack-item-content .biace-responsive-chart .biace-dashboard-basic-chart,
.grid-stack-item-content .biace-responsive-chart .biace-mudchart-surface,
.grid-stack-item-content .biace-responsive-chart .biace-mudchart-frame,
.grid-stack-item-content .biace-responsive-chart .mud-chart {
    background: transparent !important;
    background-color: transparent !important;
}

.grid-stack-item-content .biace-responsive-chart .mud-chart svg text {
    fill: var(--biace-card-muted, var(--mud-palette-text-secondary)) !important;
}

.grid-stack-item-content .biace-responsive-chart .mud-chart .mud-chart-legend-text,
.grid-stack-item-content .biace-responsive-chart .mud-chart .mud-chart-legend-checkbox,
.grid-stack-item-content .biace-responsive-chart .mud-chart .mud-input-label {
    color: var(--biace-card-text, var(--mud-palette-text-primary)) !important;
}

/*
 * MudChart tooltips are SVG groups. The general chart text rule above must not
 * make tooltip copy blend into the tooltip background. The default tooltip has
 * both a rect and a pointer polygon, which distinguishes it from bars/markers.
 */
.grid-stack-item-content .biace-responsive-chart .mud-chart svg g:has(> rect):has(> polygon) > rect,
.grid-stack-item-content .biace-responsive-chart .mud-chart svg g:has(> rect):has(> polygon) > polygon {
    fill: #111827 !important;
    stroke: rgba(255, 255, 255, .32) !important;
    stroke-width: 1px !important;
}

.grid-stack-item-content .biace-responsive-chart .mud-chart svg g:has(> rect):has(> polygon) text {
    fill: #f8fafc !important;
    font-weight: var(--acex-weight-semibold);
}

.grid-stack-item-content .biace-responsive-chart .mud-chart svg line {
    stroke: var(--biace-card-chart-grid, var(--biace-chart-grid)) !important;
}

.grid-stack-item-content .biace-responsive-table,
.grid-stack-item-content .biace-responsive-table .biace-dashboard-table,
.grid-stack-item-content .biace-responsive-table .mud-table,
.grid-stack-item-content .biace-responsive-table .mud-table-container,
.grid-stack-item-content .biace-responsive-table table,
.grid-stack-item-content .biace-responsive-table tbody,
.grid-stack-item-content .biace-responsive-table tbody tr,
.grid-stack-item-content .biace-responsive-table tbody td {
    background: transparent !important;
    background-color: transparent !important;
}

.grid-stack-item-content .biace-responsive-table thead,
.grid-stack-item-content .biace-responsive-table thead tr,
.grid-stack-item-content .biace-responsive-table thead th {
    color: var(--biace-card-text, var(--mud-palette-text-primary)) !important;
    background: var(--biace-card-table-header, var(--biace-table-header)) !important;
}

.grid-stack-item-content .biace-responsive-table tbody td {
    color: var(--biace-card-text, var(--mud-palette-text-primary)) !important;
    border-bottom-color: var(--biace-card-border, var(--biace-theme-border)) !important;
}

.grid-stack-item-content .biace-responsive-table tbody tr:nth-child(even) {
    background: var(--biace-card-table-alt, var(--biace-table-row-alt)) !important;
}

.grid-stack-item-content .biace-responsive-table tbody tr:hover {
    background: var(--biace-card-table-hover, var(--biace-table-hover)) !important;
}

.grid-stack-item-content .biace-responsive-pivot .acex-pivot-workbench,
.grid-stack-item-content .biace-responsive-pivot .pivot-body,
.grid-stack-item-content .biace-responsive-pivot .pivot-stage,
.grid-stack-item-content .biace-responsive-pivot .pivot-grid-wrap,
.grid-stack-item-content .biace-responsive-pivot .pivot-grid,
.grid-stack-item-content .biace-responsive-pivot .pivot-grid tbody td,
.grid-stack-item-content .biace-responsive-pivot .pivot-grid .row-member {
    background: var(--biace-card-background, var(--mud-palette-surface)) !important;
    color: var(--biace-card-text, var(--mud-palette-text-primary)) !important;
}

.grid-stack-item-content .biace-responsive-pivot .pivot-grid thead th,
.grid-stack-item-content .biace-responsive-pivot .pivot-grid .row-axis,
.grid-stack-item-content .biace-responsive-pivot .pivot-grid .measure-head th {
    color: var(--biace-card-text, var(--mud-palette-text-primary)) !important;
    background: var(--biace-card-table-header, var(--biace-table-header)) !important;
}

.grid-stack-item-content .biace-responsive-pivot .pivot-grid th,
.grid-stack-item-content .biace-responsive-pivot .pivot-grid td {
    border-color: var(--biace-card-border, var(--biace-theme-border)) !important;
}

.grid-stack-item-content .biace-responsive-pivot .pivot-grid tbody tr:nth-child(even) td:not(.row-member) {
    background: var(--biace-card-table-alt, var(--biace-table-row-alt)) !important;
}

.biace-responsive-table .biace-dashboard-table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.biace-responsive-table .biace-dashboard-table .mud-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.biace-responsive-table .biace-dashboard-table table {
    width: 100%;
    min-width: max-content;
}

.biace-responsive-table .biace-dashboard-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.biace-responsive-table .biace-dashboard-table thead tr th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 9px 12px;
    box-shadow: inset 0 -1px 0 var(--biace-border-color);
}

.biace-responsive-table .biace-dashboard-table tbody tr {
    transition: background-color .16s ease;
}

.biace-responsive-table .biace-dashboard-table tbody tr:hover {
    background: color-mix(in srgb, var(--biace-accent-primary) 6%, transparent);
}

.biace-responsive-table.narrow .biace-dashboard-table thead tr th,
.biace-responsive-table.narrow .biace-dashboard-table tbody tr td {
    padding: 7px 10px;
    font-size: var(--acex-text-sm);
}

.biace-responsive-table.compact .biace-dashboard-table thead tr th,
.biace-responsive-table.compact .biace-dashboard-table tbody tr td {
    max-width: 220px;
    padding: 5px 8px;
    overflow: hidden;
    font-size: var(--acex-text-xs);
    text-overflow: ellipsis;
}

.biace-responsive-pivot .biace-dashboard-pivot-visual {
    min-width: 0;
    width: 100%;
    height: 100%;
}

.biace-responsive-pivot.compact .biace-dashboard-pivot-visual {
    min-width: 0;
}

/* --- Dinamik KPI kartlari --- */
.biace-dashboard-kpi {
    --biace-kpi-accent: var(--acex-info);
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 180px;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    border-radius: var(--acex-radius-xl);
    overflow: hidden;
    color: var(--mud-palette-text-primary);
}

.biace-dashboard-kpi-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.biace-dashboard-kpi-copy {
    min-width: 0;
    text-align: center;
}

.biace-dashboard-kpi-icon {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    place-items: center;
    border-radius: var(--acex-radius-xl);
    color: var(--biace-kpi-accent);
    background: color-mix(in srgb, var(--biace-kpi-accent) 13%, transparent);
}

.biace-dashboard-kpi-icon .mud-icon-root {
    font-size: var(--acex-text-3xl);
}

.biace-dashboard-kpi-classic .biace-dashboard-kpi-main {
    flex-direction: column;
    gap: 10px;
}

.biace-dashboard-kpi-iconleft .biace-dashboard-kpi-copy {
    text-align: left;
}

.biace-dashboard-kpi-accent {
    border-left: 6px solid var(--biace-kpi-accent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--biace-kpi-accent) 7%, transparent), transparent 52%);
}

.biace-dashboard-kpi-gradient {
    color: var(--acex-text-on-brand);
    background:
        radial-gradient(circle at 90% 10%, rgba(255,255,255,.22), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--biace-kpi-accent) 78%, #0f172a), var(--biace-kpi-accent));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

.biace-dashboard-kpi-gradient .biace-dashboard-kpi-icon {
    color: var(--acex-text-on-brand);
    background: rgba(255,255,255,.17);
}

.biace-dashboard-kpi-gradient .mud-typography,
.biace-dashboard-kpi-gradient .biace-dashboard-kpi-caption,
.biace-dashboard-kpi-gradient .biace-dashboard-kpi-subtext,
.biace-dashboard-kpi-gradient .biace-dashboard-kpi-records {
    color: var(--acex-text-on-brand) !important;
}

.biace-dashboard-kpi-caption {
    color: var(--mud-palette-text-secondary);
    letter-spacing: .08em;
}

.biace-dashboard-kpi-value {
    color: var(--biace-kpi-accent);
    font-weight: var(--acex-weight-bold) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
}

.biace-dashboard-kpi-gradient .biace-dashboard-kpi-value {
    color: var(--acex-text-on-brand);
}

/*
 * KPI sablon yuzeyi dis GridStack kartina da uygulanir. Boylece kartin
 * padding ve yuvarlatilmis kose bolgelerinde ikinci bir arka plan kalmaz.
 */
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content.biace-kpi-host-accent {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--biace-kpi-accent) 11%, var(--biace-card-background)) 0%,
            color-mix(in srgb, var(--biace-kpi-accent) 5%, var(--biace-card-background)) 58%,
            color-mix(in srgb, var(--biace-kpi-accent) 3%, var(--biace-card-background)) 100%
        ) !important;
}

.grid-stack-item-content.biace-kpi-host-accent .biace-dashboard-kpi-accent {
    background: transparent;
}

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content.biace-kpi-host-gradient {
    border-color: color-mix(in srgb, var(--biace-kpi-accent) 68%, #0f172a) !important;
    border-top-color: color-mix(in srgb, var(--biace-kpi-accent) 78%, #0f172a) !important;
    background:
        radial-gradient(circle at 92% 4%, rgba(255,255,255,.24), transparent 31%),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--biace-kpi-accent) 78%, #0f172a),
            var(--biace-kpi-accent)
        ) !important;
}

.grid-stack-item-content.biace-kpi-host-gradient .biace-dashboard-kpi-gradient {
    background: transparent;
    box-shadow: none;
}

.grid-stack-item-content.biace-kpi-host-gradient,
.grid-stack-item-content.biace-kpi-host-gradient .biace-dashboard-card-header,
.grid-stack-item-content.biace-kpi-host-gradient .biace-dashboard-card-header .mud-typography,
.grid-stack-item-content.biace-kpi-host-gradient .biace-dashboard-card-header .mud-icon-root,
.grid-stack-item-content.biace-kpi-host-gradient .biace-dashboard-card-header .mud-icon-button-root,
.grid-stack-item-content.biace-kpi-host-gradient .biace-dashboard-freshness {
    color: var(--acex-text-on-brand) !important;
}

.grid-stack-item-content.biace-kpi-host-gradient .biace-dashboard-card-header .mud-chip {
    border-color: rgba(255,255,255,.38) !important;
    color: var(--acex-text-on-brand) !important;
    background: rgba(255,255,255,.12) !important;
}

.grid-stack-item-content.biace-kpi-host-gradient .biace-dashboard-card-actions {
    border-color: rgba(255,255,255,.34) !important;
    background: rgba(15, 23, 42, .38) !important;
    box-shadow: var(--acex-shadow-3);
    backdrop-filter: blur(10px);
}

.grid-stack-item-content.biace-kpi-host-gradient .biace-dashboard-card-actions .mud-icon-button-root,
.grid-stack-item-content.biace-kpi-host-gradient .biace-dashboard-card-actions .mud-icon-root {
    color: var(--acex-text-on-brand) !important;
}

.grid-stack-item-content.biace-kpi-host-gradient .biace-dashboard-card-actions .mud-icon-button-root:hover {
    background: rgba(255,255,255,.18) !important;
}

.biace-dashboard-kpi-subtext,
.biace-dashboard-kpi-records {
    color: var(--mud-palette-text-secondary);
}

.biace-dashboard-kpi-thresholds {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.biace-dashboard-kpi-progress,
.biace-dashboard-sparkline {
    width: min(100%, 360px);
    margin-inline: auto;
}

.biace-dashboard-sparkline {
    height: 56px;
}

.biace-dashboard-sparkline.compact {
    height: 38px;
}

.biace-dashboard-sparkline svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.biace-dashboard-sparkline path {
    fill: none;
    stroke: var(--biace-kpi-accent, var(--mud-palette-primary));
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.biace-dashboard-kpi-gradient .biace-dashboard-sparkline path {
    stroke: #fff;
}

.biace-dashboard-kpi-records {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 24px);
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--biace-kpi-accent) 18%, transparent);
    border-radius: var(--acex-radius-pill);
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--biace-kpi-accent) 6%, var(--biace-card-background, var(--acex-surface, var(--mud-palette-surface))));
    font-size: var(--acex-text-2xs);
    font-weight: var(--acex-weight-semibold);
    line-height: 1;
}

.biace-dashboard-kpi-records .mud-icon-root {
    font-size: var(--acex-text-md);
}

.biace-dashboard-kpi-mini-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(3px, 1.1vw, 8px);
    width: min(100%, 380px);
    height: 68px;
    margin: 14px auto 0;
    padding: 7px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--biace-kpi-accent) 20%, transparent);
}

.biace-dashboard-kpi-mini-bars i {
    width: clamp(5px, 4.5%, 16px);
    height: var(--biace-mini-bar-height);
    min-height: 7px;
    border-radius: var(--acex-radius-sm) 5px 2px 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--biace-kpi-accent) 72%, #fff), var(--biace-kpi-accent));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--biace-kpi-accent) 18%, transparent);
}

.biace-dashboard-kpi-target-ring {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 14px auto 0;
    place-content: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, var(--biace-card-background, var(--acex-surface, var(--mud-palette-surface))) 57%, transparent 59%),
        conic-gradient(var(--biace-kpi-accent) 0 var(--biace-target-progress), color-mix(in srgb, var(--biace-kpi-accent) 12%, transparent) var(--biace-target-progress) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--biace-kpi-accent) 12%, transparent);
    text-align: center;
}

.biace-dashboard-kpi-target-ring strong,
.biace-dashboard-kpi-target-ring span {
    display: block;
}

.biace-dashboard-kpi-target-ring strong {
    color: var(--biace-kpi-accent);
    font-size: var(--acex-text-md);
    line-height: 1;
}

.biace-dashboard-kpi-target-ring span {
    margin-top: 3px;
    color: var(--mud-palette-text-secondary);
    font-size: .6rem;
    font-weight: var(--acex-weight-bold);
    text-transform: uppercase;
}

.biace-dashboard-kpi-gradient .biace-dashboard-kpi-records {
    border-color: rgba(255,255,255,.22);
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.13);
}

.biace-dashboard-kpi-gradient .biace-dashboard-kpi-mini-bars i {
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.48));
}

.biace-dashboard-kpi-gradient .biace-dashboard-kpi-target-ring {
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--biace-kpi-accent) 76%, #0f172a) 57%, transparent 59%),
        conic-gradient(#fff 0 var(--biace-target-progress), rgba(255,255,255,.18) var(--biace-target-progress) 100%);
}

.biace-dashboard-kpi-gradient .biace-dashboard-kpi-target-ring strong,
.biace-dashboard-kpi-gradient .biace-dashboard-kpi-target-ring span {
    color: var(--acex-text-on-brand);
}

/* --- Gauge, durum listesi ve karsilastirma --- */
.biace-dashboard-gauge-wrap {
    --biace-kpi-accent: var(--biace-accent-primary);
    display: grid;
    grid-template-columns: minmax(128px, .75fr) minmax(150px, 1.25fr);
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 150px;
    gap: clamp(14px, 4%, 30px);
    padding: clamp(12px, 3.5%, 26px);
    border: 1px solid color-mix(in srgb, var(--biace-accent-primary) 13%, transparent);
    border-radius: var(--acex-radius-xl);
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--biace-accent-primary) 10%, transparent), transparent 36%),
        color-mix(in srgb, var(--biace-card-background, var(--acex-surface, var(--mud-palette-surface))) 94%, transparent);
}

.biace-dashboard-gauge {
    position: relative;
    display: grid;
    width: min(100%, 184px);
    aspect-ratio: 1;
    margin: auto;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, var(--biace-card-background, var(--acex-surface, var(--mud-palette-surface))) 58%, transparent 59%),
        conic-gradient(var(--biace-accent-primary) 0 var(--biace-gauge-value), color-mix(in srgb, var(--biace-accent-primary) 11%, var(--acex-line, var(--mud-palette-lines-default))) var(--biace-gauge-value) 100%);
    filter: drop-shadow(0 12px 20px color-mix(in srgb, var(--biace-accent-primary) 16%, transparent));
}

.biace-dashboard-gauge::after {
    position: absolute;
    inset: 12%;
    border: 1px solid color-mix(in srgb, var(--biace-accent-primary) 10%, transparent);
    border-radius: inherit;
    content: "";
}

.biace-dashboard-gauge-center {
    position: relative;
    z-index: 1;
    max-width: 76%;
    text-align: center;
}

.biace-dashboard-gauge-center strong,
.biace-dashboard-gauge-center span {
    display: block;
}

.biace-dashboard-gauge-center strong {
    color: var(--mud-palette-text-primary);
    font-size: clamp(1.15rem, 3.2vw, 2rem);
    font-weight: var(--acex-weight-bold);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.biace-dashboard-gauge-center span {
    margin-top: 5px;
    color: var(--biace-accent-primary);
    font-size: var(--acex-text-2xs);
    font-weight: var(--acex-weight-bold);
}

.biace-dashboard-gauge-copy {
    min-width: 0;
}

.biace-dashboard-metric-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--biace-accent-primary);
    font-size: var(--acex-text-3xs);
    font-weight: var(--acex-weight-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.biace-dashboard-gauge-copy > strong {
    display: block;
    color: var(--mud-palette-text-primary);
    font-size: clamp(1rem, 2vw, 1.38rem);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.biace-dashboard-gauge-target {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding: 5px 9px;
    border-radius: var(--acex-radius-pill);
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--biace-accent-primary) 8%, transparent);
    font-size: var(--acex-text-2xs);
    font-weight: var(--acex-weight-bold);
}

.biace-dashboard-comparison {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    gap: clamp(8px, 2vw, 16px);
}

.biace-dashboard-comparison > div {
    display: flex;
    min-width: 0;
    min-height: 112px;
    flex-direction: column;
    justify-content: center;
    padding: clamp(10px, 2vw, 18px);
    border: 1px solid color-mix(in srgb, var(--biace-accent-primary) 11%, var(--biace-border-color));
    border-radius: var(--acex-radius-xl);
    background: color-mix(in srgb, var(--biace-card-background, var(--acex-surface, var(--mud-palette-surface))) 95%, transparent);
    box-shadow: var(--acex-shadow-2);
}

.biace-dashboard-comparison > div.current {
    border-color: color-mix(in srgb, var(--biace-accent-primary) 28%, transparent);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--biace-accent-primary) 9%, transparent), transparent 66%),
        color-mix(in srgb, var(--biace-card-background, var(--acex-surface, var(--mud-palette-surface))) 96%, transparent);
}

.biace-dashboard-comparison span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--acex-text-2xs);
    font-weight: var(--acex-weight-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.biace-dashboard-comparison strong {
    display: block;
    margin-top: 8px;
    color: var(--mud-palette-text-primary);
    font-size: clamp(1rem, 3vw, 1.75rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.biace-dashboard-comparison .current strong {
    color: var(--biace-accent-primary);
}

.biace-dashboard-comparison .delta.positive { border-color: color-mix(in srgb, var(--acex-success) 34%, transparent); background-color: color-mix(in srgb, var(--acex-success) 7%, var(--biace-card-background, var(--acex-surface, var(--mud-palette-surface)))); }
.biace-dashboard-comparison .delta.positive span,
.biace-dashboard-comparison .delta.positive strong { color: #059669; }
.biace-dashboard-comparison .delta.negative { border-color: color-mix(in srgb, var(--acex-error) 34%, transparent); background-color: color-mix(in srgb, var(--acex-error) 7%, var(--biace-card-background, var(--acex-surface, var(--mud-palette-surface)))); }
.biace-dashboard-comparison .delta.negative span,
.biace-dashboard-comparison .delta.negative strong { color: var(--acex-error); }

.biace-responsive-metric.compact .biace-dashboard-kpi {
    min-height: 0;
    justify-content: center;
    padding: 6px 9px;
}

.biace-responsive-metric.compact .biace-dashboard-kpi-main {
    flex-direction: row;
    gap: 9px;
}

.biace-responsive-metric.compact .biace-dashboard-kpi-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: var(--acex-radius-lg);
}

.biace-responsive-metric.compact .biace-dashboard-kpi-copy {
    text-align: left;
}

.biace-responsive-metric.compact .biace-dashboard-kpi-value {
    font-size: clamp(1rem, 7cqw, 1.55rem) !important;
}

.biace-responsive-metric.compact .biace-dashboard-kpi-caption,
.biace-responsive-metric.compact .biace-dashboard-kpi-subtext {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.biace-responsive-metric.compact .biace-dashboard-kpi-records,
.biace-responsive-metric.compact .biace-dashboard-kpi-thresholds {
    display: none;
}

.biace-responsive-metric.compact .biace-dashboard-kpi-progress {
    width: min(100%, 300px);
    margin-top: 6px !important;
}

.biace-responsive-metric.compact .biace-dashboard-kpi-progress .mud-typography {
    font-size: var(--acex-text-3xs);
    line-height: 1.1;
}

.biace-responsive-metric.compact .biace-dashboard-sparkline {
    width: min(100%, 280px);
    height: 25px;
    margin-top: 5px !important;
}

.biace-responsive-metric.compact .biace-dashboard-kpi-mini-bars {
    width: min(100%, 280px);
    height: 31px;
    margin-top: 5px;
    padding: 3px 8px;
}

.biace-responsive-metric.compact .biace-dashboard-kpi-target-ring {
    width: 48px;
    height: 48px;
    margin-top: 5px;
}

.biace-responsive-metric.compact .biace-dashboard-kpi-target-ring strong {
    font-size: var(--acex-text-2xs);
}

.biace-responsive-metric.compact .biace-dashboard-kpi-target-ring span {
    margin-top: 1px;
    font-size: .48rem;
}

.biace-dashboard-kpi-progress.unavailable .mud-progress-linear {
    position: relative;
    overflow: hidden;
}

.biace-dashboard-kpi-progress.unavailable .mud-progress-linear::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--biace-kpi-accent) 18%, transparent) 0 7px,
        color-mix(in srgb, var(--biace-kpi-accent) 6%, transparent) 7px 14px
    );
    content: "";
}

.biace-dashboard-kpi-target-ring.unavailable {
    opacity: .82;
}

@container (max-height: 92px) {
    .biace-dashboard-kpi {
        padding-block: 3px;
    }

    .biace-dashboard-kpi-icon {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }

    .biace-dashboard-kpi-subtext,
    .biace-dashboard-kpi-progress,
    .biace-dashboard-sparkline,
    .biace-dashboard-kpi-mini-bars,
    .biace-dashboard-kpi-target-ring {
        display: none;
    }
}

.biace-responsive-metric.compact .biace-dashboard-gauge-wrap {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 0;
    gap: 10px;
    padding: 8px;
}

.biace-responsive-metric.compact .biace-dashboard-gauge {
    width: 86px;
}

.biace-responsive-metric.compact .biace-dashboard-metric-kicker,
.biace-responsive-metric.compact .biace-dashboard-gauge-copy .biace-dashboard-sparkline {
    display: none;
}

.biace-responsive-metric.compact .biace-dashboard-gauge-copy > strong {
    font-size: var(--acex-text-md);
}

.biace-responsive-metric.compact .biace-dashboard-gauge-target {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--acex-text-3xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.biace-responsive-metric.compact .biace-dashboard-comparison {
    grid-template-columns: repeat(3, minmax(76px, 1fr));
    gap: 5px;
    overflow-x: auto;
}

.biace-responsive-metric.compact .biace-dashboard-comparison > div {
    min-height: 78px;
    padding: 8px;
    border-radius: var(--acex-radius-lg);
}

.biace-responsive-metric.compact .biace-dashboard-comparison span {
    font-size: .55rem;
}

.biace-responsive-metric.compact .biace-dashboard-comparison strong {
    margin-top: 5px;
    font-size: var(--acex-text-md);
}

.biace-responsive-metric.narrow .biace-dashboard-comparison {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    overflow-x: auto;
}

@media (max-width: 720px) {
    .biace-dashboard-kpi {
        min-height: 150px;
        padding: 14px;
    }

    .biace-dashboard-kpi-main {
        gap: 10px;
    }

    .biace-dashboard-kpi-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: var(--acex-radius-lg);
    }
}

/* Preset gorsel sarmalayici: kalan alani doldurur, tasan icerigi kendi icinde yonetir */
.biace-dashboard-preset-visual {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

.biace-dashboard-pivot-visual,
.biace-dashboard-chart-visual {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
}

/* Grafik studio'yu (yalnizca dashboard'a gomulu halini) kart yuksekligine sigdir */
.biace-dashboard-chart-visual,
.biace-dashboard-chart-visual .biace-mudchart-shell,
.biace-dashboard-chart-visual .biace-mudchart-main,
.biace-dashboard-chart-visual .biace-mudchart-surface {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
}
.biace-dashboard-chart-visual .biace-mudchart-shell,
.biace-dashboard-chart-visual .biace-mudchart-main,
.biace-dashboard-chart-visual .biace-mudchart-surface {
    flex: 1 1 auto;
}

/* Grafik alani: kalan alani doldurur; MatchBoundsToSize bu alani olcup grafigi sigdirir */
.biace-dashboard-chart-visual .biace-mudchart-frame {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    width: calc(100% - 28px);
    margin-inline: 14px;
    padding-bottom: 14px;
    box-sizing: border-box;
    scrollbar-width: thin;
}

.biace-dashboard-chart-visual .biace-mudchart-axis-canvas {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
}
/* MudChart'in inline height:320px'ini ez; frame'i flex ile doldursun (gercek yukseklik alsin) */
.biace-dashboard-chart-visual .biace-mudchart-frame .mud-chart {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* svg konteynere sigacak sekilde olceklenir (en-boy korunur, tasmaz) */
.biace-dashboard-chart-visual .biace-mudchart-frame svg,
.biace-dashboard-chart-visual .biace-mudchart-frame canvas {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Legend: kompakt, sabit yukseklikte, gerekirse kendi icinde kaydirilir */
.biace-dashboard-chart-visual .biace-mudchart-footer {
    flex: 0 0 auto;
    max-height: 88px;
    overflow: auto;
}

/*
 * Dashboard legend'i SVG disinda tutulur. Böylece kart yatayda daralirken
 * cizim motoru legend'i kirpmaz; etiketler tek satirda yatay kaydirilir.
 */
.biace-dashboard-basic-chart {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    padding-bottom: 14px;
    box-sizing: border-box;
}


.biace-chart-category-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
    min-height: 34px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--biace-card-muted, #64748b) 18%, transparent);
    border-radius: var(--acex-radius-md);
    background: color-mix(in srgb, var(--biace-card-surface, #fff) 90%, transparent);
    color: var(--biace-card-muted, var(--mud-palette-text-secondary));
    font-size: var(--acex-text-2xs);
    font-weight: var(--acex-weight-bold);
}

.biace-chart-category-nav label,
.biace-chart-category-nav-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.biace-chart-category-nav > span {
    min-width: 82px;
    text-align: center;
    white-space: nowrap;
}

.biace-chart-category-nav button,
.biace-chart-category-nav select {
    height: 25px;
    border: 1px solid color-mix(in srgb, var(--biace-card-muted, #64748b) 28%, transparent);
    border-radius: var(--acex-radius-sm);
    background: color-mix(in srgb, var(--biace-card-surface, #fff) 92%, transparent);
    color: var(--biace-card-text, var(--mud-palette-text-primary));
}

.biace-chart-category-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    padding: 0;
    cursor: pointer;
}

.biace-chart-category-nav button:disabled {
    cursor: default;
    opacity: .36;
}

.biace-chart-category-nav select {
    min-width: 64px;
    padding: 0 22px 0 7px;
    font: inherit;
    cursor: pointer;
}

.biace-dashboard-chart-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: auto;
    max-height: 120px;
    min-width: 0;
    padding: 4px 10px 5px;
    border: 1px solid color-mix(in srgb, var(--biace-card-muted, #64748b) 16%, transparent);
    border-radius: var(--acex-radius-md);
    background: color-mix(in srgb, var(--biace-card-surface, #fff) 88%, transparent);
    overflow-x: auto;
    overflow-y: auto;
    color: var(--biace-card-muted, var(--mud-palette-text-secondary));
    font-size: clamp(.62rem, 1.6cqw, .74rem);
    line-height: 1;
    scrollbar-width: thin;
    white-space: nowrap;
}

.biace-chart-display-trigger {
    position: absolute;
    z-index: 9;
    top: 6px;
    right: 8px;
}

.biace-chart-display-trigger > .mud-icon-button {
    border-color: color-mix(in srgb, var(--biace-card-muted, #64748b) 24%, transparent);
    background: color-mix(in srgb, var(--biace-card-surface, #fff) 88%, transparent);
    color: var(--biace-card-text, var(--mud-palette-text-primary));
    box-shadow: var(--acex-shadow-2);
    backdrop-filter: blur(8px);
}

.biace-chart-display-panel {
    display: grid;
    gap: 10px;
    width: min(380px, calc(100vw - 28px));
    padding: 10px;
    color: var(--mud-palette-text-primary);
}

.biace-chart-display-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 30px;
    padding-left: 4px;
}

.biace-chart-display-panel-head strong {
    font-size: var(--acex-text-xs);
    font-weight: var(--acex-weight-bold);
}

.biace-dashboard-chart-legend span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    max-width: 180px;
}

.biace-dashboard-chart-legend i {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 10%, transparent);
}

.biace-dashboard-chart-legend b {
    overflow: hidden;
    font: inherit;
    font-weight: var(--acex-weight-semibold);
    text-overflow: ellipsis;
}

.biace-responsive-chart.compact .biace-dashboard-chart-legend {
    height: auto;
    gap: 8px;
    padding-inline: 6px;
}

.biace-responsive-chart.narrow .mud-chart svg text {
    font-size: var(--acex-text-3xs) !important;
}

.biace-responsive-chart.compact .mud-chart svg text {
    font-size: 8.5px !important;
}

.biace-responsive-chart .mud-chart svg g:has(> rect):has(> polygon) text {
    font-size: var(--acex-text-2xs) !important;
}

.biace-responsive-chart .mud-chart svg text.biace-axis-label-has-tooltip {
    cursor: help;
}
/* Basliksiz/KPI alanlarini sabit tut, grafik alani buyusun */
.biace-dashboard-chart-visual .biace-mudchart-surface-head,
.biace-dashboard-chart-visual .biace-mudchart-kpis {
    flex: 0 0 auto;
}

/* Ince, modern kaydirma cubugu (kart icindeki gorseller icin) */
.biace-dashboard-visual-shell::-webkit-scrollbar,
.biace-dashboard-preset-visual::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.biace-dashboard-visual-shell::-webkit-scrollbar-thumb,
.biace-dashboard-preset-visual::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: var(--acex-radius-md);
}
.biace-dashboard-visual-shell::-webkit-scrollbar-track,
.biace-dashboard-preset-visual::-webkit-scrollbar-track {
    background: transparent;
}

/* Card Actions (Hover) */
.biace-dashboard-card-actions {
    position: absolute;
    z-index: 12;
    top: 4px;
    right: 4px;
    height: 34px;
    max-width: calc(100% - 48px);
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 2px 4px;
    border: 1px solid var(--biace-card-border, rgba(148, 163, 184, .22));
    border-radius: var(--acex-radius-sm);
    background: color-mix(in srgb, var(--biace-card-background, var(--mud-palette-surface)) 94%, transparent);
    box-shadow: var(--acex-shadow-2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    overflow-x: auto;
    overflow-y: hidden;
    transition: opacity var(--biace-transition-fast), transform var(--biace-transition-fast);
}

.biace-dashboard-card-actions .mud-chip {
    display: none;
}

.biace-dashboard-card-actions .mud-icon-button-root,
.biace-dashboard-card-actions .mud-menu .mud-icon-button-root {
    width: 27px;
    height: 27px;
    padding: 3px;
}

.grid-stack-item-content:hover .biace-dashboard-card-actions,
.grid-stack-item-content:focus-within .biace-dashboard-card-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ===== VIEWER & PRESENTATION MODES ===== */
.biace-dashboard-grid-zone-view .grid-stack-item-content {
    cursor: default !important;
}

.biace-dashboard-grid-zone-view .biace-dashboard-card-header {
    cursor: default !important;
}

.biace-dashboard-grid-zone-view .biace-dashboard-card-actions {
    opacity: 1;
}

/*
 * Viewer/presentation use the saved 12-column layout on desktop. On narrower
 * screens the same cards are projected into a non-destructive adaptive grid;
 * persisted X/Y/W/H values are never rewritten.
 */
@media (max-width: 1180px) {
    .biace-dashboard-grid-zone-view.grid-stack {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row dense;
        align-items: stretch;
        height: auto !important;
        min-height: 0 !important;
        gap: 14px;
    }

    .biace-dashboard-grid-zone-view.grid-stack > .grid-stack-item {
        position: relative !important;
        inset: auto !important;
        grid-column: auto !important;
        width: 100% !important;
        height: 360px !important;
        min-height: 280px;
        margin: 0 !important;
        transform: none !important;
    }

    .biace-dashboard-grid-zone-view.grid-stack > .grid-stack-item:has(> .biace-card-kind-metric) {
        height: 270px !important;
        min-height: 220px;
    }

    .biace-dashboard-grid-zone-view .grid-stack-item-content {
        position: absolute !important;
        inset: 0 !important;
        margin: 0 !important;
        padding: 12px !important;
    }
}

@media (max-width: 720px) {
    .biace-premium-container {
        padding: 8px;
    }

    .biace-dashboard-grid-zone-view.grid-stack {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 4px !important;
    }

    .biace-dashboard-grid-zone-view.grid-stack > .grid-stack-item {
        height: 340px !important;
        min-height: 260px;
    }

    .biace-dashboard-grid-zone-view.grid-stack > .grid-stack-item:has(> .biace-card-kind-metric) {
        height: 235px !important;
        min-height: 190px;
    }

    .biace-dashboard-grid-zone-view .grid-stack-item-content {
        padding: 9px !important;
        border-radius: var(--acex-radius-lg) !important;
    }

    .biace-dashboard-grid-zone-view .biace-dashboard-card-header {
        min-height: 34px;
        padding-right: 34px;
    }

    .biace-dashboard-grid-zone-view .biace-dashboard-freshness span,
    .biace-dashboard-grid-zone-view .biace-dashboard-card-actions .mud-chip {
        display: none !important;
    }

    .biace-dashboard-grid-zone-view .biace-dashboard-card-actions {
        max-width: min(72%, 290px);
    }

    .biace-dashboard-grid-zone-view .biace-responsive-table,
    .biace-dashboard-grid-zone-view .biace-responsive-pivot {
        scrollbar-gutter: auto;
    }
}

/* Focus Mode */
.biace-dashboard-card-focus {
    z-index: 1000 !important;
    box-shadow: var(--biace-shadow-lg) !important;
    transform: scale(1.02);
}

.biace-dashboard-card-muted {
    opacity: 0.3 !important;
    pointer-events: none;
}

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--acex-radius-xs);
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}


/* ===== LIVE DASHBOARD MOTION ===== */
@keyframes biace-card-enter {
    from { opacity: 0; transform: translateY(8px) scale(.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes biace-bar-rise {
    from { opacity: .15; transform: scaleY(.04); }
    to { opacity: 1; transform: scaleY(1); }
}

@keyframes biace-line-reveal {
    from { opacity: .25; stroke-dashoffset: 1200; }
    to { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes biace-radial-pop {
    from { opacity: 0; transform: scale(.78) rotate(-8deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes biace-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, .28); }
    50% { box-shadow: 0 0 0 5px rgba(25, 135, 84, 0); }
}

.biace-dashboard-grid-zone .grid-stack-item-content {
    animation: biace-card-enter .34s cubic-bezier(.2,.75,.25,1) both;
}

.biace-dashboard-grid-zone .grid-stack-item:nth-child(2n) .grid-stack-item-content { animation-delay: 35ms; }
.biace-dashboard-grid-zone .grid-stack-item:nth-child(3n) .grid-stack-item-content { animation-delay: 70ms; }

/* Yalnizca SERI elemanlari. Eski secicilerin kapsami cok genisti:
   svg path[fill="none"] veri cizgisinin yaninda izgara ve eksen cizgilerini de,
   svg g[clip-path] rect ise cizim alani zeminini de yakalayabiliyordu.
   .mud-chart-* secicileri ise hicbir seye uymuyordu (grafik Highcharts'a tasindi). */
/* Seciciler grafik TURUNE bagli. Highcharts seri grubuna "highcharts-{type}-series"
   siniflarini veriyor; tur belirtilmezse ".highcharts-series .highcharts-point" her
   turdeki noktayi yakalar ve sutun animasyonu (asagidan yukari buyume) cizgi
   isaretcilerine de uygulanirdi. */
.biace-dashboard-chart-visual .highcharts-column-series .highcharts-point,
.biace-dashboard-chart-visual .highcharts-bar-series .highcharts-point {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: biace-bar-rise .72s cubic-bezier(.2,.8,.2,1) both;
}

.biace-dashboard-chart-visual .highcharts-line-series .highcharts-graph,
.biace-dashboard-chart-visual .highcharts-spline-series .highcharts-graph,
.biace-dashboard-chart-visual .highcharts-area-series .highcharts-graph,
.biace-dashboard-chart-visual .highcharts-areaspline-series .highcharts-graph {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: biace-line-reveal 1.05s ease-out forwards;
}

.biace-dashboard-chart-visual .highcharts-pie-series .highcharts-point {
    transform-box: fill-box;
    transform-origin: center;
    animation: biace-radial-pop .62s cubic-bezier(.2,.85,.25,1) both;
}

.biace-dashboard-freshness.fresh {
    animation: biace-live-pulse 1.8s ease-in-out infinite;
}

.grid-stack-item-content:hover {
    transform: translateY(-1px);
    transition: transform .18s ease, box-shadow .18s ease;
}

@media (prefers-reduced-motion: reduce) {
    .biace-dashboard-grid-zone .grid-stack-item-content,
    .biace-dashboard-chart-visual .highcharts-column-series .highcharts-point,
    .biace-dashboard-chart-visual .highcharts-bar-series .highcharts-point,
    .biace-dashboard-chart-visual .highcharts-line-series .highcharts-graph,
    .biace-dashboard-chart-visual .highcharts-spline-series .highcharts-graph,
    .biace-dashboard-chart-visual .highcharts-area-series .highcharts-graph,
    .biace-dashboard-chart-visual .highcharts-areaspline-series .highcharts-graph,
    .biace-dashboard-chart-visual .highcharts-pie-series .highcharts-point,
    .biace-dashboard-freshness.fresh {
        animation: none !important;
        transition: none !important;
    }
}

/* Kart filtre paneli: modal/popover olarak overlay katmaninda acilir; karti asagi itmez ve kart disina tasabilir. */
.biace-dashboard-card-filter-popover.mud-popover {
    width: min(720px, 94vw);
    max-height: 78vh;
    overflow: auto;
    padding: 0;
    border-radius: var(--acex-radius-xl);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--acex-shadow-4);
    background: var(--mud-palette-surface);
}

/* ========================================================================== */
/* PREMIUM WORKSPACE V4.3                                                     */
/* GridStack kart dugumleri JS/ucuncu taraf kabugunda yasadigi icin bu blok   */
/* bilerek globaldir. Toolbar, sayfa rayi ve canvas chrome stilleri ise ilgili */
/* Razor bilesenlerinin scoped CSS dosyalarindadir.                            */
/* ========================================================================== */

#biace-dashboard-stage {
    padding: 20px 24px 32px;
    color: var(--biace-theme-text, var(--acex-text));
    background:
        radial-gradient(circle at 82% -12%, color-mix(in srgb, var(--biace-accent-primary) 7%, transparent), transparent 34%),
        var(--biace-theme-page) !important;
}

#biace-dashboard-stage .biace-dashboard-canvas-surface {
    padding: 14px !important;
    border-radius: 20px !important;
}

.grid-stack:where(.biace-dashboard-grid-zone) {
    background-clip: padding-box !important;
}

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content {
    border: 1px solid color-mix(in srgb, var(--biace-card-border, var(--biace-theme-border)) 88%, transparent) !important;
    border-top-width: 1px !important;
    background-color: var(--biace-card-background, var(--biace-theme-card, var(--acex-surface))) !important;
    box-shadow:
        0 1px 2px rgba(var(--acex-shadow-rgb), .045),
        0 14px 34px -24px rgba(var(--acex-shadow-rgb), .28) !important;
    transition:
        border-color var(--acex-dur-base) var(--acex-ease),
        box-shadow var(--acex-dur-base) var(--acex-ease),
        transform var(--acex-dur-base) var(--acex-ease) !important;
}

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content::before {
    position: absolute;
    z-index: 2;
    inset: 0 18% auto 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--biace-accent-primary) 20%, transparent), transparent);
    content: "";
    pointer-events: none;
}

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content:hover,
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content:focus-within {
    border-color: color-mix(in srgb, var(--biace-accent-primary) 24%, var(--biace-card-border, var(--biace-theme-border))) !important;
    box-shadow:
        0 2px 4px rgba(var(--acex-shadow-rgb), .055),
        0 20px 42px -28px rgba(var(--acex-shadow-rgb), .38) !important;
}

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content {
    border-color: color-mix(in srgb, var(--biace-accent-primary) 55%, transparent) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--biace-accent-primary) 12%, transparent),
        0 28px 58px -26px rgba(var(--acex-shadow-rgb), .44) !important;
    opacity: .98;
}

.grid-stack:where(.biace-dashboard-grid-zone) .ui-resizable-handle {
    opacity: 0;
    transition: opacity var(--acex-dur-fast) var(--acex-ease);
}

.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item:hover .ui-resizable-handle,
.grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item:focus-within .ui-resizable-handle {
    opacity: 1;
}

.grid-stack-item-content .biace-dashboard-card-header {
    min-height: 50px;
    max-height: 50px;
    padding: 7px 10px;
    gap: 8px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--biace-card-border, var(--biace-theme-border)) 76%, transparent);
    background:
        linear-gradient(110deg, color-mix(in srgb, var(--biace-accent-primary) 3%, transparent), transparent 44%),
        color-mix(in srgb, var(--biace-card-background, var(--biace-theme-card)) 97%, var(--biace-theme-text) 1%) !important;
}

.biace-dashboard-card-icon {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--biace-accent-primary) 15%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--biace-accent-primary) 9%, transparent);
    color: var(--biace-accent-primary);
}

.biace-dashboard-card-icon .mud-icon-root {
    font-size: 17px;
}

.biace-dashboard-card-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.biace-dashboard-card-header .biace-dashboard-card-title {
    min-width: 0;
    overflow: hidden;
    color: var(--biace-card-text, var(--biace-theme-text)) !important;
    font-size: var(--acex-text-sm);
    font-weight: var(--acex-weight-bold);
    letter-spacing: -.01em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.biace-dashboard-card-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: var(--biace-card-muted, var(--biace-theme-muted));
    font-size: var(--acex-text-3xs);
    line-height: 1.2;
    white-space: nowrap;
}

.biace-dashboard-card-kind {
    overflow: hidden;
    color: inherit;
    font-size: inherit;
    font-weight: var(--acex-weight-medium);
    letter-spacing: .02em;
    text-overflow: ellipsis;
}

.biace-dashboard-card-meta-separator {
    color: color-mix(in srgb, var(--biace-card-muted, var(--biace-theme-muted)) 55%, transparent);
}

.biace-dashboard-card-header .biace-dashboard-freshness {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 3px;
    color: inherit;
    font-size: inherit;
}

.biace-dashboard-card-header .biace-dashboard-freshness .mud-icon-root {
    font-size: 10px;
}

.biace-dashboard-card-header .biace-dashboard-freshness span {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
}

.biace-dashboard-card-actions,
.biace-dashboard-card-actions.biace-dashboard-card-actions--hover {
    position: static;
    width: auto;
    height: 32px;
    max-width: none;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 1px 2px;
    overflow: visible;
    border: 0;
    border-radius: var(--acex-radius-md);
    background: transparent;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transform: translateX(4px);
    transition: opacity var(--acex-dur-fast) var(--acex-ease), transform var(--acex-dur-fast) var(--acex-ease);
}

.grid-stack-item:hover .biace-dashboard-card-actions,
.grid-stack-item:focus-within .biace-dashboard-card-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.biace-dashboard-card-actions .mud-icon-button-root,
.biace-dashboard-card-actions .mud-menu .mud-icon-button-root {
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 8px;
    color: var(--biace-card-muted, var(--biace-theme-muted));
}

.biace-dashboard-card-actions .mud-icon-button-root:hover,
.biace-dashboard-card-actions .mud-menu .mud-icon-button-root:hover {
    background: color-mix(in srgb, var(--biace-accent-primary) 9%, transparent);
    color: var(--biace-accent-primary);
}

.biace-dashboard-select {
    margin-left: -2px;
}

/* Tablo kurallari global dosyanin eski, genis kapsamli tablo secicilerinden sonra
   gelir. Sayisal hizalama bilesen tarafinda veri tipinden uretilir. */
.grid-stack-item-content .biace-responsive-table .biace-dashboard-table thead th {
    height: 38px;
    padding: 8px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--biace-accent-primary) 16%, var(--biace-card-border, var(--biace-theme-border))) !important;
    background: color-mix(in srgb, var(--biace-card-table-header, var(--biace-table-header)) 94%, var(--biace-accent-primary) 2%) !important;
    color: var(--biace-card-muted, var(--biace-theme-muted)) !important;
    font-size: var(--acex-text-2xs);
    font-weight: var(--acex-weight-bold);
    letter-spacing: .025em;
}

.grid-stack-item-content .biace-responsive-table .biace-dashboard-table tbody td {
    height: 34px;
    padding: 6px 12px;
    border-bottom-color: color-mix(in srgb, var(--biace-card-border, var(--biace-theme-border)) 68%, transparent) !important;
    font-size: var(--acex-text-xs);
    line-height: 1.3;
}

.grid-stack-item-content .biace-responsive-table .biace-table-cell--numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.biace-dashboard-theme-dark .grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content {
    box-shadow:
        0 1px 1px rgba(0, 0, 0, .28),
        0 18px 42px -24px rgba(0, 0, 0, .62) !important;
}

@media (hover: none) {
    .biace-dashboard-card-actions,
    .biace-dashboard-card-actions.biace-dashboard-card-actions--hover {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

@media (max-width: 720px) {
    #biace-dashboard-stage {
        padding: 8px 8px 20px;
    }

    #biace-dashboard-stage .biace-dashboard-canvas-surface {
        padding: 8px !important;
        border-radius: var(--acex-radius-lg) !important;
    }

    .grid-stack-item-content .biace-dashboard-card-header {
        min-height: 46px;
        max-height: 46px;
        padding: 6px 8px;
    }

    .biace-dashboard-card-icon {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .grid-stack:where(.biace-dashboard-grid-zone) > .grid-stack-item > .grid-stack-item-content,
    .grid-stack:where(.biace-dashboard-grid-zone) .ui-resizable-handle,
    .biace-dashboard-card-actions {
        transition: none !important;
    }
}

.biace-dashboard-popover-dark.mud-popover {
    color: #e7eef7 !important;
    border-color: rgba(45, 212, 191, .20) !important;
    background: #151b23 !important;
    box-shadow: 0 26px 68px rgba(0, 0, 0, .55) !important;
}

.biace-dashboard-popover-dark .mud-typography,
.biace-dashboard-popover-dark .mud-input,
.biace-dashboard-popover-dark .mud-select-input,
.biace-dashboard-popover-dark .mud-input-label,
.biace-dashboard-popover-dark .mud-switch-label,
.biace-dashboard-popover-dark .mud-input-helper-text,
.biace-dashboard-popover-dark .mud-input-adornment,
.biace-dashboard-popover-dark .mud-icon-root {
    color: #e7eef7 !important;
}

.biace-dashboard-popover-dark .mud-secondary-text,
.biace-dashboard-popover-dark .mud-typography-color-secondary {
    color: #aebdce !important;
}

.biace-dashboard-popover-dark .mud-input-outlined-border {
    border-color: rgba(174, 189, 206, .32) !important;
}

.biace-dashboard-popover-dark .mud-divider {
    border-color: rgba(174, 189, 206, .18) !important;
}

.biace-dashboard-select-popover-dark.mud-popover {
    color: #e7eef7 !important;
    border: 1px solid rgba(45, 212, 191, .20) !important;
    background: #151b23 !important;
    box-shadow: 0 20px 52px rgba(0, 0, 0, .52) !important;
}

.biace-dashboard-select-popover-dark .mud-list,
.biace-dashboard-select-popover-dark .mud-list-item,
.biace-dashboard-select-popover-dark .mud-list-item-text,
.biace-dashboard-select-popover-dark .mud-icon-root {
    color: #e7eef7 !important;
    background-color: transparent;
}

.biace-dashboard-select-popover-dark .mud-list-item:hover,
.biace-dashboard-select-popover-dark .mud-list-item.mud-selected-item {
    color: #f8fafc !important;
    background: rgba(45, 212, 191, .14) !important;
}

/* Kart ayarlari da kart akisini buyutmez; tum veri/grafik alani gorunur kalir. */
.biace-dashboard-card-options-popover.mud-popover {
    width: min(680px, 94vw);
    max-height: 82vh;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--acex-radius-lg);
    background: var(--mud-palette-surface);
}

.biace-dashboard-card-options-panel {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 18px;
}

.biace-dashboard-card-options-head {
    order: -2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.biace-dashboard-data-fields-panel {
    order: -1;
    padding: 4px 0 10px;
}

.biace-dashboard-data-fields-popover.mud-popover {
    width: min(440px, 94vw);
    max-height: 76vh;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--acex-radius-lg);
    background: var(--mud-palette-surface);
}

.biace-dashboard-data-fields-popup {
    display: grid;
    gap: 14px;
    padding: 16px 18px 18px;
}

.biace-chart-palette-preview {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    border: 1px solid rgba(100, 116, 139, .20);
    border-radius: var(--acex-radius-lg);
    background: rgba(148, 163, 184, .06);
}

.biace-chart-palette-preview > span {
    width: clamp(18px, 2.2vw, 28px);
    aspect-ratio: 1;
    border-radius: var(--acex-radius-sm);
    background: var(--biace-palette-color);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 3px 8px rgba(15, 23, 42, .12);
}

.biace-dashboard-popover-dark .biace-chart-palette-preview {
    border-color: rgba(174, 189, 206, .22);
    background: rgba(255, 255, 255, .035);
}

.biace-chart-custom-colors {
    padding: 10px 12px;
    border: 1px solid rgba(100, 116, 139, .20);
    border-radius: var(--acex-radius-lg);
    background: rgba(148, 163, 184, .055);
}

.biace-chart-custom-colors-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.biace-chart-custom-color-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(34px, 1fr));
    gap: 7px;
    margin: 7px 0 5px;
}

.biace-chart-custom-color {
    display: grid;
    place-items: center;
    gap: 2px;
    color: inherit;
    font-size: var(--acex-text-3xs);
    font-weight: var(--acex-weight-bold);
}

.biace-chart-custom-color input[type="color"] {
    width: 100%;
    min-width: 32px;
    height: 32px;
    padding: 2px;
    cursor: pointer;
    border: 1px solid rgba(100, 116, 139, .28);
    border-radius: var(--acex-radius-md);
    background: transparent;
}

.biace-chart-custom-color input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.biace-chart-custom-color input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: var(--acex-radius-sm);
}

.biace-dashboard-popover-dark .biace-chart-custom-colors {
    border-color: rgba(174, 189, 206, .22);
    background: rgba(255, 255, 255, .035);
}

@media (max-width: 620px) {
    .biace-chart-custom-color-grid {
        grid-template-columns: repeat(4, minmax(38px, 1fr));
    }
}

/*
 * Pivot compact chrome is rendered through MudPopoverProvider, outside the
 * scoped component tree. Keep these portal-facing rules global.
 */
.acex-pivot-workbench.compact-chrome {
    position: relative;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.acex-pivot-workbench.compact-chrome .pivot-body,
.acex-pivot-workbench.compact-chrome .pivot-stage {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.acex-pivot-workbench.compact-chrome .pivot-stage {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 0;
}

.acex-pivot-workbench.compact-chrome .pivot-grid-wrap {
    width: 100%;
    height: 100% !important;
    max-height: none !important;
    border-radius: var(--acex-radius-sm);
    scrollbar-gutter: auto;
}

.acex-pivot-workbench.compact-chrome .pivot-grid {
    width: max-content;
    min-width: 100%;
}

.pivot-compact-controls {
    position: absolute;
    z-index: 30;
    top: 8px;
    right: 8px;
}

.pivot-compact-trigger {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--acex-line);
    border-radius: var(--acex-radius-md);
    background: rgba(255, 255, 255, .94);
    color: var(--acex-text-muted);
    cursor: pointer;
    box-shadow: var(--acex-shadow-3);
    backdrop-filter: blur(10px);
}

.pivot-compact-trigger:hover {
    border-color: #79aee0;
    background: #eef6ff;
    color: #075fb3;
}

.pivot-compact-popover {
    display: grid;
    gap: 12px;
    width: min(390px, calc(100vw - 40px));
    max-height: min(620px, calc(100vh - 130px));
    padding: 14px;
    overflow: auto;
    border: 1px solid #d8e2ef;
    border-radius: var(--acex-radius-lg);
    background: rgba(255, 255, 255, .98);
    color: var(--acex-text);
    box-shadow: var(--acex-shadow-4);
    backdrop-filter: blur(18px);
}

.pivot-compact-popover > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pivot-compact-popover > header span,
.pivot-compact-popover > header strong {
    display: block;
}

.pivot-compact-popover > header span {
    color: var(--acex-text-muted);
    font-size: var(--acex-text-2xs);
    font-weight: var(--acex-weight-bold);
    text-transform: uppercase;
}

.pivot-compact-popover > header strong {
    font-size: var(--acex-text-md);
}

.pivot-compact-popover button,
.pivot-compact-popover a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid #d8e2ef;
    border-radius: var(--acex-radius-md);
    background: var(--acex-surface);
    color: var(--acex-text-muted);
    font: inherit;
    font-size: var(--acex-text-xs);
    font-weight: var(--acex-weight-semibold);
    text-decoration: none;
    cursor: pointer;
}

.pivot-compact-popover > header button {
    width: 34px;
    min-height: 34px;
    padding: 0;
}

.pivot-compact-popover button:hover,
.pivot-compact-popover a:hover,
.pivot-compact-popover .selected {
    border-color: #84b8e8;
    background: #eaf4ff;
    color: #075fb3;
}

.pivot-compact-view-buttons,
.pivot-compact-actions,
.pivot-compact-choice-grid,
.pivot-compact-popover > footer {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pivot-compact-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pivot-compact-fields {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pivot-compact-fields label {
    display: grid;
    gap: 5px;
    color: var(--acex-text-muted);
    font-size: var(--acex-text-2xs);
    font-weight: var(--acex-weight-bold);
    text-transform: uppercase;
}

.pivot-compact-fields select {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0 9px;
    border: 1px solid var(--acex-line);
    border-radius: var(--acex-radius-md);
    background: var(--acex-surface);
    color: var(--acex-text);
    text-transform: none;
}

.pivot-compact-popover > footer {
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.biace-dashboard-card-filter-popover .biace-dashboard-card-filter-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 20px;
}

.biace-dashboard-card-filter-popover .biace-dashboard-card-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.biace-dashboard-card-filter-popover .biace-dashboard-card-filter-head .mud-typography {
    font-size: var(--acex-text-md);
    font-weight: var(--acex-weight-bold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.biace-dashboard-card-filter-popover .biace-dashboard-inline-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.biace-dashboard-card-filter-popover .biace-dashboard-inline-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: var(--acex-radius-lg);
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
}

.biace-dashboard-card-filter-popover .biace-dashboard-inline-filter-row > .mud-input-control {
    flex: 1 1 180px;
    min-width: 150px;
    margin: 0;
}

.biace-dashboard-card-filter-popover .biace-dashboard-inline-filter-row > .mud-button-root {
    margin-left: auto;
}

.biace-dashboard-card-filter-popover .mud-divider {
    margin: 4px 0 0;
}

.biace-dashboard-card-filter-popover > .biace-dashboard-card-filter-panel > .mud-typography-caption {
    font-weight: var(--acex-weight-semibold);
    color: var(--mud-palette-text-secondary);
}

.biace-dashboard-card-filter-popover .d-flex.justify-end {
    padding-top: 6px;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 2px;
}