/* ═══════════════════════════════════════════════════════════════
   ErpPos — Özgün Tasarım Sistemi  v3.0
   Material 3 Expressive esinli, tamamen özgün
   Aydınlık ↔ Karanlık mod tam uyumlu
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts & Local Material Icons ──────────────────────── */
/* ── Google Fonts & Local Material Icons Fallback ─────────────── */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url('../_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2') format('woff2 supports variations'),
         url('/_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2') format('woff2 supports variations'),
         url('../_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2') format('woff2'),
         url('/_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2') format('woff2');
}

@font-face {
    font-family: 'Material Symbols';
    font-style: normal;
    font-weight: 100 700;
    src: url('../_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2') format('woff2 supports variations'),
         url('/_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2') format('woff2 supports variations'),
         url('../_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2') format('woff2'),
         url('/_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2') format('woff2');
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.rzi,
.rz-icon,
.erp-nav-icon,
.erp-nav-subicon {
    font-family: 'Material Symbols Outlined', 'Material Symbols', 'Material Icons', 'Material Icons Outlined', sans-serif !important;
    font-weight: normal;
    font-style: normal !important;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga' 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
}

html, body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    padding: 0;
}


/* ═══════════════════════════════════════════════════════════════
   TOKEN SİSTEMİ — Kök CSS Değişkenleri
   Varsayılan: KARANLIK MOD
   html seçicisi :root'tan daha spesifik → Radzen'i override eder
   ═══════════════════════════════════════════════════════════════ */

/* ── Değişmeyen sabitler (her iki temada aynı) ─── */
:root {
    --transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   380ms cubic-bezier(0.4, 0, 0.2, 1);
    --radius-xs:  4px;
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full: 9999px;
    --sidebar-width: 260px;
    --header-height: 60px;
}

/* ── KARANLIK MOD (varsayılan) ───────────────────────────────────
   html[data-theme="dark"] + fallback olarak sadece html
   Bu seçiciler Radzen'in :root bloklarından daha spesifik
   ─────────────────────────────────────────────────────────────── */
html,
html[data-theme="dark"],
html.theme-dark {
    /* Yüzey renkleri */
    --surface-0:       #09090f;
    --surface-1:       #111118;
    --surface-2:       #18181f;
    --surface-3:       #1e1e27;
    --surface-4:       #25252e;
    --surface-5:       #2d2d38;
    --surface-border:  #2e2e3a;
    --surface-divider: #1d1d26;

    /* Metin renkleri */
    --text-high:     #ededf4;
    --text-mid:      #a8a8c0;
    --text-low:      #6c6c84;
    --text-hint:     #3f3f52;
    --text-on-accent:#ffffff;

    /* Aksan */
    --accent:        #7c6ff7;
    --accent-bright: #9d94fa;
    --accent-dim:    #4e45b8;
    --accent-tint:   rgba(124,111,247,0.12);
    --accent-glow:   rgba(124,111,247,0.25);

    /* Durum renkleri */
    --state-success:       #34c678;
    --state-success-tint:  rgba(52,198,120,0.12);
    --state-warning:       #f5a623;
    --state-warning-tint:  rgba(245,166,35,0.12);
    --state-danger:        #f25555;
    --state-danger-tint:   rgba(242,85,85,0.12);
    --state-info:          #38bdf8;
    --state-info-tint:     rgba(56,189,248,0.12);

    /* Gölge */
    --shadow-xs:  0 1px 3px rgba(0,0,0,0.3);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 20px rgba(0,0,0,0.55);
    --shadow-lg:  0 8px 40px rgba(0,0,0,0.7);
    --shadow-pop: 0 16px 60px rgba(0,0,0,0.8);

    /* ── Radzen değişkenleri — CSS içinden override (JS'e gerek kalmadan) */
    --rz-base-background-color:         #111118;
    --rz-secondary-background-color:    #18181f;
    --rz-tertiary-background-color:     #1e1e27;
    --rz-panel-background-color:        #18181f;
    --rz-text-color:                    #ededf4;
    --rz-text-title-color:              #ededf4;
    --rz-text-subtitle-color:           #a8a8c0;
    --rz-text-body1-color:              #ededf4;
    --rz-text-body2-color:              #a8a8c0;
    --rz-text-caption-color:            #6c6c84;
    --rz-text-disabled-color:           #3f3f52;
    --rz-header-background-color:       #18181f;
    --rz-sidebar-background-color:      #18181f;
    --rz-sidebar-color:                 #ededf4;
    --rz-navigation-item-color:         #a8a8c0;
    --rz-navigation-item-hover-color:   #ededf4;
    --rz-navigation-item-active-color:  #9d94fa;
    --rz-navigation-item-background:                transparent;
    --rz-navigation-item-hover-background:          #1e1e27;
    --rz-navigation-item-active-background:         rgba(124,111,247,0.12);
    --rz-border-color:                  #2e2e3a;
    --rz-grid-header-background-color:              #1e1e27;
    --rz-grid-row-hover-background-color:           #1e1e27;
    --rz-grid-row-selected-background-color:        rgba(124,111,247,0.12);
    --rz-overlay-background-color:      rgba(0,0,0,0.55);
    --rz-dialog-background-color:       #18181f;
    --rz-dialog-title-background-color: #1e1e27;
    --rz-dialog-title-color:            #ededf4;
    --rz-dialog-close-color:            #a8a8c0;
    --rz-dialog-close-hover-color:      #ededf4;
    --rz-chart-axis-label-color:        #a8a8c0;
    --rz-chart-axis-color:              #2e2e3a;
    --rz-chart-grid-line-color:         rgba(255, 255, 255, 0.08);
    --rz-dropdown-background-color:     #18181f;
    --rz-input-background-color:        #25252e;
    --rz-input-border-color:            #2e2e3a;
    --rz-input-color:                   #ededf4;
    --rz-input-focus-border-color:      #7c6ff7;
    --rz-input-placeholder-color:       #3f3f52;
    --rz-badge-background-color:        #25252e;
    --rz-badge-color:                   #ededf4;
    --rz-tooltip-background-color:      #2d2d38;
    --rz-tooltip-color:                 #ededf4;
    --rz-primary:                       #7c6ff7;
    --rz-primary-light:                 rgba(124,111,247,0.12);
    --rz-base-100: #1e1e27;
    --rz-base-200: #25252e;
    --rz-base-300: #2d2d38;
    --rz-base-400: #3a3a48;
    --rz-base-500: #6c6c84;
    --rz-base-600: #a8a8c0;
    --rz-base-700: #c8c8dc;
    --rz-base-900: #ededf4;
}

