/* ========================================================== */
        /* ==================== START CSS =========================== */
        /* ========================================================== */
        
        /* ===== Font & Reset ===== */
        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap');
        
        * { 
            box-sizing: border-box; 
        }
        
        body { 
            font-family: 'Vazirmatn', Tahoma, sans-serif; 
            background-color: #f8fafc; 
            transition: background-color 0.3s, color 0.3s; 
        }
        
        /* ===== Dark Theme ===== */
        body.dark-mode { 
            background-color: #0f172a; 
            color: #e2e8f0; 
        }
        
        body.dark-mode .bg-white { 
            background-color: #1e293b !important; 
            color: #e2e8f0 !important; 
            border-color: #334155 !important; 
        }
        
        body.dark-mode .bg-slate-50 { 
            background-color: #1e293b !important; 
        }
        
        body.dark-mode .bg-slate-100 { 
            background-color: #2d3a4f !important; 
        }
        
        body.dark-mode .border-slate-200 { 
            border-color: #334155 !important; 
        }
        
        body.dark-mode .text-slate-800 { 
            color: #e2e8f0 !important; 
        }
        
        body.dark-mode .text-slate-600, 
        body.dark-mode .text-slate-500 { 
            color: #94a3b8 !important; 
        }
        
        body.dark-mode .text-slate-700 { 
            color: #cbd5e1 !important; 
        }
        
        body.dark-mode .preview-table th { 
            background-color: #1e3a8a !important; 
        }
        
        body.dark-mode .preview-table td { 
            border-color: #334155 !important; 
        }
        
        body.dark-mode .preview-table { 
            background-color: #0f172a !important; 
        }
        
        body.dark-mode .preview-table tr.draggable-row { 
            background-color: #1e293b !important; 
        }
        
        body.dark-mode .preview-table tr.draggable-row:hover { 
            background-color: #2d3a4f !important; 
        }
        
        body.dark-mode .toast, 
        body.dark-mode .modal-box { 
            background: #1e293b !important; 
            color: #e2e8f0 !important; 
        }
        
        body.dark-mode .modal-box .border-slate-200 { 
            border-color: #334155 !important; 
        }
        
        body.dark-mode .modal-box .bg-slate-100 { 
            background-color: #2d3a4f !important; 
        }
        
        /* ===== UI Components ===== */
        .rotate-th { 
            writing-mode: vertical-rl; 
            transform: rotate(180deg); 
            text-align: center; 
            vertical-align: middle; 
            white-space: nowrap; 
            height: 75px; 
            padding: 2px !important; 
        }
        
        body.help-mode-active .help-target { 
            cursor: help !important; 
            position: relative; 
        }
        
        body.help-mode-active .help-target::after { 
            content: '?'; 
            position: absolute; 
            top: 2px; 
            right: 2px; 
            background-color: #4f46e5; 
            color: white; 
            border-radius: 50%; 
            width: 14px; 
            height: 14px; 
            font-size: 10px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            animation: pulse-help 1.5s infinite; 
        }
        
        @keyframes pulse-help { 
            0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); } 
            70% { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0); } 
            100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); } 
        }
        
        .draggable-row { 
            cursor: grab; 
            transition: background-color 0.2s; 
        }
        
        .draggable-row:active { 
            cursor: grabbing; 
        }
        
        .drag-over-top { 
            border-top: 3px solid #4f46e5 !important; 
        }
        
        .drag-over-bottom { 
            border-bottom: 3px solid #4f46e5 !important; 
        }
        
        .drag-ghost { 
            opacity: 0.4; 
            background-color: #e0e7ff !important; 
        }
        
        .highlight-cell { 
            font-size: 13px !important; 
            font-weight: 900 !important; 
            color: #000000 !important; 
        }
        
        body.dark-mode .highlight-cell { 
            color: #e2e8f0 !important; 
        }
        
        .cutoff-1 { 
            background-color: #dbeafe !important; 
        }
        
        .cutoff-2, 
        .cutoff-3 { 
            background-color: #f1f5f9 !important; 
        }
        
        body.dark-mode .cutoff-1 { 
            background-color: #1e3a8a !important; 
        }
        
        body.dark-mode .cutoff-2, 
        body.dark-mode .cutoff-3 { 
            background-color: #2d3a4f !important; 
        }
        
        .group-border { 
            border-right: 4px solid #4f46e5 !important; 
        }
        
        body.dark-mode .group-border { 
            border-right-color: #818cf8 !important; 
        }

        .preview-table { 
            width: 100%; 
            border-collapse: collapse; 
            font-size: 11px; 
            table-layout: fixed; 
        }
        
        .preview-table th, 
        .preview-table td { 
            border: 1px solid #cbd5e1; 
            padding: 6px 3px; 
            text-align: center; 
            word-wrap: break-word; 
            word-break: break-all; 
            position: relative; 
        }
        
        .preview-table th { 
            background-color: #1e3a8a; 
            color: white; 
            position: relative; 
            user-select: none; 
        }
        
        .resize-handle { 
            position: absolute; 
            top: 0; 
            bottom: 0; 
            right: -2px; 
            width: 4px; 
            cursor: col-resize; 
            background: transparent; 
            z-index: 10; 
        }
        
        .resize-handle:hover, 
        .resize-handle.active { 
            background: #4f46e5; 
        }

        .toast-container { 
            position: fixed; 
            top: 20px; 
            left: 50%; 
            transform: translateX(-50%); 
            z-index: 9999; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            gap: 8px; 
            pointer-events: none; 
        }
        
        .toast { 
            background: #1e293b; 
            color: white; 
            padding: 10px 24px; 
            border-radius: 12px; 
            font-size: 14px; 
            font-weight: 500; 
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); 
            opacity: 0; 
            transform: translateY(-20px); 
            transition: all 0.4s ease; 
            pointer-events: auto; 
            min-width: 250px; 
            text-align: center; 
        }
        
        .toast.show { 
            opacity: 1; 
            transform: translateY(0); 
        }
        
        .toast.success { background: #0b7e4b; }
        .toast.error { background: #b91c1c; }
        .toast.warning { background: #b45309; }

        .print-dropdown { 
            position: relative; 
            display: inline-block; 
        }
        
        .print-dropdown-content { 
            display: none; 
            position: absolute; 
            background: white; 
            min-width: 200px; 
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); 
            border-radius: 12px; 
            padding: 8px; 
            z-index: 10; 
            right: 0; 
            top: 110%; 
            border: 1px solid #e2e8f0; 
        }
        
        body.dark-mode .print-dropdown-content { 
            background: #1e293b; 
            border-color: #334155; 
        }
        
        .print-dropdown-content button { 
            width: 100%; 
            padding: 10px 14px; 
            border: none; 
            background: transparent; 
            text-align: right; 
            font-size: 13px; 
            font-weight: 600; 
            border-radius: 8px; 
            transition: background 0.15s; 
            display: flex; 
            align-items: center; 
            gap: 8px; 
            color: #1e293b; 
        }
        
        body.dark-mode .print-dropdown-content button { 
            color: #e2e8f0; 
        }
        
        .print-dropdown-content button:hover { 
            background: #f1f5f9; 
        }
        
        body.dark-mode .print-dropdown-content button:hover { 
            background: #2d3a4f; 
        }
        
        .print-dropdown-content.show { 
            display: block; 
        }
        
        .print-dropdown-btn { 
            background: #1e3a8a; 
            color: white; 
            padding: 10px 20px; 
            border-radius: 12px; 
            border: none; 
            font-weight: 700; 
            cursor: pointer; 
            display: flex; 
            align-items: center; 
            gap: 8px; 
            font-size: 13px; 
            transition: background 0.2s; 
            width: 100%; 
            justify-content: center; 
        }
        
        .print-dropdown-btn:hover { 
            background: #1e40af; 
        }

        .modal-overlay { 
            position: fixed; 
            inset: 0; 
            background: rgba(0, 0, 0, 0.5); 
            z-index: 1000; 
            display: none; 
            align-items: center; 
            justify-content: center; 
            backdrop-filter: blur(4px); 
        }
        
        .modal-overlay.active { 
            display: flex; 
        }
        
        .modal-box { 
            background: white; 
            border-radius: 20px; 
            max-width: 750px; 
            width: 95%; 
            max-height: 90vh; 
            overflow-y: auto; 
            padding: 24px; 
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); 
            transition: transform 0.15s ease; 
        }
        
        .modal-box h3 { 
            font-size: 20px; 
            font-weight: 700; 
            margin-bottom: 16px; 
            text-align: center; 
            border-bottom: 2px solid #e2e8f0; 
            padding-bottom: 12px; 
        }
        
        body.dark-mode .modal-box h3 { 
            border-color: #334155; 
        }
        
        .pallet-input-item { 
            display: flex; 
            align-items: center; 
            gap: 8px; 
            padding: 6px 0; 
            border-bottom: 1px solid #f1f5f9; 
            flex-wrap: wrap; 
        }
        
        body.dark-mode .pallet-input-item { 
            border-color: #334155; 
        }
        
        .pallet-input-item label { 
            min-width: 60px; 
            font-weight: 700; 
            font-size: 13px; 
        }
        
        .pallet-input-item .info-row { 
            display: flex; 
            gap: 12px; 
            flex-wrap: wrap; 
            font-size: 12px; 
            color: #334155; 
            flex: 1; 
        }
        
        body.dark-mode .pallet-input-item .info-row { 
            color: #94a3b8; 
        }
        
        .pallet-input-item .info-row span { 
            background: #f1f5f9; 
            padding: 2px 8px; 
            border-radius: 4px; 
            white-space: nowrap; 
        }
        
        body.dark-mode .pallet-input-item .info-row span { 
            background: #2d3a4f; 
        }
        
        .pallet-input-item input { 
            width: 70px; 
            padding: 4px 8px; 
            border: 1px solid #cbd5e1; 
            border-radius: 6px; 
            font-size: 14px; 
            text-align: center; 
        }
        
        body.dark-mode .pallet-input-item input { 
            background: #0f172a; 
            border-color: #334155; 
            color: #e2e8f0; 
        }
        
        .pallet-input-item .pallet-count-preview { 
            background: #dbeafe; 
            padding: 2px 10px; 
            border-radius: 12px; 
            font-weight: 700; 
            font-size: 12px; 
            color: #1e3a8a; 
        }
        
        body.dark-mode .pallet-input-item .pallet-count-preview { 
            background: #1e3a8a; 
            color: #e2e8f0; 
        }
        
        .modal-actions { 
            display: flex; 
            gap: 12px; 
            justify-content: flex-end; 
            margin-top: 20px; 
            padding-top: 16px; 
            border-top: 1px solid #e2e8f0; 
        }
        
        body.dark-mode .modal-actions { 
            border-color: #334155; 
        }
        
        .modal-actions button { 
            padding: 10px 24px; 
            border-radius: 12px; 
            font-weight: 700; 
            border: none; 
            cursor: pointer; 
            transition: 0.2s; 
        }
        
        .btn-primary { 
            background: #1e3a8a; 
            color: white; 
        }
        
        .btn-primary:hover { 
            background: #1e40af; 
        }
        
        .btn-secondary { 
            background: #e2e8f0; 
            color: #1e293b; 
        }
        
        body.dark-mode .btn-secondary { 
            background: #2d3a4f; 
            color: #e2e8f0; 
        }
        
        #searchInput { 
            width: 100%; 
            padding: 6px 12px; 
            border-radius: 8px; 
            border: 1px solid #cbd5e1; 
            font-size: 13px; 
            transition: border 0.2s; 
        }
        
        #searchInput:focus { 
            outline: none; 
            border-color: #4f46e5; 
        }
        
        body.dark-mode #searchInput { 
            background: #0f172a; 
            border-color: #334155; 
            color: #e2e8f0; 
        }
        
        .dashboard-stats { 
            display: flex; 
            flex-wrap: wrap; 
            gap: 12px 20px; 
            font-size: 13px; 
            font-weight: 600; 
        }
        
        .dashboard-stats span { 
            background: #f1f5f9; 
            padding: 4px 12px; 
            border-radius: 20px; 
            white-space: nowrap; 
        }
        
        body.dark-mode .dashboard-stats span { 
            background: #2d3a4f; 
        }
        
        .dashboard-stats .stat-value { 
            color: #1e3a8a; 
        }
        
        body.dark-mode .dashboard-stats .stat-value { 
            color: #93c5fd; 
        }
        
        @media (max-width: 640px) { 
            .preview-table { font-size: 9px; } 
            .preview-table th, .preview-table td { padding: 3px 1px; } 
        }
        
        /* ========================================================== */
        /* ===================== END CSS ============================ */
        /* ========================================================== */