/* Mobile-First CSS - Güneş Pili Kalite Kontrol Formu */

/* Z-Index Standardization */
:root {
    --z-index-base: 1;
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-overlay: 900;
    --z-index-mobile-overlay: 999;
    --z-index-sidebar: 1000;
    --z-index-mobile-toggle: 1001;
    --z-index-modal: 2000;
    --z-index-gallery: 10000;
    --z-index-gallery-controls: 10001;
    
    /* Typography System - Global Font Standardization */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-monospace: 'Courier New', monospace;
    
    /* Font Sizes - Desktop (rem) */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.75rem;     /* 28px */
    --font-size-4xl: 2rem;         /* 32px */
    
    /* Font Sizes - Mobile (rem) */
    --font-size-xs-mobile: 0.7rem;     /* 11.2px */
    --font-size-sm-mobile: 0.8rem;     /* 12.8px */
    --font-size-base-mobile: 0.875rem; /* 14px */
    --font-size-lg-mobile: 0.95rem;    /* 15.2px */
    --font-size-xl-mobile: 1rem;       /* 16px */
    --font-size-2xl-mobile: 1.1rem;   /* 17.6px */
    --font-size-3xl-mobile: 1.25rem;  /* 20px */
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.75;
}
        
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        @keyframes taskCompletePulse {
            0% {
                transform: translate(-50%, -50%) scale(0) rotate(-10deg);
                opacity: 0;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(1) rotate(0deg);
                opacity: 0.9;
            }
        }
        
        /* CSS Reset ve base typography core.css'de tanımlı, burada tekrar tanımlamıyoruz */
        /* Sadece app.css'e özel typography override'ları burada */
        
        /* Global Typography System - Sadece font-family override */
        * {
            font-family: var(--font-family-base);
        }
        
        /* Monospace for specific elements (like clock) */
        code, pre, .monospace {
            font-family: var(--font-family-monospace);
        }
        
        /* Utility Classes for Common Font Sizes - Replace inline styles */
        .text-xs { font-size: var(--font-size-xs) !important; }
        .text-sm { font-size: var(--font-size-sm) !important; }
        .text-base { font-size: var(--font-size-base) !important; }
        .text-lg { font-size: var(--font-size-lg) !important; }
        .text-xl { font-size: var(--font-size-xl) !important; }
        .text-2xl { font-size: var(--font-size-2xl) !important; }
        .text-3xl { font-size: var(--font-size-3xl) !important; }
        
        /* Font Weight Utilities */
        .font-normal { font-weight: var(--font-weight-normal) !important; }
        .font-medium { font-weight: var(--font-weight-medium) !important; }
        .font-semibold { font-weight: var(--font-weight-semibold) !important; }
        .font-bold { font-weight: var(--font-weight-bold) !important; }
        
        /* Line Height Utilities */
        .leading-tight { line-height: var(--line-height-tight) !important; }
        .leading-normal { line-height: var(--line-height-normal) !important; }
        .leading-relaxed { line-height: var(--line-height-relaxed) !important; }
        
        /* Special Elements */
        .dashboard-clock {
            font-family: var(--font-family-monospace);
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-bold);
            letter-spacing: 2px;
        }
        
        .icon-large { font-size: var(--font-size-2xl) !important; }
        .icon-xl { font-size: var(--font-size-3xl) !important; }
        .icon-2xl { font-size: var(--font-size-4xl) !important; }

        /* Login Section */
        .login-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #FFD700 0%, #FF8C00 25%, #FFA500 50%, #87CEEB 75%, #4A90E2 100%);
            position: relative;
            overflow: hidden;
        }
        
        .login-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
            border-radius: 50%;
            animation: pulse 8s ease-in-out infinite;
        }
        
        .login-section::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(74, 144, 226, 0.2) 0%, transparent 70%);
            border-radius: 50%;
            animation: pulse 10s ease-in-out infinite reverse;
        }
        
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 0.5;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.7;
            }
        }

        .login-container {
            display: flex;
            width: 100%;
            max-width: 800px;
            margin: 2rem;
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            overflow: hidden;
            position: relative;
            z-index: 1;
        }

        .login-left {
            flex: 1;
            background: linear-gradient(135deg, #FFD700 0%, #FF8C00 50%, #FFA500 100%);
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .login-left::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
            border-radius: 50%;
        }

        .login-left > * {
            position: relative;
            z-index: 1;
        }

        .login-left h2 {
            font-size: 1.75rem;
            margin-bottom: 0.75rem;
            font-weight: 700;
        }

        .login-left p {
            font-size: 1rem;
            margin-bottom: 1.5rem;
            opacity: 0.95;
        }

        .login-features {
            list-style: none;
        }

        .login-features li {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
            font-size: 1rem;
        }

        .login-features li::before {
            content: "✓";
            background: rgba(255,255,255,0.2);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .login-right {
            flex: 1;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .login-logo {
            text-align: center;
            margin-bottom: 2rem;
        }

        .login-logo svg {
            height: 20px;
            max-width: 250px;
            width: auto;
            margin: 0 auto;
            display: block;
        }
        
        /* Login logo - Desktop görünümde büyüt */
        @media (min-width: 992px) {
            .login-logo svg,
            .login-logo svg#katman_1 {
                height: 32px !important;
                max-width: 400px !important;
                width: 400px !important;
                min-width: 400px !important;
            }
            
            .login-welcome {
                margin-top: 1rem;
            }
        }

        .login-title {
            text-align: center;
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #333;
        }

        .login-subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 2rem;
            font-size: 0.95rem;
        }
        
        .login-welcome {
            text-align: center;
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #f39200;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #333;
            font-size: 0.9rem;
        }

        /* Revize detay satırları core.css'de tanımlı, burada tekrar tanımlamıyoruz */

        .form-control {
            width: 100%;
            padding: 0.875rem 1rem;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.2s;
            background: #fafafa;
        }

        .form-control:focus {
            outline: none;
            border-color: #f39200;
            background: white;
            box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.1);
        }

        .form-control.error {
            border-color: #dc3545;
            background-color: #fff5f5;
        }

        .form-control.error:focus {
            border-color: #dc3545;
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
        }

        .error-message {
            background-color: #fee;
            border: 1px solid #dc3545;
            color: #dc3545;
            padding: 0.75rem 1rem;
            border-radius: 6px;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }

        .form-select {
            width: 100%;
            padding: 0.875rem 1rem;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1rem;
            background: #fafafa;
            transition: all 0.2s;
        }

        .form-select:focus {
            outline: none;
            border-color: #f39200;
            background: white;
            box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.1);
        }

        textarea.form-control {
            resize: vertical;
            height: 48px;
            min-height: 48px;
        }

        .btn {
            padding: 0.875rem 1.5rem;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: #f39200;
            color: white;
        }

        .btn-primary:hover {
            background: #e08500;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(243, 146, 0, 0.4);
        }
    
    /* Yeni Oluştur Butonları - Standart Stil */
    .btn-create-new {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.4rem 0.85rem;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(243, 146, 0, 0.2);
        background: linear-gradient(135deg, #f39200 0%, #ff6b00 100%);
        border: none;
        color: white;
        border-radius: 5px;
        font-size: 0.8rem;
        transition: all 0.3s ease;
    }
    
    .btn-create-new:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(243, 146, 0, 0.3);
        background: linear-gradient(135deg, #ff6b00 0%, #f39200 100%);
    }
    
    .btn-create-new svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }
    
    /* Arama Kutusu - Standart Stil */
    .search-box {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: white;
        padding: 0.4rem 0.85rem;
        border-radius: 24px;
        border: 1px solid #e0e0e0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        width: fit-content;
    }
    
    .search-box svg {
        width: 16px;
        height: 16px;
        color: #999;
        flex-shrink: 0;
    }
    
    .search-box input {
        border: none;
        background: transparent;
        padding: 0;
        font-size: 0.875rem;
        width: 200px;
        min-width: 150px;
        color: #333;
        outline: none;
    }
    
    .search-box input::placeholder {
        color: #999;
        opacity: 1;
    }
    
    .search-box:focus-within {
        border-color: #f39200;
        box-shadow: 0 2px 4px rgba(243, 146, 0, 0.1);
        }
        
        /* btn-primary ikonlu versiyonu (Görüntüle butonu için) */
        .btn-primary.btn-icon {
            width: 28px;
            height: 28px;
            padding: 0;
            font-size: 0;
        /* Font Awesome icon kullanılıyor - background-image kaldırıldı */
        }
        
        .btn-primary.btn-icon:hover {
            background-color: #e08500;
        }
        
        .btn-info {
            background-color: #17a2b8;
            color: white;
            width: 28px;
            height: 28px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            border: none;
            position: relative;
            font-size: 0;
            transition: all 0.2s ease;
        }
        
        .btn-info:hover {
            background-color: #138496;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
        }
        
        .btn-info.btn-sm {
            width: 28px;
            height: 28px;
        }
        
        .btn-info.btn-icon {
            width: 28px;
            height: 28px;
            padding: 0;
            font-size: 0;
        }

        .btn-secondary {
            background: #007bff;
            color: white;
            width: 28px;
            height: 28px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            border: none;
            position: relative;
            font-size: 0;
            transition: all 0.2s ease;
        /* Font Awesome icon kullanılıyor - background-image kaldırıldı */
        }

        .btn-secondary:hover {
            background-color: #0056b3;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
        }

        /* Bildirim Dropdown */
        .notification-dropdown {
            animation: slideDownFade 0.2s ease-out;
        }
        
        @keyframes slideDownFade {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Bildirim Icon Animasyonu */
        .notification-icon-animated {
            animation: none;
        }
        
        .notification-icon-animated.notification-icon-blink {
            animation: bellRing 1s ease-in-out infinite;
        }
        
        @keyframes bellRing {
            0%, 100% {
                transform: rotate(0deg);
            }
            10%, 30%, 50%, 70%, 90% {
                transform: rotate(-10deg);
            }
            20%, 40%, 60%, 80% {
                transform: rotate(10deg);
            }
        }
        
        .notification-icon-container.has-unread .notification-icon-animated {
            color: #f39200 !important;
        }

        .notification-bar-content {
            padding: 1rem;
        }

        .notification-bar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #e0e0e0;
        }

        .notification-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .notification-item {
            padding: 1.25rem;
            background: white;
            border-radius: 12px;
            border: 1px solid #e0e0e0;
            border-left: 4px solid #f39200;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 0.5rem;
        }

        .notification-item:hover {
            background: #f8f9fa;
            transform: translateX(4px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .notification-item.unread {
            background: #fff9f0;
            border-left-color: #f39200;
            border-left-width: 5px;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(243, 146, 0, 0.15);
        }

        .notification-item-content {
            flex: 1;
        }

        .notification-item-title {
            font-weight: 600;
            color: #333;
            margin-bottom: 0.25rem;
            font-size: 0.95rem;
        }

        .notification-item-message {
            color: #666;
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
        }

        .notification-item-meta {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.8rem;
            color: #666;
            margin-top: 0.5rem;
        }

        .notification-item-actions {
            display: flex;
            gap: 0.5rem;
            flex-shrink: 0;
        }
        
        .notification-item-actions button {
            min-width: 32px;
            height: 32px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            font-size: 0.875rem;
        }

        .notification-badge {
            display: inline-block;
            min-width: 18px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            border-radius: 9px;
            font-size: 0.7rem;
            font-weight: 600;
        }
        
        .btn-secondary.btn-sm {
            width: 28px;
            height: 28px;
        }

        .btn-success {
            background-color: #28a745;
            color: white;
            width: 28px;
            height: 28px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            border: none;
            position: relative;
            font-size: 0;
            transition: all 0.2s ease;
        }
        
        .btn-success::before {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
        /* Font Awesome icon kullanılıyor - background-image kaldırıldı */
        }
        
        .btn-success:hover {
            background-color: #218838;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
        }
        
        .btn-success.btn-sm {
            width: 28px;
            height: 28px;
        }
        
        .btn-success.btn-icon {
            width: 28px;
            height: 28px;
            padding: 0;
            font-size: 0;
        }
        
        .btn-success.btn-icon i {
            font-size: 14px;
            color: white;
        }

    /* Button Styles - Consolidated */
        .btn-warning {
        background: #ffc107 !important;
            color: white;
            width: 28px;
            height: 28px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            border: none;
            position: relative;
            font-size: 0;
            transition: all 0.2s ease;
        }
        
        .btn-warning:hover {
            background: #e0a800 !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
        }
        
    .btn-warning.btn-sm,
        .btn-warning.btn-icon {
            width: 28px;
            height: 28px;
        }
        
        .btn-warning.btn-icon i {
            font-size: 14px;
            color: white !important;
        }

        .btn-danger {
            background: #dc3545 !important;
            color: white;
            width: 28px;
            height: 28px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            border: none;
            position: relative;
            font-size: 0;
            transition: all 0.2s ease;
        }
        
        .btn-danger.btn-icon i,
        .btn-danger.btn-sm.btn-icon i {
            font-size: 14px;
            color: white !important;
        }
        
        .btn-danger:hover {
            background: #c82333 !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
        }
        
        .btn-danger.btn-sm {
            width: 28px;
            height: 28px;
        }

        /* Garanti Takip işlemler kolonundaki ikon butonlarını tasarıma sabitle */
        #garantiTakip .action-buttons .btn {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
            line-height: 1 !important;
            border-radius: 6px !important;
            border: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }
        
        #garantiTakip .action-buttons .btn-info {
            background: #0d6efd !important;
            color: #fff !important;
        }
        
        #garantiTakip .action-buttons .btn-warning {
            background: #ffc107 !important;
            color: #fff !important;
        }
        
        #garantiTakip .action-buttons .btn-secondary {
            background: #6c757d !important;
            color: #fff !important;
        }
        
        #garantiTakip .action-buttons .btn-danger {
            background: #dc3545 !important;
            color: #fff !important;
        }
        
        #garantiTakip .action-buttons .btn i {
            color: #fff !important;
            font-size: 12px !important;
        }

        /* Kalite Formları işlemler kolonundaki ikon butonlarını tasarıma sabitle */
        #formsTable .action-buttons .btn,
        #formsTable .action-buttons .btn-action-icon {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
            line-height: 1 !important;
            border-radius: 6px !important;
            border: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }
        
        #formsTable .action-buttons .btn-info {
            background: #0d6efd !important;
            color: #fff !important;
        }
        
        #formsTable .action-buttons .btn-warning {
            background: #ffc107 !important;
            color: #fff !important;
        }
        
        #formsTable .action-buttons .btn-secondary {
            background: #6c757d !important;
            color: #fff !important;
        }
        
        #formsTable .action-buttons .btn-danger {
            background: #dc3545 !important;
            color: #fff !important;
        }
        
        /* btn-action-icon için renkler (Revize Kontrol Et, Revize Et vb.) */
        #formsTable .action-buttons .btn-action-icon[title*="Revize Kontrol"],
        #formsTable .action-buttons .btn-action-icon[title*="revize kontrol"],
        #formsTable .action-buttons .btn-action-icon[title*="Kontrol"] {
            background: #17a2b8 !important;
            color: #fff !important;
        }
        
        #formsTable .action-buttons .btn-action-icon[title*="Revize Et"],
        #formsTable .action-buttons .btn-action-icon[title*="revize et"],
        #formsTable .action-buttons .btn-action-icon[title*="Revize"] {
            background: #ffc107 !important;
            color: #fff !important;
        }
        
        #formsTable .action-buttons .btn i,
        #formsTable .action-buttons .btn-action-icon i {
            color: #fff !important;
            font-size: 12px !important;
        }

        /* Görevler işlemler kolonundaki ikon butonlarını tasarıma sabitle */
        #tasksTable .action-buttons .btn,
        #tasksTable .action-buttons .btn-action-icon,
        #completedTasksTable .action-buttons .btn,
        #completedTasksTable .action-buttons .btn-action-icon {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
            line-height: 1 !important;
            border-radius: 6px !important;
            border: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }
        
        #tasksTable .action-buttons .btn-info,
        #completedTasksTable .action-buttons .btn-info {
            background: #0d6efd !important;
            color: #fff !important;
        }
        
        #tasksTable .action-buttons .btn-warning,
        #completedTasksTable .action-buttons .btn-warning {
            background: #ffc107 !important;
            color: #fff !important;
        }
        
        #tasksTable .action-buttons .btn-secondary,
        #completedTasksTable .action-buttons .btn-secondary {
            background: #6c757d !important;
            color: #fff !important;
        }
        
        #tasksTable .action-buttons .btn-danger,
        #completedTasksTable .action-buttons .btn-danger {
            background: #dc3545 !important;
            color: #fff !important;
        }
        
        /* btn-action-icon için renkler (Görevi Başlat, Görev Aktar vb.) */
        #tasksTable .action-buttons .btn-action-icon[title*="Başlat"],
        #tasksTable .action-buttons .btn-action-icon[title*="başlat"],
        #tasksTable .action-buttons .btn-action-icon[title*="Start"],
        #completedTasksTable .action-buttons .btn-action-icon[title*="Başlat"],
        #completedTasksTable .action-buttons .btn-action-icon[title*="başlat"],
        #completedTasksTable .action-buttons .btn-action-icon[title*="Start"] {
            background: #0d6efd !important;
            color: #fff !important;
        }
        
        #tasksTable .action-buttons .btn-action-icon[title*="Aktar"],
        #tasksTable .action-buttons .btn-action-icon[title*="aktar"],
        #tasksTable .action-buttons .btn-action-icon[title*="Transfer"],
        #completedTasksTable .action-buttons .btn-action-icon[title*="Aktar"],
        #completedTasksTable .action-buttons .btn-action-icon[title*="aktar"],
        #completedTasksTable .action-buttons .btn-action-icon[title*="Transfer"] {
            background: #ffc107 !important;
            color: #fff !important;
        }
        
        #tasksTable .action-buttons .btn i,
        #tasksTable .action-buttons .btn-action-icon i,
        #completedTasksTable .action-buttons .btn i,
        #completedTasksTable .action-buttons .btn-action-icon i {
            color: #fff !important;
            font-size: 12px !important;
        }

        /* Teklifler işlemler kolonundaki ikon butonlarını tasarıma sabitle */
        #quotesTable td button.btn-action-icon,
        #quotesTable td div button.btn-action-icon,
        #quotesTable td[style*="vertical-align"] button.btn-action-icon,
        #quotesTable td[style*="vertical-align"] div button.btn-action-icon,
        #quotesTable tr td button.btn-action-icon,
        #quotesTable tr td div button.btn-action-icon,
        #quotesTable tbody tr td button.btn-action-icon,
        #quotesTable tbody tr td div button.btn-action-icon {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
            max-width: 24px !important;
            max-height: 24px !important;
            line-height: 1 !important;
            border-radius: 6px !important;
            border: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
            font-size: 0 !important;
        }
        
        /* btn-action-icon için renkler (Görüntüle, Revize Başlat, Yazdır, Sil vb.) */
        #quotesTable td button.btn-action-icon[title*="Görüntüle"],
        #quotesTable td button.btn-action-icon[title*="görüntüle"],
        #quotesTable td button.btn-action-icon[title*="Aç"],
        #quotesTable td div button.btn-action-icon[title*="Görüntüle"],
        #quotesTable td div button.btn-action-icon[title*="görüntüle"],
        #quotesTable td div button.btn-action-icon[title*="Aç"] {
            background: #0d6efd !important;
            color: #fff !important;
        }
        
        #quotesTable td button.btn-action-icon[title*="Revize"],
        #quotesTable td button.btn-action-icon[title*="revize"],
        #quotesTable td button.btn-action-icon[title*="Düzenle"],
        #quotesTable td button.btn-action-icon[title*="düzenle"],
        #quotesTable td div button.btn-action-icon[title*="Revize"],
        #quotesTable td div button.btn-action-icon[title*="revize"],
        #quotesTable td div button.btn-action-icon[title*="Düzenle"],
        #quotesTable td div button.btn-action-icon[title*="düzenle"] {
            background: #ffc107 !important;
            color: #fff !important;
        }
        
        #quotesTable td button.btn-action-icon[title*="Yazdır"],
        #quotesTable td button.btn-action-icon[title*="yazdır"],
        #quotesTable td button.btn-action-icon[title*="Print"],
        #quotesTable td div button.btn-action-icon[title*="Yazdır"],
        #quotesTable td div button.btn-action-icon[title*="yazdır"],
        #quotesTable td div button.btn-action-icon[title*="Print"] {
            background: #ff9800 !important;
            color: #fff !important;
        }
        
        #quotesTable td button.btn-action-icon[title*="Sil"],
        #quotesTable td button.btn-action-icon[title*="sil"],
        #quotesTable td div button.btn-action-icon[title*="Sil"],
        #quotesTable td div button.btn-action-icon[title*="sil"] {
            background: #dc3545 !important;
            color: #fff !important;
        }
        
        #quotesTable td button.btn-action-icon i,
        #quotesTable td div button.btn-action-icon i {
            color: #fff !important;
            font-size: 12px !important;
        }

        /* Kullanıcılar işlemler kolonundaki ikon butonlarını tasarıma sabitle */
        #usersTableBody td button.btn-action-icon,
        #usersTableBody td div button.btn-action-icon,
        #usersTableBody tr td button.btn-action-icon,
        #usersTableBody tr td div button.btn-action-icon {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
            max-width: 24px !important;
            max-height: 24px !important;
            line-height: 1 !important;
            border-radius: 6px !important;
            border: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
            font-size: 0 !important;
        }
        
        #usersTableBody td button.btn-action-icon[title*="Düzenle"],
        #usersTableBody td button.btn-action-icon[title*="düzenle"],
        #usersTableBody td div button.btn-action-icon[title*="Düzenle"],
        #usersTableBody td div button.btn-action-icon[title*="düzenle"] {
            background: #ffc107 !important;
            color: #fff !important;
        }
        
        #usersTableBody td button.btn-action-icon[title*="Sil"],
        #usersTableBody td button.btn-action-icon[title*="sil"],
        #usersTableBody td div button.btn-action-icon[title*="Sil"],
        #usersTableBody td div button.btn-action-icon[title*="sil"] {
            background: #dc3545 !important;
            color: #fff !important;
        }
        
        #usersTableBody td button.btn-action-icon i,
        #usersTableBody td div button.btn-action-icon i {
            color: #fff !important;
            font-size: 12px !important;
        }

        /* Firmalar sayfası genel stilleri */
        .companies-header-box {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            border: 1px solid rgba(0, 0, 0, 0.08);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .companies-page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .companies-page-header .btn-primary {
            padding: 0.5rem 1rem !important;
            font-size: 0.875rem !important;
            font-weight: 500 !important;
            border-radius: 8px !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
        }

        .companies-page-title {
            font-size: 1.75rem;
            font-weight: 600;
            color: #333;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin: 0;
        }

        .companies-page-title i {
            color: #f39200;
        }

        .companies-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            border: 1px solid rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .companies-table-wrapper {
            overflow-x: auto;
        }

        .companies-table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
        }

        .companies-table thead {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-bottom: 2px solid #dee2e6;
        }

        .companies-table th {
            padding: 1rem;
            text-align: left;
            font-weight: 600;
            font-size: 0.875rem;
            color: #495057;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .companies-table td {
            padding: 1rem;
            border-bottom: 1px solid #e9ecef;
            font-size: 0.875rem;
            color: #333;
        }

        .companies-table tbody tr {
            transition: background-color 0.2s ease;
        }

        .companies-table tbody tr:hover {
            background-color: rgba(243, 146, 0, 0.05);
        }

        .companies-table tbody tr:last-child td {
            border-bottom: none;
        }

        .company-actions {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            flex-wrap: wrap;
        }

        /* Firmalar işlemler kolonundaki ikon butonlarını tasarıma sabitle */
        #companiesTableBody td button.btn-action-icon,
        .companies-table td button.btn-action-icon,
        #companiesTableBody td div button.btn-action-icon,
        #companiesTableBody tr td button.btn-action-icon,
        #companiesTableBody tr td div button.btn-action-icon,
        .companies-table tr td div button.btn-action-icon {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
            max-width: 24px !important;
            max-height: 24px !important;
            line-height: 1 !important;
            border-radius: 6px !important;
            border: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
            font-size: 0 !important;
        }
        
        #companiesTableBody td button.btn-action-icon[title*="Düzenle"],
        #companiesTableBody td button.btn-action-icon[title*="düzenle"],
        #companiesTableBody td div button.btn-action-icon[title*="Düzenle"],
        #companiesTableBody td div button.btn-action-icon[title*="düzenle"] {
            background: #ffc107 !important;
            color: #fff !important;
        }
        
        #companiesTableBody td button.btn-action-icon[title*="Sil"],
        #companiesTableBody td button.btn-action-icon[title*="sil"],
        #companiesTableBody td div button.btn-action-icon[title*="Sil"],
        #companiesTableBody td div button.btn-action-icon[title*="sil"] {
            background: #dc3545 !important;
            color: #fff !important;
        }
        
        #companiesTableBody td button.btn-action-icon i,
        #companiesTableBody td div button.btn-action-icon i {
            color: #fff !important;
            font-size: 12px !important;
        }

        /* Firmalar sayfası görsel iyileştirme ve hizalamalar */
        #companies .card {
            border: 1px solid #eef2f7;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
        }

        #companies .card-header {
            background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
            border-bottom: 1px solid #e5e7eb;
            padding: 1rem 1.25rem;
        }

        #companies .card-header .companies-title {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        #companies .companies-eyebrow {
            font-size: 0.75rem;
            color: #6b7280;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            font-weight: 700;
        }

        #companies .companies-heading {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.25rem;
            font-weight: 700;
            color: #111827;
        }

        #companies .companies-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            background: #e0e7ff;
            color: #3730a3;
            padding: 0.25rem 0.6rem;
            border-radius: 999px;
            font-size: 0.875rem;
            font-weight: 600;
        }

        #companies .companies-subtitle {
            margin: 0;
            color: #4b5563;
            font-size: 0.95rem;
        }

        #companies .card-body {
            padding: 1.25rem;
        }

        #companies .table.companies-table {
            table-layout: auto;
        }

        #companies .table.companies-table thead th,
        #companies .table.companies-table tbody td {
            padding: 0.9rem 1rem;
        }

        #companies .companies-actions-cell {
            padding: 1rem 1.125rem;
        }

        #companies .companies-count {
            text-align: left;
            vertical-align: middle;
        }

        #companies .pill {
            display: inline-block;
            padding: 0.35rem 0.8rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.875rem;
            min-width: 44px;
            text-align: center;
        }

        #companies .pill-orders {
            background: #e6f3ff;
            color: #0066cc;
        }

        #companies .pill-quotes {
            background: #f3e8ff;
            color: #6b21a8;
        }

        #companies .table thead th,
        #companies .table tbody td {
            text-align: left;
            vertical-align: middle;
        }

        /* Sipariş sayısı ve teklifler sütunlarını sola hizala */
        /* Kontrol Maddeleri sayfası genel stilleri */
        .control-items-header-box {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            border: 1px solid rgba(0, 0, 0, 0.08);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .control-items-page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .control-items-page-header .btn-primary {
            padding: 0.5rem 1rem !important;
            font-size: 0.875rem !important;
            font-weight: 500 !important;
            border-radius: 8px !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
        }

        .control-items-page-title {
            font-size: 1.75rem;
            font-weight: 600;
            color: #333;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin: 0;
        }

        .control-items-page-title i {
            color: #f39200;
        }

        .control-items-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            border: 1px solid rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .control-items-table-wrapper {
            overflow-x: auto;
        }

        .control-items-table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
        }

        .control-items-table thead {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-bottom: 2px solid #dee2e6;
        }

        .control-items-table th {
            padding: 1rem;
            text-align: left;
            font-weight: 600;
            font-size: 0.875rem;
            color: #495057;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .control-items-table td {
            padding: 1rem;
            border-bottom: 1px solid #e9ecef;
            font-size: 0.875rem;
            color: #333;
        }

        .control-items-table tbody tr {
            transition: background-color 0.2s ease;
        }

        .control-items-table tbody tr:hover {
            background-color: rgba(243, 146, 0, 0.05);
        }

        .control-items-table tbody tr:last-child td {
            border-bottom: none;
        }

        .control-item-actions {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            flex-wrap: wrap;
        }

        /* Kontrol Maddeleri işlemler kolonundaki ikon butonlarını tasarıma sabitle */
        #controlItemsTableBody td button.btn-action-icon,
        .control-items-table td button.btn-action-icon,
        #controlItemsTableBody td div button.btn-action-icon,
        #controlItemsTableBody tr td button.btn-action-icon,
        #controlItemsTableBody tr td div button.btn-action-icon,
        .control-items-table tr td div button.btn-action-icon {
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            min-height: 24px !important;
            max-width: 24px !important;
            max-height: 24px !important;
            line-height: 1 !important;
            border-radius: 6px !important;
            border: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
            font-size: 0 !important;
        }
        
        #controlItemsTableBody td button.btn-action-icon[title*="Düzenle"],
        #controlItemsTableBody td button.btn-action-icon[title*="düzenle"],
        #controlItemsTableBody td div button.btn-action-icon[title*="Düzenle"],
        #controlItemsTableBody td div button.btn-action-icon[title*="düzenle"] {
            background: #ffc107 !important;
            color: #fff !important;
        }
        
        #controlItemsTableBody td button.btn-action-icon[title*="Sil"],
        #controlItemsTableBody td button.btn-action-icon[title*="sil"],
        #controlItemsTableBody td div button.btn-action-icon[title*="Sil"],
        #controlItemsTableBody td div button.btn-action-icon[title*="sil"] {
            background: #dc3545 !important;
            color: #fff !important;
        }
        
        #controlItemsTableBody td button.btn-action-icon[title*="Aktif"],
        #controlItemsTableBody td button.btn-action-icon[title*="Pasif"],
        #controlItemsTableBody td div button.btn-action-icon[title*="Aktif"],
        #controlItemsTableBody td div button.btn-action-icon[title*="Pasif"] {
            background: #28a745 !important;
            color: #fff !important;
        }
        
        #controlItemsTableBody td button.btn-action-icon.inactive {
            background: #6c757d !important;
        }
        
        #controlItemsTableBody td button.btn-action-icon i,
        #controlItemsTableBody td div button.btn-action-icon i {
            color: #fff !important;
            font-size: 12px !important;
        }

        .status-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .status-active {
            background: #d4edda;
            color: #155724;
        }

        .status-inactive {
            background: #f8d7da;
            color: #721c24;
        }

        .category-filter {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .category-filter select {
            padding: 0.5rem 0.75rem;
            border: 1px solid #ced4da;
            border-radius: 6px;
            font-size: 0.875rem;
            background: white;
            cursor: pointer;
        }

        #companies .table thead th:nth-child(6),
        #companies .table tbody td:nth-child(6),
        #companies .table thead th:nth-child(7),
        #companies .table tbody td:nth-child(7) {
            text-align: left;
        }

        #companies .table thead th {
            color: #4b5563;
            font-weight: 700;
            font-size: 0.9rem;
            letter-spacing: 0.01em;
        }

        #companies .table tbody tr {
            transition: background-color 0.15s ease, transform 0.15s ease;
        }

        #companies .table tbody tr:hover {
            background: #f8fafc;
            transform: translateY(-1px);
        }

        #companies .companies-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.3rem 0.65rem;
            background: #eef2ff;
            color: #3730a3;
            border-radius: 999px;
            font-weight: 600;
            font-size: 0.85rem;
        }

        #companies .companies-actions {
            display: flex;
            gap: 0.35rem;
            align-items: center;
            justify-content: flex-start;
        }

        /* Personel işlemler kolonundaki ikon butonlarını tasarıma sabitle */
        #personnelTableBody td button.btn-action-icon,
        #personnelTableBody td div button.btn-action-icon,
        #personnelTableBody tr td button.btn-action-icon,
        #personnelTableBody tr td div button.btn-action-icon {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
            max-width: 24px !important;
            max-height: 24px !important;
            line-height: 1 !important;
            border-radius: 6px !important;
            border: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
            font-size: 0 !important;
        }
        
        #personnelTableBody td button.btn-action-icon[title*="Düzenle"],
        #personnelTableBody td button.btn-action-icon[title*="düzenle"],
        #personnelTableBody td div button.btn-action-icon[title*="Düzenle"],
        #personnelTableBody td div button.btn-action-icon[title*="düzenle"] {
            background: #ffc107 !important;
            color: #fff !important;
        }
        
        #personnelTableBody td button.btn-action-icon[title*="Sil"],
        #personnelTableBody td button.btn-action-icon[title*="sil"],
        #personnelTableBody td div button.btn-action-icon[title*="Sil"],
        #personnelTableBody td div button.btn-action-icon[title*="sil"] {
            background: #dc3545 !important;
            color: #fff !important;
        }
        
        #personnelTableBody td button.btn-action-icon i,
        #personnelTableBody td div button.btn-action-icon i {
            color: #fff !important;
            font-size: 12px !important;
        }

        /* Kontrol Maddeleri işlemler kolonundaki ikon butonlarını tasarıma sabitle */
        #controlItemsTableBody td .action-buttons button,
        #controlItemsTableBody td .action-buttons .btn-action-icon,
        #controlItemsTableBody tr td .action-buttons button,
        #controlItemsTableBody tr td .action-buttons .btn-action-icon {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
            max-width: 24px !important;
            max-height: 24px !important;
            line-height: 1 !important;
            border-radius: 6px !important;
            border: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
            font-size: 0 !important;
        }
        
        #controlItemsTableBody td .action-buttons .btn-warning,
        #controlItemsTableBody td .action-buttons .btn-action-icon[title*="Düzenle"],
        #controlItemsTableBody td .action-buttons .btn-action-icon[title*="düzenle"] {
            background: #ffc107 !important;
            color: #fff !important;
        }
        
        #controlItemsTableBody td .action-buttons .btn-danger,
        #controlItemsTableBody td .action-buttons .btn-action-icon[title*="Sil"],
        #controlItemsTableBody td .action-buttons .btn-action-icon[title*="sil"] {
            background: #dc3545 !important;
            color: #fff !important;
        }
        
        #controlItemsTableBody td .action-buttons .btn-success {
            background: #28a745 !important;
            color: #fff !important;
        }
        
        /* Kontrol Maddeleri sayfası header butonları için stil */
        .control-items-header .btn-sm.btn-icon,
        .control-items-header .btn-success.btn-sm.btn-icon,
        .control-items-header .btn-info.btn-sm.btn-icon,
        .control-items-header .btn-primary.btn-sm.btn-icon,
        .control-items-header .btn-secondary.btn-sm.btn-icon {
            background: #f39200 !important;
            color: white !important;
            border: none !important;
        }
        
        .control-items-header .btn-success.btn-sm.btn-icon {
            background: #28a745 !important;
        }
        
        .control-items-header .btn-success.btn-sm.btn-icon:hover {
            background: #218838 !important;
        }
        
        .control-items-header .btn-info.btn-sm.btn-icon {
            background: #17a2b8 !important;
        }
        
        .control-items-header .btn-info.btn-sm.btn-icon:hover {
            background: #138496 !important;
        }
        
        .control-items-header .btn-primary.btn-sm.btn-icon:hover,
        .control-items-header .btn-sm.btn-icon:hover {
            background: #e08500 !important;
        }
        
        .control-items-header .btn-secondary.btn-sm.btn-icon {
            background: #6c757d !important;
        }
        
        .control-items-header .btn-secondary.btn-sm.btn-icon:hover {
            background: #5a6268 !important;
        }
        
        /* Kontrol maddeleri card-header içindeki butonlar */
        .card-header .btn-sm.btn-icon,
        .card-header .btn-secondary.btn-sm.btn-icon,
        .card .card-header .btn-sm.btn-icon,
        .card .card-header .btn-secondary.btn-sm.btn-icon,
        div[style*="display: flex"][style*="justify-content: space-between"] .btn-sm.btn-icon,
        div[style*="display: flex"][style*="justify-content: space-between"] .btn-secondary.btn-sm.btn-icon,
        div[style*="display: flex"] .btn-sm.btn-icon,
        div[style*="display: flex"] .btn-secondary.btn-sm.btn-icon,
        button.btn-sm.btn-secondary.btn-icon[title*="Kategoriyi Düzenle"],
        button.btn-sm.btn-secondary.btn-icon[onclick*="openEditControlCategoryModal"] {
            background: #6c757d !important;
            color: white !important;
            border: none !important;
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            min-height: 28px !important;
            max-width: 28px !important;
            max-height: 28px !important;
            padding: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 4px !important;
            font-size: 0 !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: relative !important;
            z-index: 1 !important;
        }
        
        .card-header .btn-secondary.btn-sm.btn-icon:hover,
        .card .card-header .btn-secondary.btn-sm.btn-icon:hover,
        div[style*="display: flex"][style*="justify-content: space-between"] .btn-secondary.btn-sm.btn-icon:hover,
        div[style*="display: flex"] .btn-secondary.btn-sm.btn-icon:hover,
        button.btn-sm.btn-secondary.btn-icon[title*="Kategoriyi Düzenle"]:hover,
        button.btn-sm.btn-secondary.btn-icon[onclick*="openEditControlCategoryModal"]:hover {
            background: #5a6268 !important;
            color: white !important;
        }
        
        .card-header .btn-sm.btn-icon i,
        .card .card-header .btn-sm.btn-icon i,
        div[style*="display: flex"][style*="justify-content: space-between"] .btn-sm.btn-icon i,
        div[style*="display: flex"] .btn-sm.btn-icon i,
        button.btn-sm.btn-secondary.btn-icon[title*="Kategoriyi Düzenle"] i,
        button.btn-sm.btn-secondary.btn-icon[onclick*="openEditControlCategoryModal"] i {
            color: white !important;
            font-size: 14px !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            line-height: 1 !important;
        }

        /* Kategori header butonu turuncu alan altında kaybolmasın */
        .card-header {
            position: relative;
            overflow: visible;
        }

        .card-header .action-buttons {
            position: relative;
            z-index: 5;
        }

        .card-header .action-buttons .btn {
            position: relative;
            z-index: 6;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        
        /* Kontrol maddeleri sayfası - Tüm btn-secondary.btn-sm.btn-icon butonları için zorunlu stil */
        .card.shadow-sm .card-header button.btn-sm.btn-secondary.btn-icon,
        .card.shadow-sm .card-header .btn-sm.btn-secondary.btn-icon {
            background: #6c757d !important;
            color: white !important;
            border: 2px solid #6c757d !important;
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            min-height: 28px !important;
            padding: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 4px !important;
            font-size: 0 !important;
            visibility: visible !important;
            opacity: 1 !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        }
        
        .card.shadow-sm .card-header button.btn-sm.btn-secondary.btn-icon i,
        .card.shadow-sm .card-header .btn-sm.btn-secondary.btn-icon i {
            color: white !important;
            font-size: 14px !important;
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: auto !important;
            height: auto !important;
            line-height: 1 !important;
        }
        
        /* btn-icon class'ı font-size: 0 yaptığı için, icon'u görünür yap */
        .btn-sm.btn-secondary.btn-icon {
            font-size: 0 !important;
        }
        
        .btn-sm.btn-secondary.btn-icon i.fas,
        .btn-sm.btn-secondary.btn-icon i.fa-edit {
            font-size: 14px !important;
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            color: white !important;
        }
        
        .card.shadow-sm .card-header button.btn-sm.btn-secondary.btn-icon:hover {
            background: #5a6268 !important;
            border-color: #5a6268 !important;
        }
        
        /* Kontrol maddeleri card-header butonları - ZORUNLU GÖRÜNÜRLÜK */
        .card.shadow-sm.mb-4 .card-header button[title*="Kategoriyi Düzenle"],
        .card.shadow-sm.mb-4 .card-header button[onclick*="openEditControlCategoryModal"],
        .card.shadow-sm .card-header button.btn-sm[onclick*="openEditControlCategoryModal"] {
            background-color: #6c757d !important;
            color: white !important;
            border: 1px solid #6c757d !important;
            min-width: 28px !important;
            height: 28px !important;
            padding: 0 8px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 4px !important;
            cursor: pointer !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: relative !important;
            z-index: 10 !important;
            font-size: 0 !important;
        }
        
        .card.shadow-sm.mb-4 .card-header button[title*="Kategoriyi Düzenle"] i,
        .card.shadow-sm.mb-4 .card-header button[onclick*="openEditControlCategoryModal"] i,
        .card.shadow-sm .card-header button.btn-sm[onclick*="openEditControlCategoryModal"] i {
            font-size: 14px !important;
            color: white !important;
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            line-height: 1 !important;
        }
        
        .card.shadow-sm.mb-4 .card-header button[title*="Kategoriyi Düzenle"]:hover,
        .card.shadow-sm.mb-4 .card-header button[onclick*="openEditControlCategoryModal"]:hover {
            background-color: #5a6268 !important;
            border-color: #5a6268 !important;
        }
        
        /* Genel kontrol maddeleri sayfası butonları */
        [data-page="control-items"] .btn-sm.btn-icon,
        [data-page="control-items"] .btn-success.btn-sm.btn-icon,
        [data-page="control-items"] .btn-info.btn-sm.btn-icon,
        [data-page="control-items"] .btn-primary.btn-sm.btn-icon,
        [data-page="control-items"] .btn-secondary.btn-sm.btn-icon,
        .page-control-items .btn-sm.btn-icon,
        .page-control-items .btn-success.btn-sm.btn-icon,
        .page-control-items .btn-info.btn-sm.btn-icon,
        .page-control-items .btn-primary.btn-sm.btn-icon,
        .page-control-items .btn-secondary.btn-sm.btn-icon {
            background: #f39200 !important;
            color: white !important;
            border: none !important;
        }
        
        [data-page="control-items"] .btn-success.btn-sm.btn-icon,
        .page-control-items .btn-success.btn-sm.btn-icon {
            background: #28a745 !important;
        }
        
        [data-page="control-items"] .btn-success.btn-sm.btn-icon:hover,
        .page-control-items .btn-success.btn-sm.btn-icon:hover {
            background: #218838 !important;
        }
        
        [data-page="control-items"] .btn-info.btn-sm.btn-icon,
        .page-control-items .btn-info.btn-sm.btn-icon {
            background: #17a2b8 !important;
        }
        
        [data-page="control-items"] .btn-info.btn-sm.btn-icon:hover,
        .page-control-items .btn-info.btn-sm.btn-icon:hover {
            background: #138496 !important;
        }
        
        [data-page="control-items"] .btn-primary.btn-sm.btn-icon:hover,
        [data-page="control-items"] .btn-sm.btn-icon:hover,
        .page-control-items .btn-primary.btn-sm.btn-icon:hover,
        .page-control-items .btn-sm.btn-icon:hover {
            background: #e08500 !important;
        }
        
        [data-page="control-items"] .btn-secondary.btn-sm.btn-icon,
        .page-control-items .btn-secondary.btn-sm.btn-icon {
            background: #6c757d !important;
        }
        
        [data-page="control-items"] .btn-secondary.btn-sm.btn-icon:hover,
        .page-control-items .btn-secondary.btn-sm.btn-icon:hover {
            background: #5a6268 !important;
        }
        
        #controlItemsTableBody td .action-buttons button i,
        #controlItemsTableBody td .action-buttons .btn-action-icon i {
            color: #fff !important;
            font-size: 12px !important;
        }
        
        /* Kontrol Maddeleri tablosu - Tüm sütunları soldan hizala */
        #controlItemsTableBody td {
            text-align: left !important;
        }
        
        /* Kontrol Maddeleri tablosu başlıkları */
        #controlItems table thead th,
        #controlItems .table thead th {
            text-align: left !important;
        }
        
        /* Kullanım Durumu kutucuklarını küçült */
        #controlItemsTableBody td button[disabled] {
            padding: 0.1rem 0.4rem !important;
            font-size: 0.7rem !important;
            line-height: 1.2 !important;
            border-radius: 3px !important;
        }

        /* Hazır Şablonlar işlemler kolonundaki ikon butonlarını tasarıma sabitle */
        #templatesTableBody td button.btn-action-icon,
        #templatesTableBody td div button.btn-action-icon,
        #templatesTableBody tr td button.btn-action-icon,
        #templatesTableBody tr td div button.btn-action-icon,
        #templatesTableBody td .action-buttons button,
        #templatesTableBody td .action-buttons .btn-action-icon {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
            max-width: 24px !important;
            max-height: 24px !important;
            line-height: 1 !important;
            border-radius: 6px !important;
            border: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
            font-size: 0 !important;
        }
        
        #templatesTableBody td button.btn-action-icon[title*="Düzenle"],
        #templatesTableBody td button.btn-action-icon[title*="düzenle"],
        #templatesTableBody td div button.btn-action-icon[title*="Düzenle"],
        #templatesTableBody td div button.btn-action-icon[title*="düzenle"],
        #templatesTableBody td .action-buttons .btn-warning {
            background: #ffc107 !important;
            color: #fff !important;
        }
        
        #templatesTableBody td button.btn-action-icon[title*="Sil"],
        #templatesTableBody td button.btn-action-icon[title*="sil"],
        #templatesTableBody td div button.btn-action-icon[title*="Sil"],
        #templatesTableBody td div button.btn-action-icon[title*="sil"],
        #templatesTableBody td .action-buttons .btn-danger {
            background: #dc3545 !important;
            color: #fff !important;
        }
        
        #templatesTableBody td button.btn-action-icon i,
        #templatesTableBody td div button.btn-action-icon i,
        #templatesTableBody td .action-buttons button i {
            color: #fff !important;
            font-size: 12px !important;
        }

        /* Gruplar işlemler kolonundaki ikon butonlarını tasarıma sabitle */
        #groupsTableBody td button.btn-action-icon,
        #groupsTableBody td div button.btn-action-icon,
        #groupsTableBody tr td button.btn-action-icon,
        #groupsTableBody tr td div button.btn-action-icon {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
            max-width: 24px !important;
            max-height: 24px !important;
            line-height: 1 !important;
            border-radius: 6px !important;
            border: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
            font-size: 0 !important;
        }
        
        #groupsTableBody td button.btn-action-icon[title*="Düzenle"],
        #groupsTableBody td button.btn-action-icon[title*="düzenle"],
        #groupsTableBody td div button.btn-action-icon[title*="Düzenle"],
        #groupsTableBody td div button.btn-action-icon[title*="düzenle"] {
            background: #ffc107 !important;
            color: #fff !important;
        }
        
        #groupsTableBody td button.btn-action-icon[title*="Sil"],
        #groupsTableBody td button.btn-action-icon[title*="sil"],
        #groupsTableBody td div button.btn-action-icon[title*="Sil"],
        #groupsTableBody td div button.btn-action-icon[title*="sil"] {
            background: #dc3545 !important;
            color: #fff !important;
        }
        
        #groupsTableBody td button.btn-action-icon i,
        #groupsTableBody td div button.btn-action-icon i {
            color: #fff !important;
            font-size: 12px !important;
        }

        .btn-outline {
            background: transparent;
            border: 2px solid #f39200;
            color: #f39200;
        }

        .btn-outline:hover {
            background: #f39200;
            color: white;
        }

        .btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            min-height: 32px;
        }
        
        /* İkonlu butonlar için özel stil */
        .btn-sm.btn-icon,
        .btn-sm.btn-secondary,
        .btn-sm.btn-danger,
        .btn-sm.btn-warning,
        .btn-sm.btn-success,
        .btn-sm.btn-primary.btn-icon {
            padding: 0;
            width: 28px;
            height: 28px;
            min-height: 28px;
            font-size: 0;
        }
        
        /* btn-icon içindeki iconlar için font-size düzeltmesi */
        .btn-sm.btn-icon i,
        .btn-sm.btn-icon svg,
        .btn-icon i,
        .btn-icon svg {
            font-size: 14px !important;
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* btn-sm.btn-icon butonları için varsayılan renkler (beyaz arka plan sorununu çözmek için) */
        .btn-sm.btn-icon:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
            background: #f39200 !important;
            color: white !important;
            border: none !important;
        }
        
        .btn-sm.btn-icon.btn-success {
            background: #28a745 !important;
            color: white !important;
        }
        
        .btn-sm.btn-icon.btn-success:hover {
            background: #218838 !important;
        }
        
        .btn-sm.btn-icon.btn-info {
            background: #17a2b8 !important;
            color: white !important;
        }
        
        .btn-sm.btn-icon.btn-info:hover {
            background: #138496 !important;
        }
        
        .btn-sm.btn-icon.btn-primary {
            background: #f39200 !important;
            color: white !important;
        }
        
        .btn-sm.btn-icon.btn-primary:hover {
            background: #e08500 !important;
        }
        
        .btn-sm.btn-icon.btn-secondary {
            background: #6c757d !important;
            color: white !important;
        }
        
        .btn-sm.btn-icon.btn-secondary:hover {
            background: #5a6268 !important;
        }
        
        /* btn-sm.btn-icon butonları içindeki iconlar için renk */
        .btn-sm.btn-icon i,
        .btn-sm.btn-icon svg {
            color: white !important;
        }

        .btn-full {
            width: 100%;
        }

        /* Main App Section */
        .app-section {
            display: none;
            min-height: 100vh;
            flex-direction: row;
        }

        .app-section.active {
            display: flex;
        }
        
        /* Mobil görünümde app-section tam genişlik */
        @media (max-width: 991px) {
            .app-section {
                width: 100vw !important;
                max-width: 100vw !important;
                margin: 0 !important;
                padding: 0 !important;
            }
        }

        /* Mobile Menu Toggle Button */
        .mobile-menu-toggle {
            display: none;
            position: absolute;
            top: 1rem;
            right: 1rem;
        z-index: var(--z-index-mobile-toggle);
            background: #f39200;
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 8px;
            cursor: pointer;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px;
            padding: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
        }

        .mobile-menu-toggle:hover {
            background: #e08500;
            transform: scale(1.05);
        }

        .mobile-menu-toggle span {
            display: block;
            width: 22px;
            height: 2px;
            background: white;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        .mobile-menu-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }

        .mobile-menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .mobile-menu-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }

        /* Mobile Overlay - Sadece mobilde görünür - Optimize edilmiş */
        .mobile-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            z-index: var(--z-index-mobile-overlay);
            opacity: 0;
            transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
            touch-action: none;
            pointer-events: none;
            /* GPU hızlandırma */
            will-change: opacity;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .mobile-overlay.active {
            display: block;
            opacity: 1;
            pointer-events: auto;
        }
        
        /* Desktop'ta overlay kesinlikle görünmez ve tıklamaları engellemez */
        @media (min-width: 992px) {
            .mobile-overlay {
                display: none !important;
                pointer-events: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                z-index: -1 !important;
            }
        }
        
        /* Mobilde overlay sadece aktif olduğunda görünür ve tıklanabilir */
        @media (max-width: 991px) {
            .mobile-overlay:not(.active) {
                pointer-events: none;
            }
            
            .mobile-overlay.active {
                pointer-events: auto;
            }
        }

        /* Sidebar - Icon Navigation */
        .sidebar {
            width: 180px;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            border-right: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            padding: 1rem 0.75rem;
            overflow-y: auto;
            position: fixed;
            height: 100vh;
            top: 0;
            left: 0;
        z-index: var(--z-index-sidebar);
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        -webkit-overflow-scrolling: touch;
        }
        
        /* Masaüstü görünümde sidebar genişliği ve scrollbar */
        @media (min-width: 992px) {
            .sidebar {
                width: 200px;
            }
            
            /* Scrollbar varsayılan olarak gizli */
            .sidebar::-webkit-scrollbar {
                width: 6px;
            }
            
            .sidebar::-webkit-scrollbar-track {
                background: transparent;
            }
            
            .sidebar::-webkit-scrollbar-thumb {
                background: transparent;
                border-radius: 3px;
                transition: background 0.3s ease;
            }
            
            /* Hover ile scrollbar görünür */
            .sidebar:hover::-webkit-scrollbar-thumb {
                background: rgba(243, 146, 0, 0.3);
            }
            
            .sidebar:hover::-webkit-scrollbar-thumb:hover {
                background: rgba(243, 146, 0, 0.5);
            }
            
            /* Firefox için scrollbar */
            .sidebar {
                scrollbar-width: thin;
                scrollbar-color: transparent transparent;
            }
            
            .sidebar:hover {
                scrollbar-color: rgba(243, 146, 0, 0.3) transparent;
            }
        }

    /* Sidebar logo - Desktop görünümde göster */
        .sidebar-logo {
            width: 100%;
            max-width: 160px;
            height: auto;
            margin-bottom: 0.75rem;
            margin-left: auto;
            position: relative;
            margin-right: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border-radius: 12px;
            padding: 0.4rem;
            box-shadow: none;
            cursor: pointer;
            transition: opacity 0.2s;
        }
    
    .sidebar-logo:hover {
        opacity: 0.8;
    }
    
    .sidebar-logo svg {
        width: 100%;
        height: auto;
        max-width: 160px;
        max-height: 50px;
        display: block;
        object-fit: contain;
    }
    
    .sidebar-logo::after {
        content: '';
        position: absolute;
        bottom: -0.75rem;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 2px;
        background: linear-gradient(to right, transparent, #f39200 20%, #f39200 80%, transparent);
        animation: menuLinePulse 2s ease-in-out infinite;
        box-shadow: 0 0 8px rgba(243, 146, 0, 0.5);
    }
    
    @keyframes menuLinePulse {
        0%, 100% {
            opacity: 0.6;
            width: 30px;
            box-shadow: 0 0 8px rgba(243, 146, 0, 0.5);
        }
        50% {
            opacity: 1;
            width: 50px;
            box-shadow: 0 0 12px rgba(243, 146, 0, 0.8);
        }
    }

        .sidebar-logo:hover {
            opacity: 0.8;
        }

        .sidebar-logo svg {
            width: 100%;
            height: auto;
            max-width: 160px;
            max-height: 50px;
            display: block;
            object-fit: contain;
        }
        
        .sidebar-logo::after {
            content: '';
            position: absolute;
            bottom: -0.75rem;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 2px;
            background: linear-gradient(to right, transparent, #f39200 20%, #f39200 80%, transparent);
            animation: menuLinePulse 2s ease-in-out infinite;
            box-shadow: 0 0 8px rgba(243, 146, 0, 0.5);
        }

        /* Mobile Logo */
        .mobile-logo {
            display: none;
            width: 100%;
            max-width: 180px;
            height: auto;
            margin: 0 auto 1.5rem;
            padding: 0.75rem;
            background: transparent;
            border-radius: 12px;
            cursor: pointer;
            transition: opacity 0.2s;
        position: relative;
        z-index: var(--z-index-base);
        }

        .mobile-logo:hover {
            opacity: 0.8;
        }

        .mobile-logo svg {
            width: 100%;
            height: auto;
            max-height: 50px;
            object-fit: contain;
        }

        .sidebar-title {
            display: none;
            line-height: 1.3;
        }

        .sidebar-nav {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            width: 100%;
            flex: 1;
            padding-top: 1rem;
        }

        .nav-section {
            margin-bottom: 1rem;
        }

        .nav-section-bottom {
            margin-top: auto;
            margin-bottom: 0;
            padding-top: 0.75rem;
        }

        .nav-section-label {
            font-size: 0.5rem !important;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 0 0.5rem;
            margin-bottom: 0.4rem;
            font-weight: 700;
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            width: 100%;
            height: 38px;
            border-radius: 8px;
            color: #666;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            padding: 0 0.5rem;
            position: relative;
            background: transparent;
            font-size: 0.8rem;
            min-width: 0;
            overflow: hidden;
        }

        .nav-item:hover {
            background: rgba(243, 146, 0, 0.1);
            color: #f39200;
        }

        .nav-item.active {
            background: linear-gradient(135deg, #f39200 0%, #ff6b00 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(243, 146, 0, 0.3);
        }

        .nav-item.active .nav-item-icon {
            color: white !important;
        }

        .nav-item-icon {
        font-size: 1rem;
            width: 20px;
            text-align: center;
            flex-shrink: 0;
        }

        .nav-item-text {
            display: block;
            font-size: 0.8rem;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            min-width: 0;
        }

        .sidebar-bottom {
            margin-top: 0;
            padding-top: 0.75rem;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
        }

        .sidebar-profile {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f39200 0%, #ff6b00 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 1rem;
            box-shadow: 0 4px 12px rgba(243, 146, 0, 0.3);
            cursor: pointer;
            transition: transform 0.2s;
        }

        .sidebar-profile:hover {
            transform: scale(1.1);
        }

        .main-content {
            flex: 1;
            padding: 1.5rem;
            overflow-y: auto;
            margin-left: 120px;
            min-height: 100vh;
            background: #f5f5f5;
            overflow-x: hidden;
            width: calc(100% - 120px);
            max-width: calc(100vw - 120px);
            box-sizing: border-box;
            position: relative;
            z-index: var(--z-index-base);
        }
        
        /* Masaüstü görünümde main-content margin güncellemesi */
        @media (min-width: 992px) {
            .main-content {
                margin-left: 200px;
                width: calc(100% - 200px);
                max-width: calc(100vw - 200px);
            }
        }

        .section-content {
            margin-top: 0;
            padding-top: 0;
            display: none;
            width: 100%;
            min-height: 100%;
            opacity: 1;
            visibility: visible;
            position: relative;
            z-index: 1;
            height: auto;
            overflow: visible;
        max-width: 100%;
        box-sizing: border-box;
        }
        
        /* Section content içindeki card'lar için genişlik */
        .section-content .card {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        
        /* Card body genişlik kontrolü - tablolar için */
        .card-body[style*="overflow-x"] {
            width: 100% !important;
            box-sizing: border-box !important;
        }
        
        /* Tablolar için genişlik düzeltmesi */
        .card-body table,
        .card-body .table {
            width: 100% !important;
            max-width: 100% !important;
        }
        
        /* min-width: 100% yerine width: 100% kullan */
        table[style*="min-width: 100%"],
        .table[style*="min-width: 100%"] {
            min-width: auto !important;
            width: 100% !important;
        }
        
        .section-content.active,
        .section-content[style*="display: block"] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
            height: auto !important;
            overflow: visible !important;
        }

        /* Cards */
        .card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            margin-bottom: 1.25rem;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.08);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .card:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        }

        .card-header {
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            font-weight: 600;
            font-size: 0.95rem;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 255, 255, 0.6);
            min-height: 48px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        }

        .card-body {
            padding: 1.25rem;
            background: rgba(255, 255, 255, 0.8);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        }
        
        /* Card oranları - tutarlı yükseklik */
        .card.chart-card {
            min-height: 300px;
            max-height: 400px;
            display: flex;
            flex-direction: column;
        }
        
        .chart-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: #333;
        }
        
        .chart-container {
            flex: 1;
            min-height: 250px;
            max-height: 350px;
        }
        
        .card.stat-card {
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* Forms */
        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        }

        .form-group-full {
            grid-column: 1 / -1;
        }

        .text-danger {
            color: #dc3545;
        }

        .text-muted {
            color: #6c757d;
            font-size: 0.875rem;
        }

        /* Control Items */
        .control-section {
            margin-bottom: 2rem;
        }

        .control-section-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #f39200;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #f39200;
        }

        .control-section-items {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 0.75rem !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        }

        .control-item {
            background: #fafafa;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 0.75rem;
            transition: all 0.2s;
        }

        .control-item:hover {
            border-color: #f39200;
            background: white;
        }

        .control-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0;
        }

        .control-item-title {
            font-weight: 500;
            color: #333;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.5rem;
        }

        .control-item-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: #f39200;
            color: white;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            flex-shrink: 0;
        }

        .control-item-reminder {
            font-size: 0.75rem;
            opacity: 0.5;
            color: #666;
            margin-top: 0.25rem;
        }

        .control-buttons {
            display: flex;
            gap: 0.5rem;
        }

        .control-btn {
            padding: 0.6rem 1.2rem;
            border: 2px solid;
            border-radius: 20px;
            background: #f8f9fa;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 500;
            font-size: 0.875rem;
            white-space: nowrap;
            position: relative;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }

        .control-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.4s, height 0.4s;
        }

        .control-btn:active::before {
            width: 300px;
            height: 300px;
        }

        /* Uygun Button - Pasif Durum */
        .control-btn.uygun {
            border-color: #c3e6cb;
            color: #6c757d;
            background: #f8f9fa;
            font-weight: 500;
        }

        .control-btn.uygun:hover {
            border-color: #28a745;
            background: #e8f5e9;
            color: #28a745;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(40, 167, 69, 0.15);
        }

        /* Uygun Button - Aktif Durum */
        .control-btn.uygun.active {
            border-color: #28a745;
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35);
            transform: translateY(-1px);
        }

        .control-btn.uygun.active:hover {
            box-shadow: 0 6px 16px rgba(40, 167, 69, 0.45);
            transform: translateY(-2px);
        }

        /* Uygun Değil Button - Pasif Durum */
        .control-btn.uygun-degil {
            border-color: #f5c6cb;
            color: #6c757d;
            background: #f8f9fa;
            font-weight: 500;
        }

        .control-btn.uygun-degil:hover {
            border-color: #dc3545;
            background: #fff5f5;
            color: #dc3545;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
        }

        /* Uygun Değil Button - Aktif Durum */
        .control-btn.uygun-degil.active {
            border-color: #dc3545;
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            color: white;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.35);
            transform: translateY(-1px);
        }

        .control-btn.uygun-degil.active:hover {
            box-shadow: 0 6px 16px rgba(220, 53, 69, 0.45);
            transform: translateY(-2px);
        }

        /* Table */
        .table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.875rem;
        }

    /* Table Styles - Consolidated */
        .table th,
        .table td {
            padding: 0.625rem 0.75rem;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
            font-size: 0.875rem;
            line-height: 1.5;
        color: #333;
        vertical-align: middle;
        }

        .table th {
            font-weight: 600;
            color: #555;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            background: #f8f9fa;
            padding: 0.75rem 0.875rem;
            white-space: nowrap;
        }
        
    /* Removed duplicate .table td - merged into consolidated version above */
        
        /* Kalite Formları Tablosu - Yatay Scroll */
        #formsTable th,
        #formsTable td {
            white-space: nowrap;
        }
        
        /* Tablo sütun genişlikleri - optimize edilmiş */
        .table th:first-child,
        .table td:first-child {
            width: auto;
            min-width: 80px;
        }
        
        .table th:nth-child(2),
        .table td:nth-child(2) {
            width: auto;
            min-width: 100px;
        }
        
        .table th:nth-child(3),
        .table td:nth-child(3) {
            width: auto;
            min-width: 120px;
        }
        
        .table th:last-child,
        .table td:last-child {
            width: auto;
            min-width: 100px;
            text-align: center;
        }
        
        /* Tablo başlıklarında ikon ve yazı tek satırda */
        #formsTable th {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        #formsTable th span {
            display: inline-block;
            margin-left: 0.25rem;
        }
        
        /* Dashboard tablosu için aynı stiller */
        #dashboardFormsTable th {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        #dashboardFormsTable th span {
            display: inline-block;
            margin-left: 0.25rem;
        }

        .table tbody tr:hover {
            background: #fafafa;
        }

        /* Form Listesi Tablosu Sütun Genişlikleri - Optimize edilmiş */
        #formsTable th:nth-child(1),
        #formsTable td:nth-child(1) {
            width: 8%;
            min-width: 70px;
            max-width: 90px;
        }

        #formsTable th:nth-child(2),
        #formsTable td:nth-child(2) {
            width: 10%;
            min-width: 90px;
            max-width: 120px;
        }

        #formsTable th:nth-child(3),
        #formsTable td:nth-child(3) {
            width: 18%;
            min-width: 140px;
        }

        #formsTable th:nth-child(4),
        #formsTable td:nth-child(4) {
            width: 18%;
            min-width: 140px;
        }

        #formsTable th:nth-child(5),
        #formsTable td:nth-child(5) {
            width: 12%;
            min-width: 100px;
        }

        #formsTable th:nth-child(6),
        #formsTable td:nth-child(6) {
            width: 10%;
            min-width: 90px;
        }

        #formsTable th:nth-child(7),
        #formsTable td:nth-child(7) {
            width: 12%;
            min-width: 100px;
        }
        
        #formsTable th:nth-child(8),
        #formsTable td:nth-child(8) {
            width: 10%;
            min-width: 90px;
        }
        
        #formsTable th:nth-child(9),
        #formsTable td:nth-child(9) {
            width: 10%;
            min-width: 100px;
            text-align: center;
        }
        
        /* Dashboard Tablosu Sütun Genişlikleri */
        #dashboardFormsTable th:nth-child(1),
        #dashboardFormsTable td:nth-child(1) {
            width: 12%;
            min-width: 80px;
            max-width: 100px;
        }

        #dashboardFormsTable th:nth-child(2),
        #dashboardFormsTable td:nth-child(2) {
            width: 15%;
            min-width: 100px;
            max-width: 130px;
        }

        #dashboardFormsTable th:nth-child(3),
        #dashboardFormsTable td:nth-child(3) {
            width: 30%;
            min-width: 150px;
        }

        #dashboardFormsTable th:nth-child(4),
        #dashboardFormsTable td:nth-child(4) {
            width: 20%;
            min-width: 120px;
        }

        #dashboardFormsTable th:nth-child(5),
        #dashboardFormsTable td:nth-child(5) {
            width: 15%;
            min-width: 100px;
            text-align: center;
        }

        /* Badge */
        .badge {
            display: inline-block;
            padding: 0.35em 0.65em;
            font-size: 0.75em;
            font-weight: 600;
            border-radius: 6px;
        }

        .badge-success {
            background: #d4edda;
            color: #155724;
        }

        .badge-danger {
            background: #f8d7da;
            color: #721c24;
        }

        .badge-warning {
            background: #fff3cd;
            color: #856404;
        }

        .control-item-admin {
            background: #fafafa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            transition: all 0.2s;
            cursor: move;
        }

        .control-item-admin:hover {
            border-color: #f39200;
            background: white;
            box-shadow: 0 2px 8px rgba(243, 146, 0, 0.1);
        }

        .control-item-admin.dragging {
            opacity: 0.5;
        }

        .badge-secondary {
            background: #e2e3e5;
            color: #383d41;
        }

        /* Stats */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        }

        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 1rem 1.25rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            min-height: 140px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            text-align: center;
        }

        .stat-card h3 {
            font-size: 1.75rem;
            font-weight: 700;
            color: #f39200;
            margin: 0.375rem 0;
            line-height: 1.2;
        }

        .stat-card h6 {
            color: #666;
            font-size: 0.8rem;
            font-weight: 500;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        
        .stat-card > div[style*="border-top"] {
            margin-top: auto;
        }
        
        .stat-label {
            font-size: 0.8rem;
            color: #666;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            font-weight: 500;
        }
        
        .stat-value {
            font-size: 1.75rem;
            font-weight: 700;
            color: #333;
            line-height: 1.2;
        }

        /* Print Preview */
        .print-container {
            max-width: 210mm;
            margin: 0 auto;
            padding: 20mm;
            background: white;
            font-family: var(--font-family-base);
        }

        @media print {
            body { 
                margin: 0; 
                padding: 0; 
                background: white;
        }
            .no-print { 
                display: none !important; 
        }
            .print-container { 
                margin: 0 !important; 
                padding: 8mm !important; 
                box-shadow: none !important;
                font-size: 8pt !important;
                max-width: 100% !important;
                width: 210mm !important;
                min-height: 297mm !important;
                max-height: 297mm !important;
                overflow: hidden !important;
        }
            @page {
                margin: 0;
                size: A4 portrait;
        }
        }
        
        @media screen {
            .print-container {
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
                margin: 20px auto;
            }
        }

        /* Page Title */
        .page-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 1rem;
            margin-top: 0;
            padding-top: 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        /* Responsive */
        /* Responsive Typography - Mobile */
        @media (max-width: 768px) {
            /* Typography Scale - Mobile Headings */
            h1 {
                font-size: var(--font-size-2xl-mobile) !important;
            }
            
            h2 {
                font-size: var(--font-size-xl-mobile) !important;
            }
            
            h3 {
                font-size: var(--font-size-lg-mobile) !important;
            }
            
            h4 {
                font-size: var(--font-size-base-mobile) !important;
            }
            
            h5 {
                font-size: var(--font-size-sm-mobile) !important;
            }
            
            h6 {
                font-size: var(--font-size-xs-mobile) !important;
            }
            
            /* Typography Scale - Mobile Body */
            body {
                font-size: var(--font-size-base-mobile);
            }
            
            p {
                font-size: var(--font-size-sm-mobile) !important;
            }
            
            label {
                font-size: var(--font-size-sm-mobile) !important;
            }
            
            input, textarea, select, button {
                font-size: var(--font-size-base-mobile) !important;
            }
            
            /* Page Title Mobile */
            .page-title {
                font-size: var(--font-size-xl-mobile) !important;
            }
            
            /* Login Section - Mobilde solar energy temalı arka plan */
            .login-section {
                background: linear-gradient(135deg, #FFD700 0%, #FF8C00 25%, #FFA500 50%, #87CEEB 75%, #4A90E2 100%) !important;
                min-height: 100vh !important;
                padding: 1rem !important;
            }
            
            .login-section::before,
            .login-section::after {
                display: none !important;
            }
            
            .login-container {
                flex-direction: column;
                max-width: 65% !important;
                width: 65% !important;
                margin: 1.5rem auto !important;
                padding: 2.5rem 2rem !important;
                min-height: auto !important;
                background: white !important;
                border-radius: 20px !important;
                box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
            }

            .login-left {
                display: none;
            }

            .login-logo {
                text-align: center !important;
                margin-bottom: 1.5rem !important;
            }

            .login-logo svg {
                height: 32px !important;
                max-width: 200px !important;
                margin: 0 auto 1rem auto !important;
            }

            .login-welcome {
                font-size: 1.8rem !important;
                font-weight: 600 !important;
                color: #f39200 !important;
                margin-bottom: 0.5rem !important;
                text-align: center !important;
                letter-spacing: 0.5px !important;
            }

            .login-title {
                font-size: 1.75rem !important;
                font-weight: 600 !important;
                margin-bottom: 0.5rem !important;
                text-align: center !important;
                color: #1d1d1b !important;
            }
            
            .login-subtitle {
                font-size: 1.1rem !important;
                margin-bottom: 1.5rem !important;
                text-align: center !important;
                color: #6c757d !important;
            }
            
            .login-right {
                padding: 2.5rem 1.5rem !important;
            }
            
            .form-group {
                margin-bottom: 1.25rem !important;
            }
            
            .form-label {
                font-size: 0.9rem !important;
                font-weight: 500 !important;
                margin-bottom: 0.5rem !important;
                color: #1d1d1b !important;
            }
            
            .form-control {
                font-size: 0.95rem !important;
                padding: 0.75rem 1rem !important;
                border-radius: 8px !important;
                border: 1.5px solid #e0e0e0 !important;
                transition: all 0.3s ease !important;
            }

            .form-control:focus {
                border-color: #f39200 !important;
                box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.1) !important;
                outline: none !important;
            }
            
            .btn-primary {
                font-size: 1rem !important;
                font-weight: 600 !important;
                padding: 0.875rem 1.5rem !important;
                min-height: 50px !important;
                border-radius: 8px !important;
                background: linear-gradient(135deg, #f39200 0%, #ff6b00 100%) !important;
                border: none !important;
                box-shadow: 0 4px 12px rgba(243, 146, 0, 0.3) !important;
                transition: all 0.3s ease !important;
            }

            .btn-primary:hover {
                transform: translateY(-2px) !important;
                box-shadow: 0 6px 16px rgba(243, 146, 0, 0.4) !important;
            }

            .btn-primary:active {
                transform: translateY(0) !important;
            }

            /* Mobile Menu Toggle */
            .mobile-menu-toggle {
                display: flex;
            }

            .sidebar {
                transform: translateX(-100%) !important;
                transition: transform 0.3s ease !important;
                position: fixed !important;
                z-index: var(--z-index-sidebar) !important;
                height: 100vh !important;
                top: 0 !important;
                width: 280px !important;
                will-change: transform !important;
                padding-top: 4rem !important;
                visibility: visible !important;
            }
            
            /* Sidebar açık değilse kesinlikle gizli */
            .sidebar:not(.open) {
                transform: translateX(-100%) !important;
            }
        
        /* Sidebar içindeki logoyu gizle - Sadece mobil görünümde */
        .sidebar .sidebar-logo {
            display: none !important;
        }
        
        /* Mobil logo - Sadece mobil görünümde göster */
        .mobile-logo {
            display: block !important;
        }
        
        /* Sidebar nav - Kategorileri biraz yukarı al */
        .sidebar-nav {
            margin-top: 0.5rem !important;
            padding-top: 0.5rem !important;
        }
        
        /* Sidebar section - İlk section'ı biraz yukarı al */
        .sidebar .nav-section:first-child {
            margin-top: 0.5rem !important;
        }
        
        /* Sidebar padding-top - Kategorileri biraz yukarı almak için */
        .sidebar {
            padding-top: 3rem !important;
        }

        .sidebar.open {
            transform: translateX(0) !important;
        }

            .main-content,
            .main-content-wrapper {
                margin-left: 0 !important;
                margin-right: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
                padding-top: 3.5rem !important;
                padding-bottom: 0.5rem !important;
                box-sizing: border-box !important;
            }
        
        /* Dashboard (Anasayfa) mobil görünüm optimizasyonları - Sadece aktif section içinde */
        .section-content.active #dashboard {
            padding-top: 1rem !important;
        }
        
        /* Genel dashboard padding'i kaldır - Sadece aktif section içindeki dashboard için padding uygulanacak */
        #dashboard {
            padding-top: 0 !important;
        }
        
        /* Dashboard hoşgeldiniz kutusu ile üst mesafe */
        #dashboard .card:first-child {
            margin-top: 0.1rem !important;
        }
        
        /* Dashboard tarih ve saat font boyutları */
        #dashboardDate {
            font-size: 0.7rem !important;
            color: #6c757d !important;
            font-weight: 500 !important;
        }
        
        #dashboardClock {
            font-size: 1rem !important;
            color: #f39200 !important;
            font-weight: 700 !important;
            font-family: var(--font-family-monospace) !important;
            letter-spacing: 1px !important;
        }
        
        /* Dashboard başlık ve genel font boyutları */
        #dashboard h1,
        #dashboard h2,
        #dashboard h3,
        #dashboard h4,
        #dashboard h5,
        #dashboard h6 {
            font-size: 1.1rem !important;
        }
        
        #dashboard .page-title {
            font-size: 1.1rem !important;
            margin-bottom: 0.75rem !important;
        }
        
        #dashboard .card-header h5,
        #dashboard .card-header h6 {
            font-size: 0.9rem !important;
        }
        
        #dashboard .card-body {
            font-size: 0.8rem !important;
            padding: 0.75rem !important;
            }

        /* Tüm üst başlıklar mobilde küçült - Tüm sayfalarda */
        .page-title,
        h1, h2, h3, h4, h5, h6,
        .card-header h1,
        .card-header h2,
        .card-header h3,
        .card-header h4,
        .card-header h5,
        .card-header h6,
        .card-header .page-title,
        .card-header span[style*="font-size"],
        div[style*="font-size: 1.25rem"] h2,
        div[style*="font-size: 1.25rem"] h3,
        div[style*="font-size: 1.5rem"],
        div[style*="font-size: 1.75rem"],
        .section-content.active h1,
        .section-content.active h2,
        .section-content.active .page-title,
        .section-content.active .card-header h1,
        .section-content.active .card-header h2,
        .section-content.active .card-header h3 {
            font-size: 0.85rem !important;
        }
        
        /* Görevler ve sipariş sayfalarında üst başlıklar küçült */
        #tasks h2,
        #tasks .card-body h2,
        #orders h2,
        #orders .card-body h2,
        #tasks div[style*="font-size: 1.5rem"] h2,
        #orders div[style*="font-size: 1.5rem"] h2 {
            font-size: 0.85rem !important;
        }
        
        /* Kategori isimleri mobilde küçült */
        .section-content.active .card-header h1,
        .section-content.active .card-header h2,
        .section-content.active .card-header h3,
        .section-content.active .card-header h4,
        .section-content.active .card-header h5,
        .section-content.active .card-header h6 {
            font-size: 0.8rem !important;
        }
        
        /* Başlıkların altındaki açıklamalar mobilde küçült */
        h1 + p,
        h2 + p,
        h3 + p,
        h4 + p,
        h5 + p,
        h6 + p,
        .page-title + p,
        .card-header p,
        .card-header span[style*="font-size: 0.9rem"],
        .card-header span[style*="font-size: 0.875rem"],
        div[style*="font-size: 0.9rem"],
        div[style*="font-size: 0.875rem"],
        p[style*="font-size: 0.9rem"],
        p[style*="font-size: 0.875rem"],
        span[style*="font-size: 0.9rem"],
        span[style*="font-size: 0.875rem"],
        .text-muted,
        .text-secondary {
            font-size: 0.7rem !important;
        }
        
        /* Başlık altındaki açıklamalar - Genel seçiciler */
        .card-body > p:first-of-type,
        .card-body > div > p:first-of-type,
        h1 ~ p,
        h2 ~ p,
        h3 ~ p {
            font-size: 0.7rem !important;
        }
        
        /* Dashboard stat kartları */
        #dashboard .stat-card {
            padding: 0.75rem !important;
            min-height: 100px !important;
        }
        
        #dashboard .stat-card h3 {
            font-size: 1.25rem !important;
        }
        
        #dashboard .stat-card h6 {
            font-size: 0.7rem !important;
        }
        
        /* Dashboard hoş geldiniz mesajı */
        #dashboard .welcome-message,
        #dashboard [style*="font-size: 1.25rem"] {
            font-size: 0.9rem !important;
        }
        
        /* Dashboard butonlar */
        #dashboard .btn {
            font-size: 0.75rem !important;
            padding: 0.4rem 0.75rem !important;
        }
        
        /* Dashboard tablolar */
        #dashboard table {
            font-size: 0.7rem !important;
        }
        
        #dashboard table th,
        #dashboard table td {
            font-size: 0.7rem !important;
            padding: 0.4rem 0.3rem !important;
        }

        /* Mobile Logo - Yukarı al */
            .mobile-logo {
                display: block;
            position: fixed;
            top: 0.5rem !important;
            left: 1rem;
            z-index: var(--z-index-mobile-toggle);
            width: calc(100vw - 2rem);
            max-width: 160px;
            height: auto;
            margin: 0;
            padding: 0.5rem;
            background: transparent;
            border-radius: 8px;
            display: flex !important;
            align-items: center !important;
        }
        
        .mobile-logo svg {
            width: 100%;
            height: auto;
            max-height: 50px;
            object-fit: contain;
        }
        
        /* Logo altına ince turuncu çizgi - Menü iconuna kadar - Animasyonlu */
        .mobile-logo::after {
            content: '';
            position: absolute;
            bottom: -0.25rem;
            left: 0.5rem;
            width: calc(100vw - 1rem - 32px - 1rem - 1rem);
            height: 0.5px;
            background: linear-gradient(to right, #f39200, rgba(243, 146, 0, 0.3));
            z-index: -1;
            animation: slideLine 2s ease-in-out infinite;
        }
        
        /* Logo altı çizgi kayar animasyon - Sadece mobil - Turuncu */
        @keyframes slideLine {
            0% {
                transform: translateX(-10px);
                opacity: 0.4;
            }
            50% {
                transform: translateX(0);
                opacity: 1;
            }
            100% {
                transform: translateX(10px);
                opacity: 0.4;
            }
        }
        
        /* Mobile Menu Toggle Position Fix - Logo ile tam yatay hizalı */
        .mobile-menu-toggle {
            position: absolute;
            top: 1rem !important;
            right: 1rem;
            z-index: var(--z-index-mobile-toggle);
            width: 32px !important;
            height: 32px !important;
            border-radius: 6px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        
        .mobile-menu-toggle span {
            width: 16px !important;
            height: 2px !important;
        }
        
        .mobile-menu-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(4px, 4px) !important;
        }
        
        .mobile-menu-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(4px, -4px) !important;
        }
        
        /* Prevent body scroll when menu is open - Scroll sorununu düzelt */
        body.menu-open {
            overflow: hidden !important;
            position: fixed !important;
            width: 100% !important;
            height: 100% !important;
        }
        
        /* Mobilde scroll sorununu düzelt */
        body {
            overflow-x: hidden !important;
            overflow-y: auto !important;
            position: relative !important;
            width: 100% !important;
            height: auto !important;
        }
        
        body:not(.menu-open) {
            position: static !important;
        }
        
        /* Main content scroll düzeltmesi */
        .main-content {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            height: auto !important;
            min-height: 100vh !important;
            }

            .form-row {
            grid-template-columns: 1fr !important;
            width: 100% !important;
            max-width: 100% !important;
            }

            .control-section-items {
            grid-template-columns: repeat(3, 1fr) !important;
            width: 100% !important;
            max-width: 100% !important;
            }

            .control-item-header {
                flex-direction: column;
            }

            .control-buttons {
                width: 100%;
            }

            .control-btn {
                flex: 1;
            }

            /* Page Title */
            .page-title {
                font-size: 1.25rem;
                flex-wrap: wrap;
                gap: 0.5rem;
            }

            /* Cards */
            .card {
                margin-bottom: 1rem;
            }

            .card-header {
                flex-direction: column;
                gap: 0.75rem;
                align-items: flex-start !important;
            }

            /* Stats Grid */
            .stats-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 0.75rem !important;
            width: 100% !important;
            max-width: 100% !important;
            }

            .stat-card {
                padding: 1rem;
            }

            .stat-card h3 {
                font-size: 1.5rem;
                margin: 0.25rem 0;
            }

            .stat-card h6 {
                font-size: 0.75rem;
            }

            /* Dashboard Grid - Mobilde tek sütun */
            #dashboard > div[style*="grid-template-columns"] {
                grid-template-columns: 1fr !important;
            }

            /* Charts */
            .chart-container {
                margin-bottom: 1.5rem;
            }

            /* Tables */
            .table-responsive {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            table {
            font-size: 0.8rem !important;
        }
        
        /* Tablo başlıkları ve içerikleri için daha okunabilir font - TÜM tablolar */
        table th,
        table td,
        .table th,
        .table td {
            font-size: 0.8rem !important;
            padding: 0.75rem 0.6rem !important;
        }
        
        table th,
        .table th {
            font-size: 0.8rem !important;
            font-weight: 600 !important;
        }
        
        /* Tüm tablo ID'leri için */
        #formsTable th,
        #formsTable td,
        #quotesTable th,
        #quotesTable td,
        #tasksTable th,
        #tasksTable td,
        #usersTable th,
        #usersTable td,
        #companiesTable th,
        #companiesTable td,
        #personnelTable th,
        #personnelTable td {
            font-size: 0.8rem !important;
            padding: 0.75rem 0.6rem !important;
        }
        
        #formsTable th,
        #quotesTable th,
        #tasksTable th,
        #usersTable th,
        #companiesTable th,
        #personnelTable th {
            font-size: 0.8rem !important;
            font-weight: 600 !important;
            }

            /* Buttons */
            .btn {
                padding: 0.5rem 1rem;
                font-size: 0.875rem;
                min-height: 44px; /* Touch-friendly minimum size */
                touch-action: manipulation;
            }
        
        /* btn-create-new için özel override - Buttons kuralından önce */
        .btn.btn-create-new,
        button.btn.btn-create-new,
        button.btn-create-new,
        .btn-create-new {
            min-height: 24px !important;
            max-height: 24px !important;
            padding: 0.15rem !important;
            height: 24px !important;
            }

            /* Forms */
            .form-group {
                margin-bottom: 1rem;
            }

            /* Popup */
            .popup {
                width: 90%;
                max-width: 350px;
                padding: 1.25rem;
                max-height: 85vh;
            }
            
            .popup-title {
                font-size: 1rem;
                margin-bottom: 0.5rem;
            }
            
            .popup-message {
                font-size: 0.8125rem;
                margin-bottom: 0.75rem;
            }
            
            .popup-buttons {
                margin-top: 0.75rem;
                gap: 0.5rem;
            }
            
            .popup-close {
                padding: 0.5rem 1rem;
                font-size: 0.8125rem;
            }

            /* Database Status */
            #dbConnectionStatus {
                font-size: 0.75rem;
            }

            #dbStatusLed {
                width: 10px;
                height: 10px;
            }

            /* Input Groups */
            .input-group {
                flex-direction: column;
            }

            .input-group .form-select,
            .input-group .form-control {
                width: 100%;
                margin-bottom: 0.5rem;
            }

            /* Select Boxes */
            .form-select {
                font-size: 0.875rem;
            }

            /* Navigation */
            .nav-item-text {
                display: block;
            }

            /* Form Rows */
            .form-row {
                gap: 0.75rem;
            }

            /* Control Items */
            .control-item {
                margin-bottom: 1rem;
            }

            /* Card Actions */
            .card-header button {
                width: 100%;
            }

            /* Stats Cards */
            .stat-card {
                padding: 1rem;
            }

            /* Filter Groups */
            .filter-group {
                flex-direction: column;
                gap: 0.75rem;
            }

            .filter-group .form-select,
            .filter-group .form-control {
                width: 100%;
            }

            /* Button Groups */
            .btn-group {
                flex-direction: column;
                width: 100%;
            }

            .btn-group .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }

            /* Modal */
            .modal {
                padding: 1rem;
            }

            .modal-content {
                margin: 1rem;
            }

            /* Gallery */
            .gallery-upload-content {
                padding: 1.5rem;
            }

            /* Sidebar Navigation */
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }
            
            .sidebar.open {
                transform: translateX(0);
            }

            .sidebar-nav {
                padding: 0;
            }

            .nav-section {
                margin-bottom: 1rem;
            }

            .nav-item {
                padding: 0.75rem;
                justify-content: flex-start;
                width: 100%;
            }
            
            .nav-item-text {
                display: block !important;
            }
            
            /* Main content mobilde sidebar için alan bırak */
            .main-content {
                margin-left: 0 !important;
                width: 100% !important;
            }
            
            /* Dashboard Hoş Geldiniz Kartı */
            #dashboard .card-body {
                padding: 0.875rem !important;
            }
            
            /* Butonlar mobilde daha küçük */
            #dashboard .btn-sm {
                padding: 0.4rem 0.7rem !important;
                font-size: 0.75rem !important;
            }
            
            /* Veritabanı durumu metni */
            #dbStatusText {
                font-size: 0.7rem !important;
            }
            
            /* Detay Panelleri */
            #taskDetailPanel {
                width: 100% !important;
                max-width: 100% !important;
            }
            
            /* Görevler bölümü - Liste ve detay yan yana değil */
            #orders > div[style*="display: flex"] {
                flex-direction: column !important;
            }
            
            #orderDetailPanel {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
            z-index: var(--z-index-modal) !important;
                border-radius: 0 !important;
            }
            
        
        /* Yeni Oluştur Butonları - Mobil - Arama kutusu ile aynı boyut (yuvarlak) */
        .btn.btn-create-new,
        button.btn-create-new,
        button.btn.btn-create-new,
        .btn-create-new {
            padding: 0 !important;
            gap: 0 !important;
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            max-width: 32px !important;
            max-height: 32px !important;
            min-height: 32px !important;
            border-radius: 50% !important;
            font-size: 0 !important;
            justify-content: center !important;
            align-items: center !important;
            box-shadow: 0 2px 6px rgba(243, 146, 0, 0.2) !important;
            flex-shrink: 0 !important;
            display: flex !important;
            margin-bottom: 0 !important;
        }
        
        .btn.btn-create-new svg,
        button.btn-create-new svg,
        button.btn.btn-create-new svg,
        .btn-create-new svg {
            width: 14px !important;
            height: 14px !important;
            flex-shrink: 0 !important;
            margin: 0 !important;
            color: #ffffff !important;
            fill: #ffffff !important;
            stroke: #ffffff !important;
        }
        
        /* btn-create-new içindeki iconlar (i, svg) - Beyaz renk ve görünür (mobil) */
        .btn.btn-create-new i,
        button.btn-create-new i,
        button.btn.btn-create-new i,
        .btn-create-new i {
            color: #ffffff !important;
            fill: #ffffff !important;
            stroke: #ffffff !important;
            font-size: 0.875rem !important;
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: auto !important;
            height: auto !important;
            line-height: 1 !important;
            margin: 0 !important;
        }
        
        .btn.btn-create-new svg *,
        button.btn-create-new svg *,
        .btn-create-new svg * {
            color: #ffffff !important;
            fill: #ffffff !important;
            stroke: #ffffff !important;
        }
        
        /* btn-create-new içindeki text'leri gizle (sadece mobil görünümde) */
        .btn.btn-create-new > *:not(svg),
        button.btn-create-new > *:not(svg),
        .btn-create-new > *:not(svg) {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            opacity: 0 !important;
            visibility: hidden !important;
        }
        
        /* btn-create-new içindeki text'leri gizle (sadece mobil görünümde) */
        .btn-create-new > *:not(svg) {
            display: none !important;
        }
        
        /* Arama Kutusu - Mobil - Sadece Icon */
        .search-box {
            padding: 0.2rem !important;
            gap: 0 !important;
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            border-radius: 50% !important;
            cursor: pointer !important;
            justify-content: center !important;
            transition: all 0.3s ease !important;
        }
        
        .search-box:hover {
            background: rgba(243, 146, 0, 0.1) !important;
        }
        
        .search-box svg {
            width: 16px !important;
            height: 16px !important;
            flex-shrink: 0 !important;
        }
        
        .search-box input {
            display: none !important;
            width: 0 !important;
            min-width: 0 !important;
            padding: 0 !important;
            font-size: 0 !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
        
        /* Arama Kutusu Açık Durumu - Mobil */
        .search-box.active {
            width: 120px !important;
            min-width: 120px !important;
            border-radius: 20px !important;
            padding: 0.2rem 0.4rem !important;
            gap: 0.3rem !important;
        }
        
        .search-box.active input {
            display: block !important;
            width: 80px !important;
            min-width: 80px !important;
            padding: 0 !important;
            font-size: 0.7rem !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }
        
        .search-box input:focus {
            outline: none !important;
        }
        
        .search-box.active input::placeholder {
            font-size: 0.65rem !important;
        }
        
        .search-box.active svg {
            width: 14px !important;
            height: 14px !important;
        }
        
        /* Popup'lar mobilde - Logo ile çakışmayı önle */
        .popup-overlay {
                padding: 1rem !important;
            z-index: var(--z-index-modal) !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            }
            
            .popup {
                width: 95% !important;
                max-width: 95% !important;
                max-height: 90vh !important;
                overflow-y: auto !important;
            margin-top: 4rem !important;
            z-index: calc(var(--z-index-modal) + 1) !important;
        }
        
        /* Modal'lar mobilde - Logo ile çakışmayı önle */
        .modal {
            z-index: var(--z-index-modal) !important;
            padding-top: 4rem !important;
        }
        
        .modal-content {
            margin-top: 4rem !important;
            z-index: calc(var(--z-index-modal) + 1) !important;
            }
            
            /* Genel silme modalı mobilde */
            #formDeleteModal {
                padding: 1rem !important;
            }
            
            #formDeleteModal .modal-content {
                width: 95% !important;
                max-width: 95% !important;
                margin: 0 !important;
            }
            
            #formDeleteModal .modal-header {
                padding: 1rem !important;
                flex-wrap: wrap !important;
            }
            
            #formDeleteModal .modal-header > div:first-child {
                width: 40px !important;
                height: 40px !important;
            }
            
            #formDeleteModal .modal-header h3 {
                font-size: 1rem !important;
            }
            
            #formDeleteModal .modal-header #formDeleteModalSubtitle {
                font-size: 0.75rem !important;
            }
            
            #formDeleteModal .modal-body {
                padding: 1rem !important;
            }
            
            #formDeleteModal .modal-body #formDeleteModalQuestion {
                font-size: 0.9375rem !important;
            }
            
            #formDeleteModal .modal-body #formDeleteModalItemInfo {
                font-size: 0.8125rem !important;
            }
            
            #formDeleteModal .modal-actions {
                flex-direction: column !important;
                gap: 0.5rem !important;
            }
            
            #formDeleteModal .modal-actions button {
                width: 100% !important;
                min-width: auto !important;
            }
            
            /* Modal'lar mobilde */
            .modal-overlay {
                padding: 0.5rem !important;
            }
            
            .modal-content {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
                max-height: 95vh !important;
                overflow-y: auto !important;
            }
            
            
            /* Görevler sayfası mobilde */
            #orders .card-body {
                padding: 1rem !important;
            }
            
            #orders h2 {
                font-size: 1.25rem !important;
            }
            
            #tasksTable {
                font-size: 0.75rem !important;
            }
            
            #tasksTable th,
            #tasksTable td {
                padding: 0.5rem 0.25rem !important;
            }
            
            /* Task detail panel mobilde */
            #taskDetailPanel {
                width: 100% !important;
                max-width: 100% !important;
            }
            
            /* Form oluşturma sayfası mobilde */
            #create .form-row {
                grid-template-columns: 1fr !important;
            }
            
            #create .card-body {
                padding: 1rem !important;
            }
            
            /* Kalite Formları Tablosu mobilde - Yatay Scroll */
            #list .card-body {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
            }
            
            #formsTable {
                min-width: 100% !important;
            }
            
            #formsTable th,
            #formsTable td {
                white-space: nowrap !important;
            font-size: 0.7rem !important;
            padding: 0.5rem 0.4rem !important;
        }
        
        #formsTable th {
            font-size: 0.7rem !important;
            font-weight: 600 !important;
        }
        
        /* Form listesi sayfası mobil optimizasyonu */
        #list .card-header {
            padding: 0.75rem !important;
            flex-wrap: wrap !important;
            gap: 0.5rem !important;
        }
        
        #list .card-header > span {
            font-size: 0.85rem !important;
            width: 100% !important;
            margin-bottom: 0.5rem !important;
        }
        
        /* Status filter butonları - %70 küçültme ve yan yana hizalama - TÜM SAYFALARDA */
        .status-filter-group,
        div[style*="display: flex"][style*="gap: 0.5rem"]:has(.status-filter-btn),
        div[style*="display: flex"]:has(button[data-status]),
        .filter-group,
        .category-filter-group,
        .task-filter-group,
        .quote-filter-group,
        #taskCategories,
        div[id*="Categories"],
        div[style*="display: flex"][style*="gap: 0.5rem"]:has(.task-category-item) {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 0.5rem !important;
            width: 100% !important;
            justify-content: flex-start !important;
        }
        
        /* Görevler filtreleme butonları 2 sütun */
        .task-category-item {
            width: 100% !important;
            text-align: center !important;
        }
        
        /* Görevler sayfalarında mobil responsive düzenlemeler */
        #tasks .card-body {
            padding: 1rem !important;
        }
        
        #tasks h2 {
            font-size: 0.85rem !important;
            margin-bottom: 0.5rem !important;
        }
        
        #tasks p[style*="font-size: 0.9rem"] {
            font-size: 0.7rem !important;
            margin-bottom: 0.75rem !important;
        }
        
        /* Görevler sayfalarında istatistikler mobilde küçült */
        #tasks div[style*="display: flex"][style*="gap: 1.5rem"] {
            flex-wrap: wrap !important;
            gap: 0.75rem !important;
            margin-top: 0.5rem !important;
        }
        
        #tasks div[style*="font-size: 0.875rem"] {
            font-size: 0.7rem !important;
        }
        
        #tasks .card-body > div[style*="display: flex"][style*="justify-content: space-between"] {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 0.75rem !important;
        }
        
        #tasks .card-body > div[style*="display: flex"][style*="justify-content: space-between"] > div[style*="flex: 1"] {
            width: 100% !important;
            order: 1 !important;
        }
        
        #tasks .card-body > div[style*="display: flex"][style*="justify-content: space-between"] > div[style*="display: flex"][style*="align-items: center"] {
            width: 100% !important;
            order: 2 !important;
            justify-content: flex-end !important;
            margin-top: 0 !important;
        }
        
        .status-filter-btn {
            font-size: 0.65rem !important;
            padding: 0.25rem 0.5rem !important;
            min-height: 24px !important;
            height: 24px !important;
            line-height: 1.2 !important;
            flex: 0 0 auto !important;
            white-space: nowrap !important;
        }
        
        .status-filter-btn.btn-sm {
            font-size: 0.65rem !important;
            padding: 0.25rem 0.5rem !important;
            min-height: 24px !important;
            height: 24px !important;
        }

        /* Teklifler - durum filtre kutularını daha küçük yap */
        .quote-status-filter-btn {
            font-size: 0.75rem !important;
            padding: 0.25rem 0.55rem !important;
            min-height: 24px !important;
            height: 24px !important;
            line-height: 1.2 !important;
            white-space: nowrap !important;
            border-width: 1px !important;
            border-radius: 4px !important;
        }

        .quote-status-filter-btn.active,
        .quote-status-filter-btn:focus {
            box-shadow: none !important;
            border-radius: 3px !important;
        }
        
        /* Form detay sayfası mobil optimizasyonu - 2 sütun */
        #detail .card-body > div[style*="display: grid"],
        #detail .card-body > div[style*="grid-template-columns"] {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 0.75rem !important;
        }
        
        /* Form detay başlığı küçült */
        #detail h2,
        #detail .card-header h2,
        #detail .card-header h3,
        #detail div[style*="font-size: 1.25rem"] h2 {
            font-size: 0.85rem !important;
        }
        
        /* Form detay içerikleri 2 sütun */
        #detail .info-card,
        #detail .material-card,
        #detail .control-item-card,
        #detail div[style*="background: #f8f9fa"] {
                font-size: 0.75rem !important;
            padding: 0.75rem !important;
        }
        
        /* Form detay header küçült */
        #detail div[style*="background: linear-gradient"] {
            padding: 0.75rem !important;
        }
        
        #detail div[style*="background: linear-gradient"] h2 {
            font-size: 0.85rem !important;
        }
        
        /* Garanti takip stat kartları mobilde 2 sütun */
        #garantiTakip div[style*="grid-template-columns: repeat(auto-fit"],
        #garantiTakip .stats-grid,
        #garantiTakip div[style*="display: grid"][style*="grid-template-columns"] {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 1rem !important;
        }
        
        /* Garanti takip stat-card mobilde küçült */
        #garantiTakip .stat-card {
            padding: 0.75rem !important;
            min-height: auto !important;
        }
        
        #garantiTakip .stat-card h3 {
            font-size: 1.25rem !important;
        }
        
        #garantiTakip .stat-card h6 {
            font-size: 0.75rem !important;
        }
            
        /* Dashboard mobilde - Sadece aktif section içinde (duplicate kaldırıldı, yukarıda var) */
        
        /* Dashboard hoşgeldiniz kutusu ile üst mesafe - Logoya yaklaştır (sadece mobil) */
        #dashboard .card:first-child {
            margin-top: 0 !important;
            padding-top: 0.5rem !important;
        }
        
        /* Dashboard hoşgeldiniz card body - Daha kompakt */
        #dashboard .card:first-child .card-body {
            padding-top: 0.75rem !important;
        }
        
        /* Dashboard hoşgeldiniz kartı - Mobil görünümde düzen */
        #dashboard .card:first-child .card-body > div[style*="display: flex"][style*="justify-content: space-between"] {
            flex-direction: row !important;
            align-items: flex-start !important;
            gap: 1rem !important;
        }
        
        /* Sol taraf container - İki satır düzeni */
        #dashboard .card:first-child .card-body > div[style*="display: flex"] > div[style*="flex: 1"] {
            width: auto !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 0.25rem !important;
            align-items: flex-start !important;
        }
        
        /* Üst satır - Hoş Geldiniz */
        #dashboard .card:first-child h3 {
            display: block !important;
            margin: 0 !important;
            margin-bottom: 0.25rem !important;
            font-size: 0.9rem !important;
            line-height: 1.4 !important;
            align-self: flex-start !important;
        }
        
        /* Hoşgeldiniz kartı düzeni - SADECE MOBİLDE */
        /* Ana container: yan yana (sol: hoşgeldiniz+isim, sağ: tarih+saat) */
        #dashboard .card:first-child .card-body > div[style*="display: flex"][style*="justify-content: space-between"] {
            align-items: flex-start !important;
            flex-direction: row !important;
            gap: 1rem !important;
        }
        
        /* Sol taraf: Hoşgeldiniz ve isim (dikey, soldan hizalı) */
        #dashboard .card:first-child .card-body > div[style*="display: flex"] > div[style*="flex: 1"] {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 0.25rem !important;
            flex: 1 !important;
        }
        
        /* Hoşgeldiniz başlığı - soldan hizalı, el sallama iconu ile */
        #dashboard .card:first-child h3 {
            margin: 0 !important;
            margin-bottom: 0 !important;
            padding-left: 0 !important;
            display: flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
            width: 100% !important;
            text-align: left !important;
            align-self: flex-start !important;
        }
        
        /* El sallama iconu - Sadece mobilde, uygun boyutta */
        #dashboard .card:first-child h3::before {
            content: none !important;
            display: none !important;
        }
        
        /* Hoş geldiniz başlığındaki sağdaki emoji için ayrı stil */
        .dashboard-welcome-emoji {
            font-size: 1.4rem !important;
            line-height: 1 !important;
            display: inline-block !important;
        }
        
        /* İsim soyisim - Hoşgeldiniz yazısı ile soldan hizalı (icon ile değil) */
        #dashboard .card:first-child #dashboardUserName,
        #dashboard .card:first-child #dashboardUserNameContainer {
            margin: 0 !important;
            margin-top: 0.25rem !important;
            padding-left: 0 !important;
            display: block !important;
            width: 100% !important;
            text-align: left !important;
            align-self: flex-start !important;
        }
        
        /* Sağ taraf: Tarih ve saat (dikey, sağdan hizalı) */
        #dashboard .card:first-child .card-body > div[style*="display: flex"] > div[style*="flex-direction: column"] {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-end !important;
            justify-content: flex-start !important;
            gap: 0.25rem !important;
            flex-shrink: 0 !important;
        }
        
        /* Tarih - Hoşgeldiniz ile yatay hizalı (aynı yükseklik) */
        #dashboardDate {
            margin: 0 !important;
            padding: 0 !important;
            line-height: 1.4 !important;
            align-self: flex-end !important;
            /* Hoşgeldiniz h3 ile aynı yükseklikte olması için */
            margin-top: 0 !important;
        }
        
        /* Saat - İsim soyisim ile yatay hizalı (aynı yükseklik) */
        #dashboardClock {
            margin: 0 !important;
            padding: 0 !important;
            line-height: 1.4 !important;
            align-self: flex-end !important;
            /* İsim soyisim ile aynı yükseklikte olması için */
            margin-top: 0 !important;
        }
        
        /* Hoşgeldiniz ve tarih aynı yükseklikte */
        #dashboard .card:first-child h3,
        #dashboardDate {
            height: auto !important;
            min-height: auto !important;
        }
        
        /* İsim soyisim ve saat aynı yükseklikte */
        #dashboard .card:first-child #dashboardUserName,
        #dashboard .card:first-child #dashboardUserNameContainer,
        #dashboardClock {
            height: auto !important;
            min-height: auto !important;
        }
        
        /* Performans sayfası - Kartlar 2 sütun */
        #performance .stat-card {
            min-width: 0 !important;
        }
        
        #performance div[style*="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))"] {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 0.75rem !important;
        }
        
        /* Performans sayfası - Grafikler tek sütun */
        #performance div[style*="grid-template-columns: repeat(3, 1fr)"] {
            grid-template-columns: 1fr !important;
            gap: 1rem !important;
        }
        
        /* Firmalar sayfası - Arama ve ekle iconu yeri */
        #companies .card-body > div[style*="display: flex"][style*="justify-content: space-between"] {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 0.75rem !important;
        }
        
        #companies .card-body > div[style*="display: flex"][style*="justify-content: space-between"] > div[style*="display: flex"][style*="align-items: center"] {
            width: 100% !important;
            justify-content: flex-end !important;
            margin-top: 0 !important;
        }
        
        /* Personel sayfası - İşlemler icon dikey hizalaması */
        #personnelTable td[style*="text-align: center"] {
            vertical-align: middle !important;
        }
        
        #personnelTable .btn-action-icon,
        #personnel .btn-action-icon,
        table#personnelTable .btn-action-icon,
        table#personnelTable td .btn-action-icon {
            vertical-align: middle !important;
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            min-height: 28px !important;
            padding: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        
        #personnelTable .btn-action-icon i,
        #personnel .btn-action-icon i,
        table#personnelTable .btn-action-icon i,
        table#personnelTable td .btn-action-icon i {
            font-size: 14px !important;
            color: white !important;
        }
        
        /* Kontrol maddeleri yönetim sayfası - Excel iconları küçült */
        #controlItems .btn[style*="background: #28a745"],
        #controlItems .btn[style*="background: #0d6efd"],
        #controlItems .btn[style*="background: #dc3545"],
        #controlItems .btn[style*="background: #ffc107"] {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
            padding: 0 !important;
            font-size: 0 !important;
        }
        
        #controlItems .btn svg {
            width: 12px !important;
            height: 12px !important;
        }
        
        /* Kontrol maddeleri isimleri font küçült */
        #controlItems .control-item-header h5,
        #controlItems .control-item-header h6,
        #controlItems .card-header h5,
        #controlItems .card-header h6 {
            font-size: 0.75rem !important;
        }
        
        /* Teklif kategorileri - Icon boyutları küçült (anasayfadaki iconlar gibi) */
        #quoteCategories .btn-warning.btn-icon,
        #quoteCategories .btn-danger.btn-icon,
        #quoteCategories .btn-sm.btn-icon {
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            min-height: 28px !important;
            padding: 0 !important;
            background: #ffc107 !important;
        }
        
        #quoteCategories .btn-danger.btn-icon {
            background: #dc3545 !important;
        }
        
        #quoteCategories .btn-warning.btn-icon i,
        #quoteCategories .btn-danger.btn-icon i,
        #quoteCategories .btn-sm.btn-icon i {
            width: 14px !important;
            height: 14px !important;
            font-size: 14px !important;
            color: white !important;
        }
        
        /* Teklif kategorileri - Kategori ekle düğmesi sadece + */
        #quoteCategories .btn-create-new > *:not(svg) {
            display: none !important;
        }
        
        /* Teklif kategorileri mobil uyumluluk */
        #quoteCategories .card-header {
            flex-direction: column !important;
            align-items: flex-start !important;
        }
        
        #quoteCategories .card-header > div:first-child {
            width: 100%;
            margin-bottom: 0.75rem;
        }
        
        #quoteCategories .card-header > div:last-child {
            width: 100%;
            justify-content: flex-start;
        }
        
        #quoteCategories .table-responsive,
        #quoteCategories [style*="overflow-x: auto"] {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
            display: block;
            width: 100%;
        }
        
        #quoteCategories table {
            min-width: 800px !important;
            font-size: 0.8rem !important;
        }
        
        #quoteCategories table th,
        #quoteCategories table td {
            padding: 0.5rem 0.375rem !important;
            font-size: 0.8rem !important;
            white-space: nowrap;
        }
        
        #quoteCategories .btn-sm {
            padding: 0.375rem 0.5rem !important;
            font-size: 0.8rem !important;
        }
        
        #quoteCategories .btn-icon {
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            min-height: 28px !important;
        }
        
        /* Hazır şablonlar - Üst başlıklar küçült */
        #templates h2,
        #templates .card-header h2,
        #templates .card-header h3,
        #templates .page-title {
            font-size: 0.85rem !important;
        }
        
        /* Hazır şablonlar - Yeni şablon ekle + icon */
        #templates .btn-create-new > *:not(svg) {
            display: none !important;
        }
        
        /* Hazır şablonlar - Tüm iconları revize et */
        #templates .btn-warning.btn-icon,
        #templates .btn-danger.btn-icon,
        #templates .btn-sm.btn-icon {
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            min-height: 28px !important;
            padding: 0 !important;
            background: #ffc107 !important;
        }
        
        #templates .btn-danger.btn-icon {
            background: #dc3545 !important;
        }
        
        #templates .btn-warning.btn-icon i,
        #templates .btn-danger.btn-icon i,
        #templates .btn-sm.btn-icon i {
            width: 14px !important;
            height: 14px !important;
            font-size: 14px !important;
            color: white !important;
        }
        
        /* Gruplar sayfası - Ekle düğmesi sadece + */
        #groups .btn-create-new > *:not(svg) {
            display: none !important;
        }
        
        /* Ayarlar sayfası - Font boyutları küçült */
        #settings h2,
        #settings h3,
        #settings h4,
        #settings h5,
        #settings h6,
        #settings .card-header h2,
        #settings .card-header h3,
        #settings .card-header h4,
        #settings .card-header h5,
        #settings .card-header h6,
        #settings .page-title,
        #settings p,
        #settings .card-body,
        #settings .form-label,
        #settings .form-control,
        #settings .form-select {
            font-size: 0.8rem !important;
        }
        
        /* Alt satır - Açıklama paragrafı */
        #dashboard .card:first-child p[style*="margin: 0"] {
            display: block !important;
            margin: 0.5rem 0 0 0 !important;
            font-size: 0.7rem !important;
        }
        
        /* Sağ taraf - Tarih ve saat eski yerinde (sağ üst köşe) */
        #dashboard .card:first-child .card-body > div[style*="display: flex"] > div[style*="flex-direction: column"] {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-end !important;
            gap: 0.25rem !important;
            width: auto !important;
            margin-top: 0 !important;
        }
        
        /* Tarih - Hoş Geldiniz ile yatay hizalı, aynı font boyutu */
        #dashboardDate {
            font-size: 0.9rem !important;
            color: #6c757d !important;
            font-weight: 500 !important;
            align-self: flex-end !important;
            margin-top: 0 !important;
            line-height: 1.4 !important;
        }
        
        /* Saat - İsim soyisim ile yatay hizalı, tarih ile aynı font boyutu */
        #dashboardClock {
            font-size: 0.9rem !important;
            color: #f39200 !important;
            font-weight: 700 !important;
            font-family: var(--font-family-monospace) !important;
            letter-spacing: 1px !important;
            align-self: flex-end !important;
            margin-top: 0 !important;
            line-height: 1.4 !important;
        }
        
        /* Dashboard alt kutucuklar yukarı çıkmalı */
        #dashboard .card:not(:first-child) {
            margin-top: 0.75rem !important;
        }
        
            #dashboard .card-body {
            padding: 0.75rem !important;
            font-size: 0.8rem !important;
            }
            
            #dashboard .stats-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 0.75rem !important;
            }
        
        /* Dashboard tarih ve saat font boyutları - Mobil */
        #dashboardDate {
            font-size: 0.7rem !important;
            color: #6c757d !important;
            font-weight: 500 !important;
        }
        
        #dashboardClock {
            font-size: 1rem !important;
            color: #f39200 !important;
            font-weight: 700 !important;
            font-family: var(--font-family-monospace) !important;
            letter-spacing: 1px !important;
        }
        
        /* Dashboard başlık ve genel font boyutları - Mobil */
        #dashboard h1,
        #dashboard h2,
        #dashboard h3,
        #dashboard h4,
        #dashboard h5,
        #dashboard h6 {
            font-size: 1.1rem !important;
        }
        
        #dashboard .page-title {
            font-size: 1.1rem !important;
            margin-bottom: 0.75rem !important;
        }
        
        #dashboard .card-header h5,
        #dashboard .card-header h6 {
            font-size: 0.9rem !important;
        }
        
        /* Dashboard hoş geldiniz mesajı - Mobil */
        #dashboard h3[style*="font-size: 1.1rem"] {
            font-size: 0.9rem !important;
        }
        
        #dashboard p[style*="font-size: 0.875rem"] {
            font-size: 0.75rem !important;
        }
        
        /* Dashboard butonlar - Mobil */
        #dashboard .btn {
            font-size: 0.75rem !important;
            padding: 0.4rem 0.75rem !important;
        }
        
        /* Dashboard tablolar - Mobil */
        #dashboard table {
            font-size: 0.7rem !important;
        }
        
        #dashboard table th,
        #dashboard table td {
            font-size: 0.7rem !important;
            padding: 0.4rem 0.3rem !important;
        }
        
        /* Dashboard genel text - Mobil */
        #dashboard p:not([style*="font-size"]),
        #dashboard span:not([style*="font-size"]),
        #dashboard div:not([style*="font-size"]) {
            font-size: 0.8rem !important;
        }
        
        #dashboard .text-muted {
            font-size: 0.75rem !important;
            }
            
            /* Filtreler mobilde */
            .task-category-item {
                font-size: 0.75rem !important;
                padding: 0.4rem 0.75rem !important;
            }
            
            /* Butonlar mobilde */
            .btn-sm {
                min-height: 36px !important;
                padding: 0.4rem 0.75rem !important;
            }
        
        /* Tablo içindeki "Tamamlandı" gibi text butonları için küçültme */
        table .btn-success,
        table .btn-primary,
        table .btn-danger,
        table .btn-warning,
        table .btn-secondary,
        table td .btn-success,
        table td .btn-primary,
        table td .btn-danger,
        table td .btn-warning,
        table td .btn-secondary,
        table button.btn-success,
        table button.btn-primary,
        table button.btn-danger,
        table button.btn-warning,
        table button.btn-secondary,
        table td button.btn-success,
        table td button.btn-primary,
        table td button.btn-danger,
        table td button.btn-warning,
        table td button.btn-secondary {
            min-height: 18px !important;
            max-height: 20px !important;
            height: auto !important;
            padding: 0.15rem 0.3rem !important;
            font-size: 0.6rem !important;
            line-height: 1.1 !important;
            border-radius: 4px !important;
        }
        
        /* Tablo içindeki status span'ları (Tamamlandı, Beklemede, vb.) - Çok agresif */
        table span[style*="display: inline-flex"],
        table td span[style*="display: inline-flex"],
        table span[style*="padding: 0.375rem"],
        table td span[style*="padding: 0.375rem"],
        table span[style*="padding: 0.25rem"],
        table td span[style*="padding: 0.25rem"],
        table .badge,
        table td .badge,
        #formsTable span[style*="display: inline-flex"],
        #formsTable td span[style*="display: inline-flex"],
        #quotesTable span[style*="display: inline-flex"],
        #quotesTable td span[style*="display: inline-flex"],
        #tasksTable span[style*="display: inline-flex"],
        #tasksTable td span[style*="display: inline-flex"] {
            min-height: 18px !important;
            max-height: 20px !important;
            height: auto !important;
            padding: 0.15rem 0.3rem !important;
            font-size: 0.6rem !important;
            line-height: 1.1 !important;
            border-radius: 4px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        
        /* Tablo içindeki TÜM butonlar için inline style override - Çok agresif */
        table button[style*="width"],
        table button[style*="height"],
        table td button[style*="width"],
        table td button[style*="height"],
        table .btn-action-icon[style*="width"],
        table .btn-action-icon[style*="height"],
        table td .btn-action-icon[style*="width"],
        table td .btn-action-icon[style*="height"],
        #formsTable button[style*="width"],
        #formsTable button[style*="height"],
        #formsTable td button[style*="width"],
        #formsTable td button[style*="height"],
        #tasksTable button[style*="width"],
        #tasksTable button[style*="height"],
        #tasksTable td button[style*="width"],
        #tasksTable td button[style*="height"],
        #quotesTable button[style*="width"],
        #quotesTable button[style*="height"],
        #quotesTable td button[style*="width"],
        #quotesTable td button[style*="height"] {
            width: 18px !important;
            height: 18px !important;
            min-width: 18px !important;
            max-width: 18px !important;
            max-height: 18px !important;
            min-height: 18px !important;
        }
        
        /* Tablo içindeki TÜM SVG'ler için küçültme */
        table button svg,
        table td button svg,
        table .btn-action-icon svg,
        table td .btn-action-icon svg,
        #formsTable button svg,
        #formsTable td button svg,
        #tasksTable button svg,
        #tasksTable td button svg,
        #quotesTable button svg,
        #quotesTable td button svg {
            width: 9px !important;
            height: 9px !important;
            max-width: 9px !important;
            max-height: 9px !important;
            }
            
            /* Tablo container'lar mobilde */
            .table-responsive,
            #tasksListContainer {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
            }
            
            /* Main content overflow kontrolü */
            .main-content {
            overflow-y: auto !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            }
            
            /* Tüm section'lar için overflow kontrolü */
            .section-content {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        
        /* Card body overflow kontrolü */
        .card-body {
            overflow-x: hidden !important;
            max-width: 100% !important;
        }
        
        /* Table container overflow kontrolü */
        .table-responsive,
        [style*="overflow-x"],
        [style*="overflow-y"] {
            max-width: 100% !important;
        }
        
        /* Prevent horizontal scroll on body */
        body {
            width: 100% !important;
            max-width: 100% !important;
        }
        
        /* Fix inline styles that cause overflow */
        [style*="min-width: 200px"],
        [style*="min-width: 300px"] {
            min-width: auto !important;
            max-width: 100% !important;
            }
            
            /* Form oluşturma */
            #create .form-group[style*="min-width"] {
                min-width: 100% !important;
            }
            
            /* Tablolar */
            .table {
            font-size: 0.8rem !important;
        }
        
        .table th,
        .table td {
            font-size: 0.8rem !important;
            padding: 0.75rem 0.6rem !important;
        }
        
        .table th {
            font-weight: 600 !important;
            }
            
            .table th,
            .table td {
                padding: 0.75rem 0.6rem !important;
                white-space: nowrap;
            }
            
            /* Input ve select'ler touch-friendly */
            .form-control,
            .form-select {
                min-height: 44px;
                font-size: 16px; /* iOS zoom önleme */
                touch-action: manipulation;
            }
            
            /* Kartlar mobilde daha az padding */
            .card-body {
                padding: 0.75rem !important;
            }
            
            .card-header {
                padding: 0.75rem !important;
            }
        }

        @media (max-width: 480px) {
            .main-content {
                padding: 0.75rem;
            padding-top: 5rem;
            width: 100% !important;
            overflow-x: hidden;
            }

            .page-title {
                font-size: 1.1rem;
            }

            .card-header {
                padding: 1rem;
            }

            .card-body {
                padding: 1rem;
            }

            .btn {
                padding: 0.4rem 0.75rem;
                font-size: 0.8rem;
                min-height: 44px; /* Touch-friendly minimum size */
                touch-action: manipulation;
            }

            .mobile-menu-toggle {
            width: 32px !important;
            height: 32px !important;
                top: 0.75rem;
                right: 0.75rem;
            border-radius: 6px !important;
        }
        
        .mobile-menu-toggle span {
            width: 16px !important;
            height: 2px !important;
        }
        
        .mobile-menu-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(4px, 4px) !important;
        }
        
        .mobile-menu-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(4px, -4px) !important;
            }
            
            /* Quotes sayfası mobilde */
            #quotes .card-body,
            #quoteCreate .card-body,
            #quoteCategories .card-body,
            #quoteStaticTexts .card-body {
                padding: 1rem !important;
                overflow-x: auto !important;
            }
            
            #quotes table,
            #quoteCreate table,
            #quoteCategories table {
                font-size: 0.75rem !important;
                min-width: 100% !important;
            }
            
            #quotes table th,
            #quotes table td,
            #quoteCreate table th,
            #quoteCreate table td,
            #quoteCategories table th,
            #quoteCategories table td {
                padding: 0.5rem 0.25rem !important;
                white-space: nowrap !important;
            }
        
        /* Teklifler tablosu mobil uyumluluk */
        #quotesTable {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }
        
        #quotesTable th,
        #quotesTable td {
            font-size: 0.7rem !important;
            padding: 0.5rem 0.4rem !important;
        }
        
        #quotesTable th {
            font-size: 0.7rem !important;
            font-weight: 600 !important;
        }
        
        #quotesTable .btn-action-icon {
            width: 18px !important;
            height: 18px !important;
            min-width: 18px !important;
            max-width: 18px !important;
            max-height: 18px !important;
            min-height: 18px !important;
        }
        
        #quotesTable .btn-action-icon svg {
            width: 9px !important;
            height: 9px !important;
        }
        
        /* Tüm tablo butonları için genel küçültme (mobil görünümde) - Sadece boyut, arka plan renkleri korunuyor */
        table .btn-action-icon,
        table td .btn-action-icon,
        .btn-action-icon:not(.btn-warning):not(.btn-danger),
        button.btn-action-icon:not(.btn-warning):not(.btn-danger),
        button[class*="btn-action-icon"]:not(.btn-warning):not(.btn-danger),
        [style*="width: 32px"][style*="height: 32px"].btn-action-icon:not(.btn-warning):not(.btn-danger),
        [style*="width: 32px"].btn-action-icon:not(.btn-warning):not(.btn-danger),
        [style*="height: 32px"].btn-action-icon:not(.btn-warning):not(.btn-danger) {
            width: 18px !important;
            height: 18px !important;
            min-width: 18px !important;
            max-width: 18px !important;
            max-height: 18px !important;
            min-height: 18px !important;
            padding: 0 !important;
        }
        
        table .btn-action-icon svg,
        table td .btn-action-icon svg,
        .btn-action-icon:not(.btn-warning):not(.btn-danger) svg,
        button.btn-action-icon:not(.btn-warning):not(.btn-danger) svg,
        [style*="width: 16"].btn-action-icon:not(.btn-warning):not(.btn-danger) svg {
            width: 9px !important;
            height: 9px !important;
            max-width: 9px !important;
            max-height: 9px !important;
        }
        
        table .btn-action-icon i,
        table td .btn-action-icon i,
        .btn-action-icon:not(.btn-warning):not(.btn-danger) i {
            font-size: 9px !important;
        }
        
        /* Mobil görünümde btn-warning ve btn-danger butonları için arka plan renkleri korunuyor */
        table .btn-warning.btn-icon,
        table td .btn-warning.btn-icon,
        table .btn-danger.btn-icon,
        table td .btn-danger.btn-icon {
            width: 18px !important;
            height: 18px !important;
            min-width: 18px !important;
            min-height: 18px !important;
            padding: 0 !important;
        }
        
        table .btn-warning.btn-icon i,
        table td .btn-warning.btn-icon i,
        table .btn-danger.btn-icon i,
        table td .btn-danger.btn-icon i {
            font-size: 9px !important;
        }
        
        /* Tablo içindeki tüm küçük butonlar */
        table .btn-sm,
        table td .btn-sm,
        table .btn-sm.btn-success,
        table .btn-sm.btn-primary,
        table .btn-sm.btn-danger,
        table .btn-sm.btn-warning,
        table .btn-sm.btn-secondary {
            min-height: 24px !important;
            max-height: 24px !important;
            height: auto !important;
            padding: 0.2rem 0.4rem !important;
            font-size: 0.7rem !important;
            }
            
            /* Reports sayfası mobilde */
            #reports .card-body {
                padding: 1rem !important;
                overflow-x: auto !important;
            }
            
            #reports .stats-grid {
                grid-template-columns: 1fr !important;
                gap: 1rem !important;
            }
            
            #reports table {
                font-size: 0.75rem !important;
                min-width: 100% !important;
            }
            
            #reports table th,
            #reports table td {
                padding: 0.5rem 0.25rem !important;
                white-space: nowrap !important;
            }
            
            /* Performance sayfası mobilde */
            #performance .card-body {
                padding: 1rem !important;
            }
            
            #performancePersonnelSelect {
                width: 100% !important;
                max-width: 100% !important;
            }
            
            #performance .stats-grid {
                grid-template-columns: 1fr !important;
                gap: 1rem !important;
            }
            
            /* Users, Companies, Personnel sayfaları mobilde */
            #users .card-body,
            #companies .card-body,
            #personnel .card-body {
                padding: 1rem !important;
                overflow-x: auto !important;
            }
            
            #users table,
            #companies table,
            #personnel table {
                font-size: 0.75rem !important;
                min-width: 100% !important;
            }
            
            #users table th,
            #users table td,
            #companies table th,
            #companies table td,
            #personnel table th,
            #personnel table td {
                padding: 0.5rem 0.25rem !important;
                white-space: nowrap !important;
            }
            
            /* Control Items sayfası mobilde */
            #controlItems .card-body {
                padding: 1rem !important;
            }
            
            #controlItems .control-item {
                padding: 1rem !important;
            }
            
            /* Templates sayfası mobilde */
            #templates .card-body {
                padding: 1rem !important;
                overflow-x: auto !important;
            }
            
            #templates table {
            font-size: 0.7rem !important;
                min-width: 100% !important;
            }
            
            #templates table th,
            #templates table td {
            padding: 0.5rem 0.4rem !important;
                white-space: nowrap !important;
            font-size: 0.7rem !important;
        }
        
        #templates table th {
            font-size: 0.7rem !important;
            font-weight: 600 !important;
            }
            
            /* Groups sayfası mobilde */
            #groups .card-body {
                padding: 1rem !important;
                overflow-x: auto !important;
            }
            
            #groups table {
                font-size: 0.875rem !important;
                min-width: 100% !important;
            }
            
            #groups table th,
            #groups table td {
                padding: 0.75rem 0.75rem !important;
                white-space: nowrap !important;
            }
            
            /* Settings sayfası mobilde */
            #settings .card-body {
                padding: 1rem !important;
            }
            
            #settings .form-row {
                grid-template-columns: 1fr !important;
            }
            
            /* Garanti Takip sayfası mobilde */
            #garantiTakip .card-body {
                padding: 1rem !important;
                overflow-x: auto !important;
            }
            
            #garantiTakip table {
                font-size: 0.85rem !important;
                min-width: 100% !important;
            }
            
            #garantiTakip table th,
            #garantiTakip table td {
                padding: 0.75rem 0.5rem !important;
                white-space: normal !important;
                word-wrap: break-word !important;
                word-break: break-word !important;
                overflow-wrap: break-word !important;
            }
            
            /* Mobilde tüm sütunlar görünür - yatay kaydırma ile erişilebilir */
            /* Sütun gizleme kaldırıldı - yatay kaydırma aktif */
            
            /* İşlemler sütunu mobilde daha kompakt */
            #garantiTakip table th:last-child,
            #garantiTakip table td:last-child {
                padding: 0.5rem 0.25rem !important;
                min-width: 80px !important;
                max-width: 100px !important;
            }
            
            /* İşlemler butonlarını mobilde küçült */
            #garantiTakip table .btn,
            #garantiTakip table .btn-sm,
            #garantiTakip table button {
                padding: 0.35rem 0.5rem !important;
                font-size: 0.75rem !important;
                min-width: 32px !important;
                min-height: 32px !important;
            }
            
            /* İşlemler butonlarında sadece icon göster (mobilde) */
            #garantiTakip table .btn span:not(.sr-only),
            #garantiTakip table .btn:not(:has(svg)) {
                display: none !important;
            }
            
            #garantiTakip table .btn svg {
                width: 16px !important;
                height: 16px !important;
                margin: 0 !important;
            }
            
            /* Detail sayfası mobilde */
            #detail .card-body {
                padding: 1rem !important;
            }
            
            #detail .form-row {
                grid-template-columns: 1fr !important;
            }
            
            #detail table {
                font-size: 0.75rem !important;
            }
            
            /* Print sayfası mobilde */
            #print .print-container {
                padding: 1rem !important;
            }
            
            /* Chart container'lar mobilde */
            .chart-card {
                padding: 1rem !important;
            }
            
            .chart-card canvas {
                max-width: 100% !important;
                height: auto !important;
            }
            
            /* Form input grupları mobilde */
            .form-group {
                margin-bottom: 1rem;
            }
            
            .form-group label {
                font-size: 0.875rem;
                margin-bottom: 0.5rem;
            }
            
            /* Select box'lar mobilde tam genişlik */
            select.form-select,
            select.form-control {
                width: 100% !important;
                max-width: 100% !important;
            }
            
            /* Textarea'lar mobilde */
            textarea.form-control {
                width: 100% !important;
                min-height: 120px;
            }
            
            /* Button groups mobilde dikey */
            .btn-group-vertical {
                width: 100%;
            }
            
            .btn-group-vertical .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }
            
            /* Header butonları mobilde */
            .card-header .btn-group {
                flex-direction: column;
                width: 100%;
                gap: 0.5rem;
            }
            
            .card-header .btn-group .btn {
                width: 100%;
            }
            
            /* Search input'lar mobilde */
            input[type="search"],
            input[type="text"].form-control {
                font-size: 16px !important; /* iOS zoom önleme */
            }
            
            /* Date input'lar mobilde */
            input[type="date"],
            input[type="datetime-local"] {
                font-size: 16px !important; /* iOS zoom önleme */
                min-height: 44px;
            }

            .sidebar {
                width: 280px;
            }

            .mobile-logo {
                max-width: 180px;
                width: 100%;
                margin-top: 0.25rem;
                margin-bottom: 0.75rem;
            }

            .mobile-logo svg {
                width: 100%;
                height: auto;
                max-height: 50px;
                object-fit: contain;
            }

            .login-logo svg {
                height: 19px;
                max-width: 126px;
            }

            .login-title {
                font-size: 1.1rem;
            }

            .stats-grid {
                grid-template-columns: 1fr !important;
                gap: 0.5rem;
            }
            
            /* Tablolar çok küçük ekranlarda */
            #tasksTable {
                font-size: 0.65rem !important;
            }
            
            #tasksTable th,
            #tasksTable td {
                padding: 0.35rem 0.15rem !important;
            }
            
            /* Detay panelleri çok küçük ekranlarda */
            #taskDetailPanel {
                padding: 0 !important;
            }
            
            #taskDetailContent {
                padding: 1rem !important;
            }
            
            /* Popup'lar çok küçük ekranlarda */
            .popup {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0.5rem !important;
                padding: 1rem !important;
                max-height: 95vh !important;
            }
            
            .popup-title {
                font-size: 0.9375rem !important;
            }
            
            .popup-message {
                font-size: 0.75rem !important;
            }
            
            /* Modal'lar çok küçük ekranlarda */
            .modal-overlay {
                padding: 0.25rem !important;
            }
            
            .modal-content {
                padding: 0.75rem !important;
                max-height: 98vh !important;
            }
            
            
            /* Form input'lar çok küçük ekranlarda */
            .form-control,
            .form-select {
                font-size: 16px !important; /* iOS zoom önleme */
                padding: 0.625rem !important;
                min-height: 44px !important;
            }
            
            /* Butonlar çok küçük ekranlarda */
            .btn-sm {
                min-height: 40px !important;
                padding: 0.5rem 0.625rem !important;
                font-size: 0.75rem !important;
            }
            
            /* Header kartları çok küçük ekranlarda */
            .card-header {
                padding: 0.625rem !important;
            }
            
            .card-body {
                padding: 0.625rem !important;
            }
            
            /* Filtreler çok küçük ekranlarda */
            .task-category-item {
                font-size: 0.7rem !important;
                padding: 0.5rem 0.625rem !important;
            }
            
            /* Tablo işlem butonları çok küçük ekranlarda */
            #tasksTable td:last-child .btn,
        #tasksTable td:last-child button,
        #tasksTable td:last-child [style*="width"] {
            width: 18px !important;
            height: 18px !important;
                padding: 0 !important;
            min-width: 18px !important;
            max-width: 18px !important;
            max-height: 18px !important;
            min-height: 18px !important;
            }
            
            #tasksTable td:last-child svg,
        #tasksTable td:last-child .btn svg {
            width: 9px !important;
            height: 9px !important;
            max-width: 9px !important;
            max-height: 9px !important;
            }

            .stat-card {
                padding: 0.75rem;
            }

            .stat-card h3 {
                font-size: 1.25rem;
                margin: 0.25rem 0;
            }

            .stat-card h6 {
                font-size: 0.7rem;
            }
            
            /* Dashboard Hoş Geldiniz Kartı */
            #dashboard .card-body {
                padding: 0.75rem !important;
            }
            
            #dashboard h3 {
                font-size: 1rem !important;
            }
            
            #dashboard p {
                font-size: 0.8rem !important;
            }
            
            /* Tablolar çok küçük ekranlarda */
            #tasksTable {
                font-size: 0.7rem !important;
            }
            
            #tasksTable th,
            #tasksTable td {
                padding: 0.4rem 0.2rem !important;
            }
            
            /* Popup'lar küçük ekranlarda */
            .popup {
                width: 98% !important;
                max-width: 98% !important;
                padding: 1rem !important;
            }
            
            /* Modal'lar küçük ekranlarda */
            .modal-content {
                padding: 1rem !important;
            }
            
            /* Butonlar küçük ekranlarda */
            .btn {
                padding: 0.5rem 0.875rem !important;
                font-size: 0.8125rem !important;
            }
            
            /* Form input'lar küçük ekranlarda */
            .form-control,
            .form-select {
                font-size: 16px !important; /* iOS zoom önleme */
                padding: 0.6rem !important;
            }
            
            /* Header kartları küçük ekranlarda */
            .card-header {
                padding: 0.75rem !important;
                flex-direction: column !important;
                align-items: flex-start !important;
            }
            
            /* İstatistikler küçük ekranlarda */
            .stats-grid {
                grid-template-columns: 1fr !important;
            }
            
            /* Filtreler küçük ekranlarda */
            #taskCategories {
                flex-direction: column !important;
                width: 100% !important;
            }
            
            .task-category-item {
                width: 100% !important;
                text-align: center !important;
            }
            
            #dashboardClock {
                font-size: 1rem !important;
                letter-spacing: 1px !important;
            }
            
            /* Butonlar mobilde tam genişlik */
            #dashboard .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }
            
            /* Tüm tablolar için mobil scroll */
            .table-responsive {
                -webkit-overflow-scrolling: touch;
            }
            
            .table-responsive,
            table {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                display: block;
                width: 100%;
            }
            
            /* TEKLİFLER SAYFASI MOBİL UYUMLULUK */
            /* İstatistikler kartları mobilde tek sütun */
            #quotesStatistics > div[style*="grid-template-columns"] {
                grid-template-columns: 1fr !important;
                gap: 0.75rem !important;
            }
            
            /* İstatistik kartları mobilde daha küçük padding */
            #quotesStatistics > div > div {
                padding: 0.75rem !important;
            }
            
            #quotesStatistics > div > div > div[style*="font-size: 2rem"] {
                font-size: 1.5rem !important;
            }
            
            /* Teklif listesi ve detay paneli mobilde alt alta */
            #quotes > div > div[style*="display: flex"][style*="gap: 1rem"] {
                flex-direction: column !important;
                gap: 0.75rem !important;
            }
            
            /* Detay paneli mobilde full-width */
            #quoteDetailPanel {
                width: 100% !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
            z-index: var(--z-index-sidebar) !important;
                border-radius: 0 !important;
                max-width: 100% !important;
            }
            
            /* Filtreler mobilde daha büyük ve touch-friendly */
            #quotes .form-select {
                min-height: 44px !important;
                font-size: 0.875rem !important;
                padding: 0.5rem 0.75rem !important;
                min-width: auto !important;
                flex: 1 1 calc(50% - 0.25rem) !important;
            }
            
            #quotes .btn-sm {
                min-height: 44px !important;
                padding: 0.5rem 0.75rem !important;
                font-size: 0.875rem !important;
            }
            
            /* Teklif kartları mobilde daha kompakt */
            #quotesList > div {
                padding: 0.75rem !important;
                border-radius: 8px !important;
            }
            
            /* quoteCreate formu mobilde */
            #quoteCreate .form-group {
                min-width: 100% !important;
            }
            
            #quoteCreate .form-row {
                flex-direction: column !important;
            }
            
            #quoteCreate .card-body {
                padding: 1rem !important;
            }
            
            /* Hazır şablon ve manuel ürün ekle bölümleri mobilde */
            #quoteCreate > div > div > div[style*="background: #f8f9fa"] {
                padding: 0.75rem !important;
            }
            
            #quoteCreate .btn {
                min-height: 44px !important;
                font-size: 0.875rem !important;
            }
            
            /* Tablo hücreleri mobilde daha küçük padding */
            .table th,
            .table td {
                padding: 0.5rem 0.25rem !important;
                font-size: 0.75rem !important;
                white-space: nowrap;
            }
            
            /* Detay Panelleri */
            #taskDetailPanel {
                width: 100% !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
            z-index: var(--z-index-modal) !important;
                border-radius: 0 !important;
                max-width: 100% !important;
            }
            
            /* Form oluşturma sayfası */
            #create .form-row {
                flex-direction: column;
            }
            
            #create .form-group {
                width: 100% !important;
                min-width: 100% !important;
            }
            
            /* Görevler listesi */
            #tasksListContainer {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            /* Popup'lar */
            .popup {
                width: 95% !important;
                max-width: 95% !important;
                margin: 1rem auto !important;
            }
        }

        /* Input Group */
        .input-group {
            display: flex;
            gap: 0.5rem;
        }

        .input-group .form-select {
            flex: 1;
        }

        /* Gallery Styles */
        .gallery-upload-area {
            margin-bottom: 1.5rem;
        }

        .gallery-upload-content {
            border: 2px dashed #d0d0d0;
            border-radius: 12px;
            padding: 2.5rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #fafafa;
        }

        .gallery-upload-content:hover {
            border-color: #f39200;
            background: #fff5e6;
            transform: translateY(-2px);
        }

        .gallery-upload-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            opacity: 0.6;
        }

        .gallery-upload-text {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .gallery-upload-text strong {
            font-size: 1.1rem;
            color: #333;
            font-weight: 600;
        }

        .gallery-upload-text span {
            font-size: 0.875rem;
            color: #666;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }

        .gallery-item {
            position: relative;
            aspect-ratio: 1;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .gallery-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .gallery-item-remove {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            background: rgba(220, 53, 69, 0.9);
            color: white;
            border: none;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .gallery-item-remove:hover {
            background: #dc3545;
            transform: scale(1.1);
        }

        /* Popup Modal */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
        z-index: var(--z-index-modal);
        }

        .popup-overlay.show {
            display: flex;
        }

        .popup-content {
            background: white;
            border-radius: 12px;
            padding: 0;
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            animation: popupSlideIn 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .popup-header {
            padding: 1.5rem;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f8f9fa;
        }

        .popup-header h3 {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 600;
        }

    /* Popup Close Button - Consolidated */
        .popup-close {
        background: #f39200;
        color: white;
            border: none;
        padding: 0.4rem 1.25rem;
        border-radius: 8px;
            cursor: pointer;
        font-weight: 600;
        transition: background 0.2s;
        flex: 1;
        min-width: 100px;
        font-size: 0.875rem;
    }

    .popup-close:hover {
        background: #e08500;
    }
    
    /* Popup close icon variant */
    .popup-close.icon-only {
        background: none;
            color: #666;
            padding: 0;
            width: 30px;
            height: 30px;
        min-width: 30px;
        font-size: 1.5rem;
            border-radius: 4px;
        }

    .popup-close.icon-only:hover {
            background: #e0e0e0;
            color: #333;
        }

        .popup-body {
            padding: 1.5rem;
            overflow-y: auto;
            flex: 1;
        }

        .popup {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            max-width: 400px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            animation: popupSlideIn 0.3s ease;
        }

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

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

        .popup.success {
            border-top: 4px solid #28a745;
        }

        .popup.error {
            border-top: 4px solid #dc3545;
        }

        .popup.info {
            border-top: 4px solid #17a2b8;
        }

        .popup-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
        }

        .popup.success .popup-title {
            color: #28a745;
        }

        .popup.error .popup-title {
            color: #dc3545;
        }

        .popup.info .popup-title {
            color: #17a2b8;
        }

        .popup-message {
            color: #555;
            margin-bottom: 1rem;
            line-height: 1.6;
            white-space: pre-line;
            font-size: 0.875rem;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

    /* Removed duplicate .popup-close - see consolidated version above */

        .popup-close:hover {
            background: #e08500;
        }

        .popup-buttons {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .popup-button-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.4rem 1.25rem;
            border-radius: 8px;
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 600;
            transition: all 0.2s;
            flex: 1;
            min-width: 140px;
            text-align: center;
        }

        .popup-button-link.primary {
            background: #0d6efd;
            color: white;
        }

        .popup-button-link.primary:hover {
            background: #0b5ed7;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
        }

        .popup-button-link.success {
            background: #198754;
            color: white;
        }

        .popup-button-link.success:hover {
            background: #157347;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(25, 135, 84, 0.3);
        }

        /* Database Connection Status LED */
        #dbStatusLed,
        #desktopDbStatusLed {
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
            position: relative;
        }

        #dbStatusLed::before,
        #desktopDbStatusLed::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: inherit;
        }

        #dbStatusLed.status-connected,
        #desktopDbStatusLed.status-connected {
            background-color: #28a745;
            border-color: #28a745;
            box-shadow: 0 0 10px rgba(40, 167, 69, 0.8), inset 0 0 10px rgba(40, 167, 69, 0.3);
            animation: blink-green 1.5s infinite;
        }

        #dbStatusLed.status-connected::before,
        #desktopDbStatusLed.status-connected::before {
            background-color: #28a745;
            animation: blink-green-inner 1.5s infinite;
        }

        #dbStatusLed.status-disconnected,
        #desktopDbStatusLed.status-disconnected {
            background-color: #dc3545;
            border-color: #dc3545;
            box-shadow: 0 0 10px rgba(220, 53, 69, 0.8), inset 0 0 10px rgba(220, 53, 69, 0.3);
            animation: blink-red 1.5s infinite;
        }

        #dbStatusLed.status-disconnected::before,
        #desktopDbStatusLed.status-disconnected::before {
            background-color: #dc3545;
            animation: blink-red-inner 1.5s infinite;
        }

        #dbStatusLed.status-checking,
        #desktopDbStatusLed.status-checking {
            background-color: #ffc107;
            border-color: #ffc107;
            box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
            animation: pulse-yellow 1s infinite;
        }

        @keyframes blink-green {
            0%, 100% {
                opacity: 1;
                box-shadow: 0 0 10px rgba(40, 167, 69, 0.8), inset 0 0 10px rgba(40, 167, 69, 0.3);
            }
            50% {
                opacity: 0.4;
                box-shadow: 0 0 15px rgba(40, 167, 69, 1), inset 0 0 15px rgba(40, 167, 69, 0.5);
            }
        }

        @keyframes blink-green-inner {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.3;
            }
        }

        @keyframes blink-red {
            0%, 100% {
                opacity: 1;
                box-shadow: 0 0 10px rgba(220, 53, 69, 0.8), inset 0 0 10px rgba(220, 53, 69, 0.3);
            }
            50% {
                opacity: 0.4;
                box-shadow: 0 0 15px rgba(220, 53, 69, 1), inset 0 0 15px rgba(220, 53, 69, 0.5);
            }
        }

        @keyframes blink-red-inner {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.3;
            }
        }

        @keyframes pulse-yellow {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.7;
                transform: scale(1.1);
            }
        }

        @keyframes notification-blink {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.6;
                transform: scale(1.2);
            }
        }

        @keyframes notification-pulse {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(243, 146, 0, 0.7);
            }
            50% {
                box-shadow: 0 0 0 8px rgba(243, 146, 0, 0);
            }
        }

        .notification-icon-blink {
            animation: notification-blink 1s ease-in-out infinite, notification-pulse 2s ease-in-out infinite;
            color: #f39200 !important;
        }

        .notification-icon-container.has-unread {
            animation: notification-pulse 2s ease-in-out infinite;
        }

        .notification-icon-container.has-unread::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(243, 146, 0, 0.2);
            animation: notification-pulse 2s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes taskReadPulse {
            0% {
                transform: translate(-50%, -50%) scale(0);
                opacity: 0;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.9;
            }
        }
        
        @keyframes taskCompletePulse {
            0% {
                transform: translate(-50%, -50%) scale(0) rotate(-10deg);
                opacity: 0;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.3) rotate(5deg);
                opacity: 1;
            }
            70% {
                transform: translate(-50%, -50%) scale(1.1) rotate(-2deg);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(1) rotate(0deg);
                opacity: 0.95;
            }
        }

        /* Database Error Details */
        #dbErrorDetails {
            margin-top: 0.5rem;
            padding: 0.75rem;
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 4px;
            font-size: 0.8rem;
            color: #856404;
            max-width: 400px;
            display: none;
        }

        #dbErrorDetails.show {
            display: block;
        }

        #dbErrorDetails.error {
            background: #f8d7da;
            border-color: #dc3545;
            color: #721c24;
        }

        #dbErrorDetails .error-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        #dbErrorDetails .error-message {
            margin-bottom: 0.25rem;
        }

        #dbErrorDetails .error-details {
            font-size: 0.75rem;
            opacity: 0.8;
            margin-top: 0.5rem;
            padding-top: 0.5rem;
            border-top: 1px solid rgba(0,0,0,0.1);
        }

        #dbConnectionStatus {
            cursor: pointer;
            position: relative;
        }

        #dbConnectionStatus:hover #dbErrorDetails {
            display: block;
        }
        
        .modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: var(--z-index-modal);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 2rem;
            overflow-y: auto;
            animation: fadeIn 0.3s ease;
        }


        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

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

        /* Tamamlanan görev satırları için yeşil arka plan */
        .task-item.completed-task,
        .task-item.completed-task td {
            background-color: #e8f5e9 !important;
        }

        .task-item.completed-task:hover,
        .task-item.completed-task:hover td {
            background-color: #c8e6c9 !important;
        }

        /* Modal Styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
        z-index: var(--z-index-gallery-controls);
            backdrop-filter: blur(4px);
        }

        .modal-overlay.show {
            display: flex;
        }

        .modal-content {
            background: white;
            border-radius: 16px;
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: modalSlideIn 0.3s ease;
        }
        
        /* Delete Confirmation Modal Styles */
        #deleteConfirmModal .modal-content {
            box-shadow: 0 10px 40px rgba(220, 53, 69, 0.3);
        }
        
        #deleteConfirmModal .modal-header {
            border-bottom: none;
        }
        
        #deleteConfirmModal .modal-body {
            padding: 2rem;
        }
        
        #deleteConfirmModal .btn-danger {
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
            transition: all 0.2s ease;
        }
        
        #deleteConfirmModal .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
        }
        
        #deleteConfirmModal .btn-secondary {
            transition: all 0.2s ease;
        }
        
        #deleteConfirmModal .btn-secondary:hover {
            background: #6c757d;
            transform: translateY(-2px);
        }
        
        /* Export Control Items Modal Checkbox Styles */
        .export-control-item-checkbox {
            width: 20px !important;
            height: 20px !important;
            cursor: pointer !important;
            flex-shrink: 0 !important;
            accent-color: #6c757d;
        
        /* Radio button gri renk */
        input[type="radio"] {
            accent-color: #6c757d;
        }
        
        input[type="radio"]:checked {
            accent-color: #6c757d;
        }
            border: 2px solid #007bff;
            border-radius: 4px;
        }
        
        .export-control-item-checkbox:checked {
            background-color: #007bff;
            border-color: #007bff;
        }
        
        .export-control-item-checkbox:hover {
            border-color: #0056b3;
        }
        
        #exportControlItemsList {
            background: #f8f9fa;
        }
        
        #exportControlItemsList > div {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            margin-bottom: 0.5rem;
            padding: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            transition: all 0.2s;
        }
        
        #exportControlItemsList > div:hover {
            background: #f0f0f0;
            border-color: #007bff;
            box-shadow: 0 2px 4px rgba(0,123,255,0.1);
        }
        
        /* Export Control Items Modal Buton Stilleri */
        #exportControlItemsModal .btn-primary,
        #exportControlItemsModal .btn-sm.btn-primary {
            background: #f39200 !important;
            color: white !important;
            border: none !important;
        }
        
        #exportControlItemsModal .btn-primary:hover,
        #exportControlItemsModal .btn-sm.btn-primary:hover {
            background: #e08500 !important;
            color: white !important;
        }
        
        #exportControlItemsModal .btn-secondary,
        #exportControlItemsModal .btn-sm.btn-secondary {
            background: #6c757d !important;
            color: white !important;
            border: none !important;
        }
        
        #exportControlItemsModal .btn-secondary:hover,
        #exportControlItemsModal .btn-sm.btn-secondary:hover {
            background: #5a6268 !important;
            color: white !important;
        }
        
        #exportControlItemsModal .btn-success {
            background: #28a745 !important;
            color: white !important;
            border: none !important;
        }
        
        #exportControlItemsModal .btn-success:hover {
            background: #218838 !important;
            color: white !important;
        }
        
        /* Arıza Detay Modal Sekme Stilleri */
        .ariza-tab-nav {
            display: flex;
            gap: 0.5rem;
            border-bottom: 2px solid #e0e0e0;
            margin-bottom: 1.5rem;
            overflow-x: auto;
        }
        
        .ariza-tab-nav button {
            padding: 0.75rem 1.25rem;
            border: none;
            background: transparent;
            color: #666;
            font-weight: 500;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all 0.2s;
            white-space: nowrap;
        }
        
        .ariza-tab-nav button:hover {
            color: #007bff;
            background: #f8f9fa;
        }
        
        .ariza-tab-nav button.active {
            color: #007bff;
            border-bottom-color: #007bff;
            background: #f8f9fa;
        }
        
        .ariza-tab-content {
            display: none;
        }
        
        .ariza-tab-content.active {
            display: block;
        }
        
        #arizaDetayModal .modal-content {
            max-width: 900px;
        }

        .modal-close {
            background: rgba(0, 0, 0, 0.1);
            border: none;
            color: #666;
            font-size: 1.5rem;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            line-height: 1;
        }

        .modal-close:hover {
            background: rgba(0, 0, 0, 0.2);
            transform: rotate(90deg);
        }

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

        @keyframes pulseSuccess {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 8px 24px rgba(40, 167, 69, 0.4);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 12px 32px rgba(40, 167, 69, 0.6);
            }
        }

        .btn-success:hover {
            background: #218838;
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4) !important;
        }

        /* Yorum ve Sohbet Stilleri */
        @keyframes commentSlideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .comment-avatar {
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        [id^="orderCommentMentions_"] {
            scrollbar-width: thin;
            scrollbar-color: #e0e0e0 transparent;
        }

        [id^="orderCommentMentions_"]::-webkit-scrollbar {
            width: 6px;
        }

        [id^="orderCommentMentions_"]::-webkit-scrollbar-track {
            background: transparent;
        }

        [id^="orderCommentMentions_"]::-webkit-scrollbar-thumb {
            background: #e0e0e0;
            border-radius: 3px;
        }

        [id^="orderCommentMentions_"]::-webkit-scrollbar-thumb:hover {
            background: #ccc;
        }

        .mention-item:hover {
            background: #f8f9fa !important;
        }

        [id^="orderCommentsList_"] {
            scrollbar-width: thin;
            scrollbar-color: #e0e0e0 transparent;
        }

        [id^="orderCommentsList_"]::-webkit-scrollbar {
            width: 6px;
        }

        [id^="orderCommentsList_"]::-webkit-scrollbar-track {
            background: transparent;
        }

        [id^="orderCommentsList_"]::-webkit-scrollbar-thumb {
            background: #e0e0e0;
            border-radius: 3px;
        }

        [id^="orderCommentsList_"]::-webkit-scrollbar-thumb:hover {
            background: #ccc;
        }

        .modal-header {
            padding: 1.5rem;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, #f39200 0%, #ff6b00 100%);
            color: white;
            border-radius: 16px 16px 0 0;
        }

        .modal-header h3 {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 600;
        }

        .modal-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            line-height: 1;
        }

        .modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }

        .modal-body {
            padding: 1.5rem;
        }

        .modal-actions {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid #e0e0e0;
        }
        
        /* Modal içindeki btn-secondary butonları için özel stil (icon butonlarından farklı) */
        .modal-actions .btn-secondary,
        .modal-content .btn-secondary {
            background: #6c757d !important;
            color: white !important;
            width: auto !important;
            height: auto !important;
            padding: 0.75rem 1.5rem !important;
            min-width: 120px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 6px !important;
            border: none !important;
            font-size: 0.875rem !important;
            font-weight: 500 !important;
            transition: all 0.2s ease !important;
            background-image: none !important;
            cursor: pointer;
        }
        
        /* Modal içindeki btn-danger butonları için özel stil (icon butonlarından farklı) */
        .modal-actions .btn-danger,
        .modal-content .btn-danger,
        #formDeleteModal .btn-danger,
        #deleteConfirmModal .btn-danger,
        #userDeleteModal .btn-danger,
        #companyDeleteModal .btn-danger,
        #personnelDeleteModal .btn-danger {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
            color: white !important;
            width: auto !important;
            height: auto !important;
            padding: 0.75rem 1.5rem !important;
            min-width: 120px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.5rem !important;
            border-radius: 6px !important;
            border: none !important;
            font-size: 0.875rem !important;
            font-weight: 600 !important;
            transition: all 0.2s ease !important;
            background-image: none !important;
            cursor: pointer;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* Modal içindeki btn-danger butonlarının içeriğini görünür yap */
        .modal-actions .btn-danger span,
        .modal-content .btn-danger span,
        #formDeleteModal .btn-danger span,
        #deleteConfirmModal .btn-danger span,
        #userDeleteModal .btn-danger span,
        #companyDeleteModal .btn-danger span,
        #personnelDeleteModal .btn-danger span {
            display: inline-block !important;
            font-size: 0.875rem !important;
            color: white !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .modal-actions .btn-danger svg,
        .modal-content .btn-danger svg,
        #formDeleteModal .btn-danger svg,
        #deleteConfirmModal .btn-danger svg,
        #userDeleteModal .btn-danger svg,
        #companyDeleteModal .btn-danger svg,
        #personnelDeleteModal .btn-danger svg {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: 16px !important;
            height: 16px !important;
        }
        
        .modal-actions .btn-danger:hover {
            background: linear-gradient(135deg, #c82333 0%, #bd2130 100%) !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
        }
        
        #formDeleteModal .btn-danger,
        #userDeleteModal .btn-danger,
        #companyDeleteModal .btn-danger,
        #personnelDeleteModal .btn-danger {
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        #formDeleteModal .btn-danger:hover,
        #userDeleteModal .btn-danger:hover,
        #companyDeleteModal .btn-danger:hover,
        #personnelDeleteModal .btn-danger:hover {
            background: linear-gradient(135deg, #c82333 0%, #bd2130 100%) !important;
            color: white !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* Genel Silme Modal Animasyonları */
        #formDeleteModal {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        #formDeleteModal .modal-content {
            transition: transform 0.3s ease;
        }
        
        .modal-actions .btn-secondary:hover,
        .modal-content .btn-secondary:hover {
            background: #5a6268 !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        /* Charts */
        .chart-container {
            position: relative;
            height: 250px;
            min-height: 250px;
            max-height: 350px;
            margin-bottom: 0.75rem;
            flex: 1;
        }

        .chart-card {
            margin-bottom: 1.5rem;
        }

        .chart-title {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 1rem;
            text-align: center;
        }

        .list-card {
            max-height: 400px;
            overflow-y: auto;
        }

        .list-item {
            padding: 0.75rem;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .list-item:last-child {
            border-bottom: none;
        }

        .list-item-name {
            font-weight: 500;
            color: #333;
        }

        .list-item-count {
            background: #f39200;
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.875rem;
            font-weight: 600;
        }

        /* Print Styles */
        /* Print helper classes */
        .hide-for-print {
            display: none !important;
        }
        
        .show-for-print {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
    
    /* Desktop Styles - min-width: 769px */
    /* ============================================
       DESKTOP VIEW - min-width: 992px
       ============================================ */
    @media (min-width: 992px) {
        /* Sidebar Desktop */
        .sidebar {
            width: 200px;
            position: fixed;
            left: 0;
            top: 0;
            transform: translateX(0);
            z-index: var(--z-index-sidebar);
        }
        
        /* Main Content Desktop */
        .main-content {
            margin-left: 200px;
            width: calc(100% - 200px);
            max-width: calc(100vw - 200px);
            padding: 1.5rem;
            box-sizing: border-box;
        }
        
        /* Mobile elements hidden on desktop */
        .mobile-menu-toggle {
            display: none !important;
        }
        
        .mobile-overlay {
            display: none !important;
        }
        
        /* Mobil logo - Desktop görünümde gizle */
        .mobile-logo {
            display: none !important;
        }
        
        /* Login logo - Desktop görünümde büyüt */
        .login-logo svg,
        .login-logo svg#katman_1 {
            height: 32px !important;
            max-width: 400px !important;
            width: 400px !important;
            min-width: 400px !important;
        }
        
        .login-welcome {
            margin-top: 1rem;
        }
        
        /* Sidebar logo - Desktop görünümde göster */
        .sidebar .sidebar-logo {
            display: flex !important;
        }
        
        /* btn-create-new - Desktop görünümde yazıları göster */
        .btn-create-new {
            padding: 0.4rem 0.85rem !important;
            gap: 0.35rem !important;
            font-size: 0.8rem !important;
            min-width: auto !important;
            max-width: none !important;
            width: auto !important;
            height: auto !important;
            min-height: auto !important;
            max-height: none !important;
            border-radius: 8px !important;
        }
        
        .btn-create-new > *:not(svg) {
            display: inline-block !important;
            width: auto !important;
            height: auto !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
        
        .btn-create-new svg {
            width: 14px !important;
            height: 14px !important;
            flex-shrink: 0 !important;
        }
        
        /* Section Content Desktop */
        .section-content {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /* Card Desktop */
        .card {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /* Form Row Desktop */
        .form-row {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /* Control Section Items Desktop */
        .control-section-items {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /* Stats Grid Desktop */
        .stats-grid {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /* Table Responsive Desktop */
        .table-responsive {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /* Prevent horizontal scroll on desktop */
        body {
            overflow-x: hidden;
            max-width: 100vw;
        }
        
        /* Fix inline styles causing overflow on desktop */
        [style*="min-width: 200px"],
        [style*="min-width: 300px"] {
            max-width: 100%;
        }
        
        /* Dashboard header consistency */
        #dashboard .card-body {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /* Quotes Desktop */
        #quotes .card-body {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /* Tasks Desktop */
        #orders .card-body {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /* Garanti Takip Desktop */
        #garantiTakip .card-body {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /* ============================================
           DESKTOP TYPOGRAPHY SYSTEM
           ============================================ */
        
        /* Desktop Typography - Headings - STANDARDIZED & REDUCED */
        h1,
        .page-title,
        .card-header h1,
        .card-header .page-title,
        .section-content h1,
        .section-content .page-title {
            font-size: 1.1rem !important;
            font-weight: 600 !important;
            line-height: 1.3 !important;
            margin: 0 0 0.75rem 0 !important;
        }
        
        h2,
        .card-header h2,
        .section-content h2,
        .card-body h2 {
            font-size: 1.1rem !important;
            font-weight: 600 !important;
            line-height: 1.3 !important;
            margin: 0 0 0.75rem 0 !important;
        }
        
        h3,
        .card-header h3,
        .section-content h3,
        .card-body h3 {
            font-size: 1rem !important;
            font-weight: 600 !important;
            line-height: 1.3 !important;
            margin: 0 0 0.5rem 0 !important;
        }
        
        /* Card header span elements - STANDARDIZED */
        .card-header span,
        .card-header span[style*="font-weight"],
        .card-header span[style*="font-size"] {
            font-size: 1.1rem !important;
            font-weight: 600 !important;
        }
        
        /* Inline style overrides for headings */
        [style*="font-size: 1.5rem"],
        [style*="font-size: 2rem"],
        [style*="font-size: 1.75rem"],
        [style*="font-size: 1.25rem"] {
            font-size: 1.1rem !important;
        }
        
        h2[style*="font-size"],
        h3[style*="font-size"],
        .page-title[style*="font-size"],
        .card-header h2[style*="font-size"],
        .card-header h3[style*="font-size"],
        .card-header span[style*="font-size"] {
            font-size: 1.1rem !important;
        }
        
        /* Desktop - Hoşgeldiniz başlığına el sallama iconu */
        #dashboard .card:first-child h3 {
            display: flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
        }
        
        #dashboard .card:first-child h3::before {
            content: none !important;
            display: none !important;
        }
        
        h4 {
            font-size: var(--font-size-lg) !important;
            font-weight: var(--font-weight-semibold) !important;
            line-height: var(--line-height-normal) !important;
            margin: 0 0 0.5rem 0 !important;
        }
        
        h5 {
            font-size: var(--font-size-base) !important;
            font-weight: var(--font-weight-semibold) !important;
            line-height: var(--line-height-normal) !important;
            margin: 0 0 0.5rem 0 !important;
        }
        
        h6 {
            font-size: var(--font-size-sm) !important;
            font-weight: var(--font-weight-semibold) !important;
            line-height: var(--line-height-normal) !important;
            margin: 0 0 0.5rem 0 !important;
        }
        
        /* Desktop Typography - Page Titles */
        .page-title {
            font-size: var(--font-size-2xl) !important;
            font-weight: var(--font-weight-semibold) !important;
            line-height: var(--line-height-tight) !important;
            margin: 0 0 1rem 0 !important;
        }
        
        /* Desktop Typography - Card Headers */
        .card-header h1,
        .card-header h2,
        .card-header h3,
        .card-header h4,
        .card-header h5,
        .card-header h6 {
            font-size: var(--font-size-lg) !important;
            font-weight: var(--font-weight-semibold) !important;
            line-height: var(--line-height-normal) !important;
        }
        
        /* Desktop Typography - Body Text */
        p {
            font-size: var(--font-size-base) !important;
            line-height: var(--line-height-relaxed) !important;
        }
        
        /* Desktop Typography - Labels */
        label,
        .form-label {
            font-size: var(--font-size-sm) !important;
            font-weight: var(--font-weight-medium) !important;
        }
        
        /* Desktop Typography - Buttons */
        .btn {
            font-size: var(--font-size-sm) !important;
            font-weight: var(--font-weight-medium) !important;
            line-height: var(--line-height-normal) !important;
        }
        
        .btn-sm {
            font-size: var(--font-size-xs) !important;
        }
        
        /* ============================================
           DESKTOP LAYOUT STANDARDIZATION
           ============================================ */
        
        /* Desktop Grid System */
        .stats-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
            gap: 1.5rem !important;
            margin-bottom: 2rem !important;
        }
        
        /* Desktop Flex Standardization */
        .card-header {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 1.25rem 1.5rem !important;
        }
        
        /* Kart başlıklarındaki küçük butonların gizlenmesini engelle */
        .card-header {
            position: relative !important;
            overflow: visible !important;
        }
        
        .card-body {
            padding: 1.5rem !important;
        }
        
        /* Desktop Form Layout */
        .form-row {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
            gap: 1rem !important;
        }
        
        /* Desktop Control Items Grid */
        .control-section-items {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 0.75rem !important;
        }
        
        /* ============================================
           DESKTOP ICON ALIGNMENT FIXES
           ============================================ */
        
        /* Icon Alignment - Buttons */
        .btn-action-icon {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            vertical-align: middle !important;
        }
        
        /* Icon Alignment - Table Actions */
        table .btn-action-icon,
        .table .btn-action-icon {
            vertical-align: middle !important;
            margin: 0 0.25rem !important;
        }
        
        /* Icon Alignment - Card Headers */
        .card-header .btn,
        .card-header button {
            vertical-align: middle !important;
            align-self: center !important;
        }
        
        /* Icon Alignment - Flex Containers */
        [style*="display: flex"] .btn-action-icon,
        [style*="display: flex"] button {
            align-self: center !important;
        }
        
        /* ============================================
           DESKTOP TABLE FIXES
           ============================================ */
        
        /* Table Standardization */
        table,
        .table {
            width: 100% !important;
            border-collapse: separate !important;
            border-spacing: 0 !important;
            font-size: var(--font-size-sm) !important;
        }
        
        table th,
        .table th {
            font-size: var(--font-size-sm) !important;
            font-weight: var(--font-weight-semibold) !important;
            padding: 0.75rem 1rem !important;
            text-align: left !important;
            vertical-align: middle !important;
            white-space: nowrap !important;
        }
        
        table td,
        .table td {
            font-size: var(--font-size-sm) !important;
            padding: 0.75rem 1rem !important;
            vertical-align: middle !important;
        }
        
        /* Table Action Column */
        table td:last-child,
        .table td:last-child {
            text-align: center !important;
            white-space: nowrap !important;
        }
        
        /* Table Responsive Container */
        .table-responsive {
            overflow-x: visible !important;
            width: 100% !important;
        }
        
        /* ============================================
           DESKTOP MARGIN/PADDING FIXES
           ============================================ */
        
        /* Standardize Card Spacing */
        .card {
            margin-bottom: 1.5rem !important;
        }
        
        .card:last-child {
            margin-bottom: 0 !important;
        }
        
        /* Standardize Section Spacing */
        .section-content {
            padding: 0 !important;
        }
        
        .section-content > .card:first-child {
            margin-top: 0 !important;
        }
        
        /* Standardize Header Spacing */
        .card-header + .card-body {
            padding-top: 1.5rem !important;
        }
        
        /* ============================================
           DESKTOP SPECIFIC PAGE FIXES
           ============================================ */
        
        /* Dashboard Desktop */
        #dashboard .card-body {
            padding: 1.5rem !important;
        }
        
        #dashboard .stats-grid {
            grid-template-columns: repeat(4, 1fr) !important;
            gap: 1.5rem !important;
        }
        
        /* Tasks Desktop */
        #tasks .card-header {
            padding: 1.25rem 1.5rem !important;
        }
        
        #tasks .card-body {
            padding: 1.5rem !important;
        }
        
        /* Quotes Desktop */
        #quotes .card-header {
            padding: 1.25rem 1.5rem !important;
        }
        
        #quotes .card-body {
            padding: 1.5rem !important;
        }
        
        /* Forms Desktop */
        #list .card-header {
            padding: 1.25rem 1.5rem !important;
        }
        
        #list .card-body {
            padding: 1.5rem !important;
        }
        
        /* ============================================
           DESKTOP OVERFLOW FIXES
           ============================================ */
        
        /* Prevent Horizontal Scroll */
        .main-content {
            overflow-x: hidden !important;
            width: calc(100% - 200px) !important;
            max-width: calc(100vw - 200px) !important;
        }
        
        .section-content {
            overflow-x: hidden !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        
        /* Fix Inline Style Overflows */
        [style*="min-width: 200px"],
        [style*="min-width: 300px"],
        [style*="min-width: 400px"] {
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        
        /* ============================================
           DESKTOP BUTTON STANDARDIZATION
           ============================================ */
        
        /* Button Alignment */
        .btn,
        button {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            vertical-align: middle !important;
        }
        
        /* Button Groups */
        .btn-group {
            display: inline-flex !important;
            vertical-align: middle !important;
        }
        
        .btn-group .btn {
            margin: 0 !important;
        }
        
        @media print {
            .no-print {
                display: none !important;
            }
            .sidebar {
                display: none !important;
            }
            .main-content {
                margin-left: 0 !important;
                width: 100% !important;
            }
            
            /* Login ve app section'ları gizle */
            #loginSection {
                display: none !important;
            }
            
            #appSection {
                display: block !important;
            }
            
            /* Tüm section'ları gizle, sadece print section'ı göster */
            .section-content {
                display: none !important;
            }
            
            .hide-for-print {
                display: none !important;
            }
            
            .show-for-print {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            #print {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                position: relative !important;
                width: 100% !important;
                height: auto !important;
            }
            
            /* Excel çıktısı gibi stil */
            body {
                font-size: 8pt !important;
                color: #000000 !important;
                background: white !important;
            }
            
            .print-container {
                max-width: 100% !important;
                margin: 0 !important;
                padding: 10mm !important;
                box-shadow: none !important;
            }
            
            .print-container * {
                font-size: 8pt !important;
                color: #000000 !important;
            }
            
            /* Turuncu renkler için */
            .print-container .orange-text,
            .print-container strong,
            .print-container th,
            .print-container td[style*="background"] {
                color: #f39200 !important;
            }
            
            /* Tablo stilleri */
            .print-container table {
                border-collapse: collapse !important;
                width: 100% !important;
                font-size: 8pt !important;
            }
            
            .print-container table th,
            .print-container table td {
                border: 1px solid #000000 !important;
                padding: 4pt !important;
                font-size: 8pt !important;
                text-align: left !important;
            }
            
            .print-container table th {
                background-color: #f39200 !important;
                color: #000000 !important;
                font-weight: bold !important;
            }
            
            .print-container table td {
                background-color: white !important;
                color: #000000 !important;
            }
            
            /* Başlıklar */
            .print-container h3,
            .print-container h5 {
                font-size: 8pt !important;
                color: #f39200 !important;
                font-weight: bold !important;
                margin: 4pt 0 !important;
            }
            
            /* Logo ve header */
            .print-header svg {
                height: 30px !important;
            }
            
            .print-header h3 {
                font-size: 8pt !important;
                color: #f39200 !important;
            }
            
            /* HR çizgileri */
            .print-container hr {
                border: 1px solid #000000 !important;
                margin: 8pt 0 !important;
            }
            
            /* Sayfa sonu */
            .page-break {
                page-break-after: always !important;
            }
        }

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Will-change for smooth animations */
.table-responsive,
.modal-overlay,
.sidebar {
    will-change: transform;
}