/* ── AYDINLIK MOD ────────────────────────────────────────────────
   html[data-theme="light"] veya html.theme-light
   ─────────────────────────────────────────────────────────────── */
html[data-theme="light"],
html.theme-light {
    /* Yüzey renkleri */
    --surface-0:       #f0f0f8;
    --surface-1:       #f7f7fc;
    --surface-2:       #ffffff;
    --surface-3:       #eeeef6;
    --surface-4:       #e4e4ee;
    --surface-5:       #ffffff;
    --surface-border:  #dcdcec;
    --surface-divider: #ebebf5;

    /* Metin renkleri */
    --text-high:     #1a1a2e;
    --text-mid:      #4a4a6a;
    --text-low:      #7a7a9a;
    --text-hint:     #adadc8;
    --text-on-accent:#ffffff;

    /* Aksan */
    --accent:        #5a4fcf;
    --accent-bright: #7c6ff7;
    --accent-dim:    #3d33a0;
    --accent-tint:   rgba(90,79,207,0.10);
    --accent-glow:   rgba(90,79,207,0.20);

    /* Durum renkleri */
    --state-success:       #1a9e56;
    --state-success-tint:  rgba(26,158,86,0.10);
    --state-warning:       #c47d00;
    --state-warning-tint:  rgba(196,125,0,0.10);
    --state-danger:        #d63838;
    --state-danger-tint:   rgba(214,56,56,0.10);
    --state-info:          #0284c7;
    --state-info-tint:     rgba(2,132,199,0.10);

    /* Gölge */
    --shadow-xs:  0 1px 3px rgba(60,60,100,0.08);
    --shadow-sm:  0 2px 8px rgba(60,60,100,0.10);
    --shadow-md:  0 4px 20px rgba(60,60,100,0.13);
    --shadow-lg:  0 8px 40px rgba(60,60,100,0.18);
    --shadow-pop: 0 16px 60px rgba(60,60,100,0.22);

    /* ── Radzen değişkenleri — CSS içinden override */
    --rz-base-background-color:         #f7f7fc;
    --rz-secondary-background-color:    #ffffff;
    --rz-tertiary-background-color:     #eeeef6;
    --rz-panel-background-color:        #ffffff;
    --rz-text-color:                    #1a1a2e;
    --rz-text-title-color:              #1a1a2e;
    --rz-text-subtitle-color:           #4a4a6a;
    --rz-text-body1-color:              #1a1a2e;
    --rz-text-body2-color:              #4a4a6a;
    --rz-text-caption-color:            #7a7a9a;
    --rz-text-disabled-color:           #adadc8;
    --rz-header-background-color:       #ffffff;
    --rz-sidebar-background-color:      #ffffff;
    --rz-sidebar-color:                 #1a1a2e;
    --rz-navigation-item-color:         #4a4a6a;
    --rz-navigation-item-hover-color:   #1a1a2e;
    --rz-navigation-item-active-color:  #5a4fcf;
    --rz-navigation-item-background:                transparent;
    --rz-navigation-item-hover-background:          #eeeef6;
    --rz-navigation-item-active-background:         rgba(90,79,207,0.10);
    --rz-border-color:                  #dcdcec;
    --rz-grid-header-background-color:              #eeeef6;
    --rz-grid-row-hover-background-color:           #eeeef6;
    --rz-grid-row-selected-background-color:        rgba(90,79,207,0.10);
    --rz-overlay-background-color:      rgba(0,0,0,0.35);
    --rz-dialog-background-color:       #ffffff;
    --rz-dialog-title-background-color: #eeeef6;
    --rz-dialog-title-color:            #1a1a2e;
    --rz-dialog-close-color:            #4a4a6a;
    --rz-dialog-close-hover-color:      #1a1a2e;
    --rz-chart-axis-label-color:        #4a4a6a;
    --rz-chart-axis-color:              #dcdcec;
    --rz-chart-grid-line-color:         rgba(0, 0, 0, 0.06);
    --rz-dropdown-background-color:     #ffffff;
    --rz-input-background-color:        #ffffff;
    --rz-input-border-color:            #dcdcec;
    --rz-input-color:                   #1a1a2e;
    --rz-input-focus-border-color:      #5a4fcf;
    --rz-input-placeholder-color:       #adadc8;
    --rz-badge-background-color:        #eeeef6;
    --rz-badge-color:                   #1a1a2e;
    --rz-tooltip-background-color:      #1a1a2e;
    --rz-tooltip-color:                 #ffffff;
    --rz-primary:                       #5a4fcf;
    --rz-primary-light:                 rgba(90,79,207,0.10);
    --rz-base-100: #eeeef6;
    --rz-base-200: #e4e4ee;
    --rz-base-300: #dcdcec;
    --rz-base-400: #adadc8;
    --rz-base-500: #7a7a9a;
    --rz-base-600: #4a4a6a;
    --rz-base-700: #2a2a4a;
    --rz-base-900: #1a1a2e;
}




