/* ========================================
   ARISA MEDISTOCK - KURUMSAL RENK PALETİ
   ======================================== */

:root {
    /* Ana Renkler - Index Loading Screen'den */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;  /* Ana mavi */
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    /* Success Renkler */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-400: #34d399;
    --success-500: #10b981;  /* Ana yeşil */
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065f46;
    --success-900: #064e3b;

    /* Warning Renkler */
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;  /* Ana turuncu */
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;

    /* Error Renkler */
    --error-50: #fef2f2;
    --error-100: #fee2e2;
    --error-200: #fecaca;
    --error-300: #fca5a5;
    --error-400: #f87171;
    --error-500: #ef4444;  /* Ana kırmızı */
    --error-600: #dc2626;
    --error-700: #b91c1c;
    --error-800: #991b1b;
    --error-900: #7f1d1d;

    /* Neutral Renkler - Index'teki gradient'ten */
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;

    /* Palenight Theme Renkler */
    --palenight-bg: #292d3e;
    --palenight-bg-light: #32374d;
    --palenight-bg-lighter: #3c4359;
    --palenight-fg: #a6accd;
    --palenight-fg-light: #c3c7d1;
    --palenight-accent: #89ddff;
    --palenight-accent-purple: #c792ea;
    --palenight-accent-green: #c3e88d;
    --palenight-accent-orange: #f78c6c;
    --palenight-accent-red: #f07178;
    --palenight-accent-blue: #82aaff;

    /* Gradient Renkler - Index Theme */
    --gradient-primary: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --gradient-primary-modern: linear-gradient(90deg, #3b82f6, #10b981); /* Index'teki progress bar gradient */
    --gradient-success-modern: linear-gradient(135deg, #10b981, #059669); /* Arama butonu için success gradient */
    --gradient-light-modern: var(--gradient-primary-modern); /* Primary modern gradient kullan */
    --gradient-pink-modern: linear-gradient(135deg, #ec4899, #be185d); /* Modern pink gradient */
    --gradient-edit-modern: var(--gradient-success-modern); /* Edit buton için success gradient kullan */
    --gradient-delete-modern: var(--gradient-pink-modern); /* Delete buton için pink gradient kullan */
    --gradient-success: linear-gradient(135deg, #10b981, #059669);
    --gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
    --gradient-error: linear-gradient(135deg, #ef4444, #dc2626);
    --gradient-logout: var(--gradient-primary-modern); /* Çıkış yap butonu için primary modern gradient */
    --gradient-neutral: linear-gradient(135deg, #334155, #475569);
    --gradient-background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);

    /* Shadow Renkler */
    --shadow-primary: 0 8px 32px rgba(59, 130, 246, 0.3);
    --shadow-success: 0 8px 32px rgba(16, 185, 129, 0.3);
    --shadow-warning: 0 8px 32px rgba(245, 158, 11, 0.3);
    --shadow-error: 0 8px 32px rgba(239, 68, 68, 0.3);
    --shadow-neutral: 0 4px 16px rgba(0, 0, 0, 0.1);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Typography */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
}

/* ========================================
   KURUMSAL TEMA UYGULAMALARI
   ======================================== */

/* Header ve Navigation */
.header-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-primary);
}

.header-neutral {
    background: var(--gradient-neutral);
    color: white;
    box-shadow: var(--shadow-neutral);
}

/* Buttons */
.btn-primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-normal);
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.4);
}

.btn-primary-modern {
    background: var(--gradient-primary-modern);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-normal);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);
}

.btn-primary-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.4);
}

/* Global Logout Button */
.btn-logout {
    background: var(--gradient-primary-modern) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-sm) var(--space-lg) !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: var(--transition-normal) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.btn-logout:hover {
    background: linear-gradient(90deg, #2563eb, #059669) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
}

.btn-success {
    background: var(--gradient-success);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-normal);
    box-shadow: var(--shadow-success);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.4);
}

.btn-warning {
    background: var(--gradient-warning);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-normal);
    box-shadow: var(--shadow-warning);
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(245, 158, 11, 0.4);
}

.btn-error {
    background: var(--gradient-error);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-normal);
    box-shadow: var(--shadow-error);
}

.btn-error:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(239, 68, 68, 0.4);
}

/* Cards */
.card-primary {
    background: white;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-neutral);
    transition: var(--transition-normal);
}

.card-primary:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.card-gradient {
    background: var(--gradient-primary);
    color: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-primary);
}

/* Form Elements */
.form-input {
    border: 2px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
    transition: var(--transition-normal);
    background: white;
}