/* GPU acceleration for transforms */
.card,
.modal-content,
.sidebar {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Reduce repaints */
.table th,
.table td {
    contain: layout style paint;
}

/* Lazy loading images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Content visibility for off-screen elements */
.section-content:not(.active) {
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}

/* Optimize font rendering */
body,
input,
textarea,
select,
button {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Touch optimization */
@media (hover: none) and (pointer: coarse) {
    * {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    .btn,
    button,
    a {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Table performance optimizations */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.table {
    table-layout: auto;
}

/* Large table optimization */
.table tbody tr {
    contain: layout style paint;
}

/* Virtual scrolling hint */
.table tbody tr:not(:nth-child(-n+20)) {
    content-visibility: auto;
    contain-intrinsic-size: 40px;
}

/* Teklifler Tablosu - Kategori Sütununu Gizle (Tüm Ekran Boyutları) */
#quotesTable thead th:nth-child(4),
#quotesTable tbody td:nth-child(4),
#quotesTable th:nth-child(4),
#quotesTable td:nth-child(4),
table#quotesTable th:nth-child(4),
table#quotesTable td:nth-child(4),
#quotesTable tr th:nth-child(4),
#quotesTable tr td:nth-child(4),
#quotesTable th[onclick*="category"]:nth-child(4),
#quotesTable th:nth-child(4)[style],
#quotesTable td:nth-child(4)[style] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

/* Import Mobile CSS - Tüm mobil stiller için */
@import url('mobile.css');