/* ═══════════════════════════════════════════════════════════════
   TEMEL ELEMENTLER
   ═══════════════════════════════════════════════════════════════ */
html {
    background-color: var(--surface-1);
    color: var(--text-high);
    min-height: 100vh;
    transition:
        background-color var(--transition-normal),
        color var(--transition-normal);
}

body {
    background-color: var(--surface-1) !important;
    color: var(--text-high) !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    transition:
        background-color var(--transition-normal),
        color var(--transition-normal);
}

*, *::before, *::after {
    box-sizing: border-box;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--accent-bright); }

h1, h2, h3, h4, h5, h6 {
    color: var(--text-high);
    margin: 0;
}
h1:focus { outline: none; }

p { color: var(--text-mid); margin: 0; }
code { color: #f4846c; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.875em; }

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR — İnce ve temiz
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--surface-border);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-low); }

/* ═══════════════════════════════════════════════════════════════
   RADZEN LAYOUT OVERRIDES
   CSS token sistemi ile otomatik tema geçişi
   ═══════════════════════════════════════════════════════════════ */

/* ── Temel Layout ──────────────────────────────────────── */
.rz-layout,
.rz-layout > * {
    background: var(--surface-1) !important;
    color: var(--text-high) !important;
    transition: background var(--transition-normal), color var(--transition-normal) !important;
}

/* ── Header / Üst Çubuk ─────────────────────────────────── */
.rz-header,
.rz-layout .rz-header {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--surface-border) !important;
    box-shadow: var(--shadow-xs) !important;
    height: var(--header-height, 60px) !important;
    min-height: var(--header-height, 60px) !important;
    color: var(--text-high) !important;
    backdrop-filter: blur(8px);
    z-index: 100;
    transition:
        background var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal) !important;
}

/* ── Sidebar / Yan Panel ────────────────────────────────── */
.rz-sidebar,
.rz-layout .rz-sidebar {
    background: var(--surface-2) !important;
    border-right: 1px solid var(--surface-border) !important;
    box-shadow: var(--shadow-sm) !important;
    width: var(--sidebar-width, 260px) !important;
    min-width: var(--sidebar-width, 260px) !important;
    color: var(--text-high) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transition:
        background var(--transition-normal),
        border-color var(--transition-normal),
        width var(--transition-slow) !important;
}

/* ── Sidebar Logo & Brand ───────────────────────────────── */
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem 0.9rem;
    border-bottom: 1px solid var(--surface-divider);
    background: var(--surface-2);
}

.sidebar-logo-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent), var(--accent-dim));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px var(--accent-glow);
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.sidebar-logo:hover .sidebar-logo-icon {
    transform: scale(1.05);
}

.sidebar-logo-text {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-high);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.sidebar-logo-sub {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-low);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════════════════════════
   ERP NAV MENU (Material 3 Expressive - Global Tanım)
   ═══════════════════════════════════════════════════════════════ */

.erp-nav-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    user-select: none;
}

.erp-nav-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.6rem 0.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.erp-nav-scroll::-webkit-scrollbar {
    width: 4px;
}
.erp-nav-scroll::-webkit-scrollbar-thumb {
    background: var(--surface-border);
    border-radius: 99px;
}

.erp-nav-section {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-low);
    padding: 0.9rem 0.75rem 0.35rem;
    margin-top: 0.25rem;
}

.erp-nav-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    color: var(--text-mid);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
    text-decoration: none;
}

.erp-nav-link:hover {
    background: var(--surface-3);
    color: var(--text-high);
}

.erp-nav-link:hover .erp-nav-icon {
    color: var(--text-high);
}

.erp-nav-link.active {
    background: var(--accent-tint) !important;
    border-left-color: var(--accent) !important;
    color: var(--accent-bright) !important;
    font-weight: 600;
}

.erp-nav-link.active .erp-nav-icon {
    color: var(--accent) !important;
}