.form-input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.form-input.error {
    border-color: var(--error-500);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Status Colors */
.text-primary { color: var(--primary-600); }
.text-success { color: var(--success-600); }
.text-warning { color: var(--warning-600); }
.text-error { color: var(--error-600); }
.text-neutral { color: var(--neutral-600); }

.bg-primary { background-color: var(--primary-500); }
.bg-success { background-color: var(--success-500); }
.bg-warning { background-color: var(--warning-500); }
.bg-error { background-color: var(--error-500); }
.bg-neutral { background-color: var(--neutral-500); }

/* Badges */
.badge-primary {
    background: var(--gradient-primary);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.badge-success {
    background: var(--gradient-success);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.badge-warning {
    background: var(--gradient-warning);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.badge-error {
    background: var(--gradient-error);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.animate-fade-in { animation: fadeIn 0.5s ease-out; }
.animate-slide-in { animation: slideIn 0.3s ease-out; }
.animate-pulse { animation: pulse 2s infinite; }

/* ========================================
   CUSTOM SCROLLBAR - Temiz ve basit mavi-yeşil gradient
   ======================================== */
::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6 0%, #06b6d4 50%, #10b981 100%);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2563eb 0%, #0891b2 50%, #059669 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}



/* Modern Success Button - Global */
.btn-success-modern {
    background: var(--gradient-success-modern) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.btn-success-modern:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
}

/* Radzen Success Button Override - Global */
::deep .rz-button.rz-success {
    background: var(--gradient-success-modern) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

::deep .rz-button.rz-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
}

/* Modern Light Button - Page Header Style */
.btn-light-modern {
    background: rgba(248, 250, 252, 0.8) !important;
    color: #1e293b !important;
    border: 1px solid rgba(203, 213, 225, 0.6) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-light-modern:hover {
    background: rgba(248, 250, 252, 0.9) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Modern Light Button - Text Variant */
.btn-light-modern.text-variant {
    background: rgba(248, 250, 252, 0.6) !important;
    border: 1px solid rgba(203, 213, 225, 0.4) !important;
}

.btn-light-modern.text-variant:hover {
    background: rgba(248, 250, 252, 0.8) !important;
    border-color: rgba(203, 213, 225, 0.6) !important;
}

/* Modern Default Button - Page Header Style */
.btn-default-modern {
    background: var(--gradient-primary-modern) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.btn-default-modern:hover {
    background: linear-gradient(90deg, #2563eb, #059669) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
}

/* Radzen Button Overrides - Page Header Style */
::deep .rz-button.rz-light {
    background: rgba(248, 250, 252, 0.8) !important;
    color: #1e293b !important;
    border: 1px solid rgba(203, 213, 225, 0.6) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

::deep .rz-button.rz-light:hover {
    background: rgba(248, 250, 252, 0.9) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Radzen Button - Text Variant */
::deep .rz-button.rz-light.rz-button-text {
    background: rgba(248, 250, 252, 0.6) !important;
    border: 1px solid rgba(203, 213, 225, 0.4) !important;
}

::deep .rz-button.rz-light.rz-button-text:hover {
    background: rgba(248, 250, 252, 0.8) !important;
    border-color: rgba(203, 213, 225, 0.6) !important;
}

/* Radzen Button - Primary Style (Sadece genel primary butonlar için, products sayfası hariç) */
::deep .rz-button.rz-primary:not(.btn-product-details):not(.btn-edit):not(.btn-delete) {
    background: var(--gradient-pink-modern) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3) !important;
}

::deep .rz-button.rz-primary:not(.btn-product-details):not(.btn-edit):not(.btn-delete):hover {
    background: linear-gradient(135deg, #db2777, #9d174d) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4) !important;
}

/* Modern Pink Button - Products için */
.btn-pink-modern {
    background: var(--gradient-pink-modern) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3) !important;
}

.btn-pink-modern:hover {
    background: linear-gradient(135deg, #db2777, #9d174d) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4) !important;
}

/* Modern Edit Button */
.btn-edit-modern {
    background: var(--gradient-success-modern) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.btn-edit-modern:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
}

/* Modern Delete Button */
.btn-delete-modern {
    background: var(--gradient-pink-modern) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3) !important;
}

.btn-delete-modern:hover {
    background: linear-gradient(135deg, #db2777, #9d174d) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    :root {
        --space-md: 0.75rem;
        --space-lg: 1rem;
        --space-xl: 1.5rem;
        --font-size-base: 0.9rem;
    }
}