.erp-nav-link.has-active-child {
    color: var(--text-high);
}

.erp-nav-link.has-active-child .erp-nav-icon {
    color: var(--accent);
}

.erp-nav-icon {
    font-size: 1.25rem !important;
    color: var(--text-low);
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

.erp-nav-label {
    font-size: 0.86rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.erp-nav-arrow {
    font-size: 1.15rem !important;
    color: var(--text-low);
    transition: transform var(--transition-normal), color var(--transition-fast);
    margin-left: auto;
}

.erp-nav-arrow.rotated {
    transform: rotate(180deg);
}

.erp-nav-collapsible {
    display: flex;
    flex-direction: column;
}

.erp-nav-sublist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.25rem 0 0.25rem 0.9rem;
    margin-left: 1.4rem;
    border-left: 1.5px solid var(--surface-border);
    animation: sublistFade 0.15s ease-out;
}

@keyframes sublistFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.erp-nav-sublink {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text-mid);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.erp-nav-sublink:hover {
    background: var(--surface-3);
    color: var(--text-high);
}

.erp-nav-sublink:hover .erp-nav-subicon {
    color: var(--text-high);
}

.erp-nav-sublink.active {
    background: var(--accent-tint) !important;
    color: var(--accent-bright) !important;
    font-weight: 600;
}

.erp-nav-sublink.active .erp-nav-subicon {
    color: var(--accent) !important;
}

.erp-nav-subicon {
    font-size: 1.05rem !important;
    color: var(--text-low);
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

.erp-nav-footer {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--surface-divider);
    text-align: center;
    background: var(--surface-2);
}

.erp-nav-version {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-low);
    letter-spacing: 0.02em;
}

/* ── Theme Toggle Button ────────────────────────────────── */
.theme-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--surface-3);
    border: 1px solid var(--surface-border);
    color: var(--text-mid);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.theme-toggle-btn:hover {
    background: var(--surface-4);
    color: var(--accent-bright);
    border-color: var(--accent);
    transform: rotate(15deg) scale(1.05);
}

/* ── User Avatar ────────────────────────────────────────── */
.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent), var(--accent-dim));
    color: var(--text-on-accent);
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--accent-glow);
    transition: transform var(--transition-fast);
}

.user-avatar:hover {
    transform: scale(1.08);
}

/* ── Ana İçerik Alanı ───────────────────────────────────── */
.rz-body,
.rz-layout .rz-body {
    background: var(--surface-1) !important;
    color: var(--text-high) !important;
    transition:
        background var(--transition-normal),
        color var(--transition-normal) !important;
}

/* ═══════════════════════════════════════════════════════════════
   KART BİLEŞENİ
   ═══════════════════════════════════════════════════════════════ */
.rz-card {
    background: var(--surface-2) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-xs) !important;
    color: var(--text-high) !important;
    transition:
        background var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal) !important;
}

.rz-card:hover {
    box-shadow: var(--shadow-md) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PANEL MENÜ (Sidebar Nav - Material 3 Expressive)
   ═══════════════════════════════════════════════════════════════ */
.rz-panel-menu {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.rz-panel-menu .rz-navigation-item {
    margin-bottom: 2px !important;
}

.rz-panel-menu .rz-navigation-item-wrapper {
    border-radius: var(--radius-full) !important;
    padding: 0.52rem 0.9rem !important;
    margin: 2px 4px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: all var(--transition-fast) !important;
    display: flex !important;
    align-items: center !important;
}

.rz-panel-menu .rz-navigation-item-wrapper:hover {
    background: var(--surface-3) !important;
    border-color: var(--surface-divider) !important;
    transform: translateX(3px) !important;
}

.rz-panel-menu .rz-navigation-item-wrapper.active,
.rz-panel-menu .rz-navigation-item-wrapper.rz-state-active {
    background: var(--accent-tint) !important;
    border-color: rgba(124, 111, 247, 0.28) !important;
    box-shadow: 0 2px 8px var(--accent-glow) !important;
    transform: translateX(4px) !important;
}

.rz-panel-menu .rz-navigation-item-icon {
    font-size: 1.15rem !important;
    width: 1.35rem !important;
    margin-right: 0.6rem !important;
    color: var(--text-low) !important;
    transition: color var(--transition-fast), transform var(--transition-fast) !important;
}

.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon {
    color: var(--accent-bright) !important;
    transform: scale(1.1) !important;
}

.rz-panel-menu .rz-navigation-item-wrapper.active .rz-navigation-item-icon,
.rz-panel-menu .rz-navigation-item-wrapper.rz-state-active .rz-navigation-item-icon {
    color: var(--accent) !important;
}

.rz-panel-menu .rz-navigation-item-text {
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    color: var(--text-mid) !important;
    letter-spacing: 0.01em !important;
    transition: color var(--transition-fast) !important;
}

.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text {
    color: var(--text-high) !important;
    font-weight: 600 !important;
}

.rz-panel-menu .rz-navigation-item-wrapper.active .rz-navigation-item-text,
.rz-panel-menu .rz-navigation-item-wrapper.rz-state-active .rz-navigation-item-text {
    color: var(--accent-bright) !important;
    font-weight: 700 !important;
}

.rz-panel-menu .rz-navigation-item-expand-icon {
    color: var(--text-low) !important;
    transition: color var(--transition-fast), transform var(--transition-normal) !important;
}

.rz-panel-menu .rz-navigation-sub-menu {
    padding-left: 0.75rem !important;
    margin: 2px 0 4px !important;
    border-left: 1px dashed var(--surface-border) !important;
    margin-left: 1.25rem !important;
}

.rz-panel-menu .rz-navigation-sub-menu .rz-navigation-item-wrapper {
    padding: 0.42rem 0.75rem !important;
    font-size: 0.8rem !important;
}


/* ═══════════════════════════════════════════════════════════════
   VERİ IZGARASI (DataGrid)
   ═══════════════════════════════════════════════════════════════ */
.rz-data-grid,
.rz-grid-table {
    background: var(--surface-2) !important;
    color: var(--text-high) !important;
    border-color: var(--surface-border) !important;
    transition: background var(--transition-normal) !important;
}

.rz-data-grid-header,
.rz-grid-table thead th,
.rz-column-header {
    background: var(--surface-3) !important;
    color: var(--text-low) !important;
    border-bottom: 1px solid var(--surface-border) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    transition:
        background var(--transition-normal),
        color var(--transition-normal) !important;
}

.rz-data-grid-data td,
.rz-grid-table tbody td {
    color: var(--text-high) !important;
    border-color: var(--surface-divider) !important;
    background: var(--surface-2) !important;
    transition:
        background var(--transition-fast),
        color var(--transition-fast) !important;
}

.rz-data-grid-data tr:hover td,
.rz-grid-table tbody tr:hover td {
    background: var(--surface-3) !important;
}

.rz-data-grid-data tr.rz-state-selected td,
.rz-grid-table tbody tr.rz-state-selected td {
    background: var(--accent-tint) !important;
    color: var(--text-high) !important;
}

/* Sayfalama */
.rz-pager {
    background: var(--surface-2) !important;
    border-top: 1px solid var(--surface-border) !important;
    color: var(--text-mid) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DİYALOG ve OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.rz-dialog-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.rz-dialog {
    background: var(--surface-2) !important;
    color: var(--text-high) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-pop) !important;
    overflow: hidden !important;
    transition:
        background var(--transition-normal),
        color var(--transition-normal) !important;
}

.rz-dialog-titlebar {
    background: var(--surface-3) !important;
    color: var(--text-high) !important;
    border-bottom: 1px solid var(--surface-border) !important;
    padding: 0.875rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.rz-dialog-title {
    background: transparent !important;
    color: var(--text-high) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 !important;
}

.rz-dialog-titlebar-close {
    background: transparent !important;
    border: none !important;
    color: var(--text-mid) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 0 0 0.5rem !important;
    line-height: 1 !important;
    transition: background var(--transition-fast), color var(--transition-fast) !important;
}

.rz-dialog-titlebar-close:hover {
    background: var(--surface-4) !important;
    color: var(--text-high) !important;
}

.rz-dialog-titlebar-close .rzi-times {
    font-size: 1.15rem !important;
    color: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rz-dialog-content {
    background: var(--surface-2) !important;
    color: var(--text-high) !important;
    padding: 1.25rem !important;
}

.rz-dialog-footer {
    background: var(--surface-3) !important;
    border-top: 1px solid var(--surface-border) !important;
    padding: 0.85rem 1.25rem !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

.rz-overlay,
.rz-dialog-mask {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   RADZEN CHART — Dark/Light Mod Kontrast & Okunabilirlik
   ═══════════════════════════════════════════════════════════════ */
.rz-chart text.rz-tick-text,
.rz-chart .rz-tick-text {
    fill: var(--text-mid, #a8a8c0) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    opacity: 0.9 !important;
}
.rz-chart .rz-axis {
    stroke: var(--surface-border, #2e2e3a) !important;
}
.rz-chart .rz-grid-line {
    stroke: var(--surface-border, rgba(255, 255, 255, 0.12)) !important;
    stroke-dasharray: 4 4;
}
.rz-chart .rz-legend-item-text {
    fill: var(--text-high, #ededf4) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
.rz-chart .rz-series-item {
    transition: opacity var(--transition-fast, 120ms);
}
.rz-chart .rz-series-item:hover {
    filter: brightness(1.15);
}

/* ═══════════════════════════════════════════════════════════════
   GİRİŞ ALANLARI (Inputs)
   ═══════════════════════════════════════════════════════════════ */
.rz-textbox,
.rz-password,
.rz-dropdown,
.rz-multiselect,
.rz-autocomplete,
.rz-numeric,
.rz-textarea {
    background: var(--surface-5) !important;
    color: var(--text-high) !important;
    border-color: var(--surface-border) !important;
    border-radius: var(--radius-sm) !important;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        color var(--transition-fast) !important;
}

.rz-textbox:focus,
.rz-password:focus,
.rz-numeric:focus,
.rz-textarea:focus,
.rz-dropdown:focus-within,
.rz-autocomplete:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-tint) !important;
    outline: none !important;
}

.rz-textbox::placeholder,
.rz-textarea::placeholder {
    color: var(--text-hint) !important;
}

/* Form label */
.rz-form-field label,
.rz-form-field .rz-float-label-wrapper label {
    color: var(--text-mid) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    transition: color var(--transition-fast) !important;
}

.rz-form-field:focus-within label {
    color: var(--accent) !important;
}

/* Dropdown trigger */
.rz-dropdown .rz-dropdown-trigger,
.rz-dropdown .rz-dropdown-label {
    color: var(--text-high) !important;
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   POPUP / DROPDOWN LİSTE
   ═══════════════════════════════════════════════════════════════ */
.rz-popup,
.rz-popup-wrapper,
.rz-dropdown-popup,
.rz-multiselect-popup {
    background: var(--surface-2) !important;
    border: 1px solid var(--surface-border) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text-high) !important;
    border-radius: var(--radius-md) !important;
    transition:
        background var(--transition-normal),
        border-color var(--transition-normal) !important;
}

.rz-dropdown-item,
.rz-multiselect-item,
.rz-list-item {
    color: var(--text-high) !important;
    border-radius: var(--radius-xs) !important;
    transition:
        background var(--transition-fast),
        color var(--transition-fast) !important;
}

.rz-dropdown-item:hover,
.rz-multiselect-item:hover,
.rz-list-item:hover {
    background: var(--surface-3) !important;
    color: var(--text-high) !important;
}

.rz-dropdown-item.rz-state-highlight,
.rz-multiselect-item.rz-state-highlight {
    background: var(--accent-tint) !important;
    color: var(--accent-bright) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SEKMELER (Tabs)
   ═══════════════════════════════════════════════════════════════ */
.rz-tabview,
.rz-tabview-panels {
    background: var(--surface-2) !important;
    color: var(--text-high) !important;
    transition: background var(--transition-normal) !important;
}

.rz-tabview-nav {
    background: var(--surface-3) !important;
    border-bottom: 1px solid var(--surface-border) !important;
    transition: background var(--transition-normal) !important;
}

.rz-tabview-nav li a,
.rz-tabview-nav .rz-tabview-nav-link {
    background: transparent !important;
    color: var(--text-mid) !important;
    border-color: transparent !important;
    font-weight: 500 !important;
    transition: color var(--transition-fast) !important;
}

.rz-tabview-nav li a:hover,
.rz-tabview-nav .rz-tabview-nav-link:hover {
    color: var(--text-high) !important;
}

.rz-tabview-nav li.rz-tabview-selected a,
.rz-tabview-nav .rz-tabview-selected .rz-tabview-nav-link {
    color: var(--accent-bright) !important;
    border-bottom-color: var(--accent) !important;
    border-bottom-width: 2px !important;
    background: transparent !important;
    font-weight: 600 !important;
}

.rz-tabview-panel {
    background: var(--surface-2) !important;
    color: var(--text-high) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROZETLER (Badges)
   ═══════════════════════════════════════════════════════════════ */
.rz-badge {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   BİLDİRİMLER / TOAST
   ═══════════════════════════════════════════════════════════════ */
.rz-notification {
    background: var(--surface-2) !important;
    border: 1px solid var(--surface-border) !important;
    color: var(--text-high) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--radius-md) !important;
    transition:
        background var(--transition-normal),
        color var(--transition-normal) !important;
}

.rz-notification .rz-notification-title {
    color: var(--text-high) !important;
    font-weight: 700 !important;
}

.rz-notification .rz-notification-detail {
    color: var(--text-mid) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DÜĞMELER (Buttons)
   ═══════════════════════════════════════════════════════════════ */

/* Light butonlar — her iki modda metin kaybolmasın */
.rz-button {
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast) !important;
    border-radius: var(--radius-sm) !important;
}

.rz-button.rz-light,
.rz-button.rz-secondary {
    background: var(--surface-3) !important;
    border-color: var(--surface-border) !important;
    color: var(--text-high) !important;
}

.rz-button.rz-light:hover,
.rz-button.rz-secondary:hover {
    background: var(--surface-4) !important;
    color: var(--text-high) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════════════════════════ */
.rz-tooltip {
    background: var(--surface-4) !important;
    color: var(--text-high) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.78rem !important;
    box-shadow: var(--shadow-md) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR TOGGLE
   ═══════════════════════════════════════════════════════════════ */
.rz-sidebar-toggle {
    color: var(--text-mid) !important;
    transition: color var(--transition-fast) !important;
}
.rz-sidebar-toggle:hover {
    color: var(--text-high) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BÖLÜM BAŞLIKLARI (Section Titles — Sidebar)
   ═══════════════════════════════════════════════════════════════ */
.section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-hint);
    padding: 0.85rem 1rem 0.3rem;
    transition: color var(--transition-normal);
    user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   TEMA GEÇİŞ BUTONU
   ═══════════════════════════════════════════════════════════════ */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-mid);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    background: var(--accent-tint);
    border-color: var(--accent);
    color: var(--accent-bright);
    transform: rotate(15deg);
}

/* ═══════════════════════════════════════════════════════════════
   KULLANICI AVATAR
   ═══════════════════════════════════════════════════════════════ */
.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent), var(--accent-dim));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-accent);
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--accent-glow);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — LOGO ALANI
   ═══════════════════════════════════════════════════════════════ */
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--surface-border);
    margin-bottom: 0.25rem;
    text-decoration: none;
    flex-shrink: 0;
    transition: border-color var(--transition-normal);
}

.sidebar-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent), var(--accent-dim));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px var(--accent-glow);
}

.sidebar-logo-text {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-high);
    line-height: 1.2;
    transition: color var(--transition-normal);
}

.sidebar-logo-sub {
    font-size: 0.67rem;
    color: var(--text-low);
    font-weight: 400;
    transition: color var(--transition-normal);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — MENÜ SARMALAYICI ve ALT BILGI
   ═══════════════════════════════════════════════════════════════ */
.sidebar-menu-wrapper {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.sidebar-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--surface-border);
    font-size: 0.67rem;
    color: var(--text-hint);
    text-align: center;
    background: var(--surface-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        background var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal);
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD KPI KARTLARI
   ═══════════════════════════════════════════════════════════════ */
.kpi-card {
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal) !important;
    overflow: hidden;
    position: relative;
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md) !important;
}

.kpi-value {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    margin: 0.3rem 0;
    color: var(--text-high);
    letter-spacing: -0.02em;
    transition: color var(--transition-normal);
}

.kpi-label {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-low);
    transition: color var(--transition-normal);
}

.kpi-stripe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════════
   ALAN PLANI (Floor Plan)
   ═══════════════════════════════════════════════════════════════ */
.floor-canvas {
    position: relative;
    width: 100%;
    min-height: 560px;
    background-color: var(--surface-2);
    background-image:
        linear-gradient(var(--surface-divider) 1px, transparent 1px),
        linear-gradient(90deg, var(--surface-divider) 1px, transparent 1px);
    background-size: 40px 40px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--surface-border);
    overflow: hidden;
    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal);
}

.floor-canvas.edit-mode {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-tint);
}

.floor-canvas.drop-active {
    background-color: var(--accent-tint);
    border-color: var(--accent);
}

/* Masa Kartı */
.table-card {
    position: absolute;
    width: 110px;
    min-height: 100px;
    background: var(--surface-3);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-normal);
    user-select: none;
    z-index: 10;
    text-align: center;
}

.table-card:hover {
    transform: scale(1.06);
    box-shadow: var(--shadow-md);
    z-index: 20;
}

.table-card.draggable { cursor: grab; }
.table-card.draggable:active { cursor: grabbing; }

.table-card.status-empty    { border-color: var(--state-success); background: var(--state-success-tint); }
.table-card.status-occupied { border-color: var(--state-danger);  background: var(--state-danger-tint); }
.table-card.status-reserved { border-color: var(--state-warning); background: var(--state-warning-tint); }
.table-card.status-cleaning { border-color: var(--state-info);    background: var(--state-info-tint); }
.table-card.dragging { opacity: 0.35; transform: scale(0.93); }

.table-number {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-high);
    line-height: 1;
    margin-top: 4px;
    transition: color var(--transition-normal);
}

.table-capacity {
    font-size: 0.63rem;
    color: var(--text-low);
    margin-top: 2px;
    transition: color var(--transition-normal);
}

.table-status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   GİRİŞ SAYFASI
   ═══════════════════════════════════════════════════════════════ */
.login-container {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 460px;
    background: var(--surface-1);
    transition: background var(--transition-normal);
}

@media (max-width: 768px) {
    .login-container { grid-template-columns: 1fr; }
    .login-left { display: none; }
}

.login-left {
    background: linear-gradient(145deg, #1a1040 0%, #0a0a18 60%, #12083a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

/* Dekoratif arka plan katmanları */
.login-left::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(124,111,247,0.15) 0%, transparent 65%);
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.login-left::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(157,148,250,0.08) 0%, transparent 65%);
    bottom: 15%;
    right: 10%;
    pointer-events: none;
}

.login-right {
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    border-left: 1px solid var(--surface-border);
    transition:
        background var(--transition-normal),
        border-color var(--transition-normal);
}

/* ═══════════════════════════════════════════════════════════════
   AYIRICI
   ═══════════════════════════════════════════════════════════════ */
.erp-divider {
    border: none;
    border-top: 1px solid var(--surface-border);
    margin: 0.75rem 0;
    transition: border-color var(--transition-normal);
}

/* ═══════════════════════════════════════════════════════════════
   HATA BİLEŞENİ
   ═══════════════════════════════════════════════════════════════ */
#blazor-error-ui {
    background: var(--state-danger);
    color: #fff;
    font-size: 0.82rem;
    bottom: 0;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.4);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}
#blazor-error-ui .dismiss:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   YÜKLEME ANİMASYONU
   ═══════════════════════════════════════════════════════════════ */
@keyframes loadbar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(500%); }
}

@keyframes erp-spin {
    to { transform: rotate(360deg); }
}

@keyframes erp-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes erp-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.erp-animate-fade { animation: erp-fade-in 0.3s var(--transition-normal) both; }
.erp-animate-slide { animation: erp-slide-up 0.35s cubic-bezier(0.4, 0, 0.2, 1) both; }

/* ═══════════════════════════════════════════════════════════════
   DURUM RENK YARDIMCILARI
   ═══════════════════════════════════════════════════════════════ */
.text-accent   { color: var(--accent) !important; }
.text-success  { color: var(--state-success) !important; }
.text-warning  { color: var(--state-warning) !important; }
.text-danger   { color: var(--state-danger) !important; }
.text-info     { color: var(--state-info) !important; }
.text-high     { color: var(--text-high) !important; }
.text-mid      { color: var(--text-mid) !important; }
.text-low      { color: var(--text-low) !important; }

.bg-accent-tint  { background: var(--accent-tint) !important; }
.bg-success-tint { background: var(--state-success-tint) !important; }
.bg-warning-tint { background: var(--state-warning-tint) !important; }
.bg-danger-tint  { background: var(--state-danger-tint) !important; }
.bg-info-tint    { background: var(--state-info-tint) !important; }

/* ═══════════════════════════════════════════════════════════════
   RADZEN ÖZEL DÜZELTMELER — Ek seçiciler
   Tema geçişinde bazı Radzen bileşenleri CSS değişkenleri
   yerine inline veya Radzen's own CSS variables kullandığı için
   ek kapsam ekliyoruz.
   ═══════════════════════════════════════════════════════════════ */

/* Genel metin rengi tutarlılığı */
.rz-layout *,
.rz-sidebar *,
.rz-header *,
.rz-body * {
    transition-property: color, background-color, border-color;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Radzen base text override */
.rz-text-default-color { color: var(--text-high) !important; }
.rz-text-secondary-color { color: var(--text-mid) !important; }

/* Pager / Pagination */
.rz-pager .rz-paginator,
.rz-pager .rz-paginator * {
    background: var(--surface-2) !important;
    color: var(--text-mid) !important;
    border-color: var(--surface-border) !important;
}

.rz-pager .rz-paginator button:hover {
    background: var(--surface-3) !important;
    color: var(--text-high) !important;
}

/* Radzen Card text override */
.rz-card h1, .rz-card h2, .rz-card h3,
.rz-card h4, .rz-card h5, .rz-card h6 {
    color: var(--text-high) !important;
}

.rz-card p, .rz-card span:not(.material-icons) {
    color: var(--text-mid);
}

/* Dropdown trigger arrow */
.rz-dropdown .rz-dropdown-trigger .rz-button,
.rz-dropdown .rz-dropdown-trigger .rz-button span {
    color: var(--text-mid) !important;
    background: transparent !important;
}

/* ── Chip / Tag bileşenleri ─────────────────────────────── */
.rz-chip {
    background: var(--surface-4) !important;
    color: var(--text-high) !important;
    border-color: var(--surface-border) !important;
    border-radius: var(--radius-full) !important;
}

/* ── Rating bileşeni ────────────────────────────────────── */
.rz-rating-item {
    color: var(--text-hint) !important;
}
.rz-rating-item.rz-state-active {
    color: var(--state-warning) !important;
}

/* ── Slider ─────────────────────────────────────────────── */
.rz-slider-track {
    background: var(--surface-border) !important;
}
.rz-slider-range {
    background: var(--accent) !important;
}
.rz-slider-handle {
    background: var(--accent) !important;
    border-color: var(--surface-2) !important;
    box-shadow: 0 0 0 3px var(--accent-tint) !important;
}

/* ── Progress Bar ───────────────────────────────────────── */
.rz-progressbar {
    background: var(--surface-border) !important;
    border-radius: var(--radius-full) !important;
}
.rz-progressbar-value {
    background: var(--accent) !important;
    border-radius: var(--radius-full) !important;
}

/* ── Switch / Toggle ─────────────────────────────────────── */
.rz-switch {
    background: var(--surface-border) !important;
    transition: background var(--transition-fast) !important;
}
.rz-switch.rz-state-active {
    background: var(--accent) !important;
}

/* ── Checkbox ───────────────────────────────────────────── */
.rz-checkbox .rz-chkbox-box {
    background: var(--surface-5) !important;
    border-color: var(--surface-border) !important;
    border-radius: var(--radius-xs) !important;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast) !important;
}
.rz-checkbox .rz-chkbox-box.rz-state-active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}
.rz-checkbox .rz-chkbox-icon {
    color: var(--text-on-accent) !important;
}

/* ── Radio ──────────────────────────────────────────────── */
.rz-radiobutton .rz-radiobutton-box {
    background: var(--surface-5) !important;
    border-color: var(--surface-border) !important;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast) !important;
}
.rz-radiobutton .rz-radiobutton-box.rz-state-active {
    border-color: var(--accent) !important;
}
.rz-radiobutton .rz-radiobutton-box.rz-state-active::after {
    background: var(--accent) !important;
}

/* ── Separator ──────────────────────────────────────────── */
.rz-divider {
    border-color: var(--surface-border) !important;
    transition: border-color var(--transition-normal) !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobil Uyumluluk
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    :root {
        --sidebar-width: 220px;
        --header-height: 56px;
    }
}

@media (max-width: 600px) {
    html, body { font-size: 13px; }
    .kpi-value  { font-size: 1.4rem; }
}