:root { --bg:#f1f5f9; --card:#ffffff; --text:#0f172a; --border:#cbd5e1; --blue:#1e40af; --green:#16a34a; --red:#dc2626; --dark:#0f172a; --purple:#7e22ce; --wa:#25D366; --shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06); }
        body[data-theme="dark"] { --bg:#0f172a; --card:#1e293b; --text:#f8fafc; --border:#334155; }
        body { font-family:'Segoe UI',sans-serif; background:var(--bg); color:var(--text); margin:0; font-size:13px; font-weight:600; line-height:1.4; user-select:none; overflow-x:hidden; }
        * { box-sizing:border-box; }
        .container { max-width:1450px; margin:0 auto; padding:20px; display:none; }
        #customToast { position:fixed; top:20px; left:50%; transform:translateX(-50%); padding:12px 25px; border-radius:6px; color:#fff; font-weight:800; font-size:14px; box-shadow:0 10px 25px rgba(0,0,0,0.3); z-index:9999999; display:none; text-align:center; min-width:250px; }
        #loader { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(15,23,42,0.85); z-index:9999998; display:none; justify-content:center; align-items:center; font-weight:800; color:#fff; font-size:18px; flex-direction:column; }
        .spinner { border:4px solid rgba(255,255,255,0.3); border-top:4px solid #fff; border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite; margin-bottom:10px; }
        @keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
        .modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:100000; display:none; justify-content:center; align-items:center; }
        .modal-content { background:var(--card); padding:25px; width:90%; max-width:450px; border-radius:10px; border:2px solid var(--blue); box-shadow:0 20px 50px rgba(0,0,0,0.5); max-height:90vh; overflow-y:auto; }
        .chat-drawer { position:fixed; top:0; right:-450px; width:400px; height:100vh; background:#efeae2; box-shadow:-5px 0 25px rgba(0,0,0,0.3); z-index:1000001; display:flex; flex-direction:column; transition:right 0.4s cubic-bezier(0.4,0,0.2,1); border-left:1px solid var(--border); }
        .chat-drawer.open { right:0; }
        .chat-header { background:#075e54; color:#fff; padding:15px 20px; display:flex; justify-content:space-between; align-items:center; }
        .chat-header h3 { margin:0; font-size:16px; display:flex; align-items:center; gap:8px; }
        .chat-context { background:#fff; padding:12px 20px; border-bottom:1px solid #ddd; font-size:11px; color:#555; display:flex; flex-direction:column; gap:4px; box-shadow:0 2px 4px rgba(0,0,0,0.05); z-index:2; }
        .chat-context b { color:#000; font-size:13px; }
        .chat-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; background-image:url('https://www.transparenttextures.com/patterns/cubes.png'); } 
        .chat-bubble { max-width:85%; padding:10px 14px; border-radius:8px; font-size:13px; line-height:1.4; position:relative; box-shadow:0 1px 2px rgba(0,0,0,0.1); }
        .chat-bubble.out { align-self:flex-end; background:#dcf8c6; border-bottom-right-radius:0; }
        .chat-bubble.in { align-self:flex-start; background:#fff; border-bottom-left-radius:0; }
        .chat-time { font-size:9px; color:#888; display:block; text-align:right; margin-top:4px; }
        .chat-footer { background:#f0f0f0; padding:15px; display:flex; flex-direction:column; gap:10px; border-top:1px solid #ddd; }
        .chat-actions { display:flex; gap:10px; }
        .chat-btn { background:#fff; border:1px solid #ccc; padding:8px 12px; border-radius:20px; cursor:pointer; display:flex; align-items:center; gap:5px; font-weight:bold; color:#555; transition:0.2s; font-size:11px; }
        .chat-btn:hover { background:#e2e8f0; }
        .chat-input-wrapper { display:flex; flex-direction:column; gap:8px; }
        .chat-input-wrapper select { width:100%; padding:8px 10px; border-radius:6px; border:1px solid #ccc; outline:none; font-size:12px; }
        .send-btn { background:var(--wa); color:#fff; border:none; width:40px; height:40px; border-radius:50%; cursor:pointer; display:flex; justify-content:center; align-items:center; box-shadow:0 2px 5px rgba(37,211,102,0.4); transition:0.2s; flex-shrink:0; }
        .send-btn:hover { transform:scale(1.05); }
        #loginScreen { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#0f172a; background-size:cover; background-position:center; transition:background-image 1s; display:flex; justify-content:space-between; align-items:stretch; z-index:99999; overflow-y:auto; }
        .login-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:1; }
        .login-left-panel { width:450px; min-width:320px; background:rgba(15,23,42,0.7); backdrop-filter:blur(25px); border-right:1px solid rgba(255,255,255,0.15); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px; box-shadow:10px 0 40px rgba(0,0,0,0.6); z-index:2; position:relative; }
        .login-left-panel img { height:60px; margin-bottom:20px; filter:drop-shadow(0px 4px 6px rgba(0,0,0,0.5)); }
        .login-left-panel h2 { margin-top:0; color:#fff; font-size:26px; font-weight:900; letter-spacing:1.5px; margin-bottom:5px; }
        .login-left-panel p { color:#cbd5e1; font-size:13px; margin-bottom:40px; text-align:center; }
        .login-input { width:100%; padding:14px 16px; margin:8px 0; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:8px; font-weight:700; color:#fff; outline:none; transition:0.3s; font-size:14px; }
        .login-input::placeholder { color:rgba(255,255,255,0.6); font-weight:600; }
        .login-input:focus { border-color:#38bdf8; background:rgba(255,255,255,0.2); box-shadow:0 0 15px rgba(56,189,248,0.3); }
        .login-btn { width:100%; padding:15px; background:linear-gradient(135deg,#1e40af,#3b82f6); color:#fff; border:none; border-radius:8px; font-weight:900; cursor:pointer; margin-top:25px; font-size:15px; letter-spacing:1px; transition:0.3s; box-shadow:0 4px 15px rgba(37,99,235,0.4); text-transform:uppercase; }
        .login-right-panel { flex:1; z-index:2; display:flex; justify-content:center; align-items:center; padding:40px; }
        .stats-glass-panel { background:rgba(15,23,42,0.4); backdrop-filter:blur(15px); border:1px solid rgba(255,255,255,0.2); border-radius:20px; padding:40px; width:100%; max-width:600px; box-shadow:0 20px 50px rgba(0,0,0,0.5); }
        .stats-glass-panel h3 { color:#fff; margin-top:0; text-align:center; font-size:22px; letter-spacing:1px; border-bottom:1px solid rgba(255,255,255,0.2); padding-bottom:15px; margin-bottom:25px; }
        .log-dash-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
        .log-stat-box { padding:25px; border-radius:12px; color:#fff; text-align:center; box-shadow:inset 0 0 20px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.1); transition:0.3s; }
        .log-stat-box h4 { margin:0; font-size:14px; opacity:0.9; text-transform:uppercase; letter-spacing:1px; }
        .log-stat-box h2 { margin:10px 0 0 0; font-size:42px; font-weight:900; }
        .header { position: sticky !important; top: 0 !important; z-index: 1000 !important; display: flex; justify-content: space-between; align-items: center; background: var(--card) !important; padding: 15px 25px !important; border-radius: 0 0 10px 10px !important; margin-bottom: 0 !important; border-top: 5px solid var(--blue) !important; border-bottom: 1px solid var(--border) !important; box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }
        body[data-theme="dark"] .header { background:linear-gradient(to bottom,#1e293b,#0f172a); border-bottom-color:#334155; }
        .logo-box { display:flex; align-items:center; gap:15px; } 
        .logo-box img { height:45px; } 
        .logo-text h2 { margin:0; font-size:22px; font-weight:900; color:var(--text); line-height:1; }
        .logo-text p { margin:0; font-size:12px; color:#64748b; font-weight:700; }
        .status-wrapper { display:flex; flex-direction:column; align-items:flex-end; margin-right:15px; }
        .status-pill { padding:6px 15px; border-radius:20px; font-size:12px; font-weight:800; display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; color:#fff; }
        .status-pill.online { background:#16a34a !important; } .status-pill.offline { background:#dc2626 !important; } .status-pill.connecting { background:#d97706 !important; }
        .status-dot { width:8px; height:8px; border-radius:50%; background:#fff; }
        .sync-time { font-size:10px; color:#64748b; font-weight:800; margin-top:4px; }
        .header-right { display:flex; align-items:center; gap:8px; }
        .btn { padding:8px 14px; border-radius:6px; border:none; font-weight:800; cursor:pointer; color:white; font-size:12px; display:inline-flex; align-items:center; justify-content:center; gap:5px; box-shadow:0 1px 2px rgba(0,0,0,0.1); transition:0.2s; }
        .btn:hover { opacity:0.9; transform:translateY(-2px); }
        .btn svg { width:14px; height:14px; fill:currentColor; }
        .btn-mode { background:#475569; } .btn-purple { background:var(--purple); } .btn-green { background:var(--green); } .btn-dark { background:var(--dark); } .btn-blue { background:var(--blue); } .btn-red { background:var(--red); } .btn-orange { background:#ea580c; }
        .dash-grid { position: sticky; top: 65px; z-index: 999; background: var(--bg); padding: 15px 0 15px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:15px; box-shadow: 0 15px 15px -15px rgba(0,0,0,0.15); }
        .dash-card { padding:15px 20px; border-radius:8px; color:#fff; box-shadow:var(--shadow); display:flex; justify-content:space-between; align-items:center; border:1px solid rgba(0,0,0,0.1); }
        .dash-card h3 { margin:0; font-size:14px; text-transform:uppercase; opacity:0.9; }
        .dash-card h2 { margin:0; font-size:28px; font-weight:900; }
        .bg-op { background:linear-gradient(135deg,#ef4444,#b91c1c); } .bg-pe { background:linear-gradient(135deg,#f59e0b,#d97706); } .bg-it { background:linear-gradient(135deg,#3b82f6,#1d4ed8); } .bg-cl { background:linear-gradient(135deg,#22c55e,#15803d); }
        .card { background:var(--card); border:1px solid var(--border); border-radius:10px; margin-bottom:25px; overflow:hidden; box-shadow:var(--shadow); }
        .card-header { padding:15px 20px; background:#f8fafc; color:var(--text); border-bottom:1px solid var(--border); font-weight:900; font-size:14px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
        body[data-theme="dark"] .card-header { background:#0f172a; }
        .card-body { padding:20px; }
        .form-section { border:1px solid var(--border); border-radius:8px; margin-bottom:25px; background:var(--card); box-shadow:0 2px 4px rgba(0,0,0,0.02); }
        .sec-header { background:linear-gradient(to right,var(--bg),var(--card)); padding:12px 20px; font-weight:800; border-bottom:2px solid var(--blue); font-size:13px; text-transform:uppercase; color:var(--blue); display:flex; align-items:center; gap:8px; }
        .sec-body { padding:20px; }
        .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:15px; }
        .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:15px; }
        .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:15px; }
        .grid-1 { display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:15px; }
        .full-width { grid-column:1 / -1; }
        .input-group label { display:block; font-size:10px; font-weight:800; margin-bottom:5px; color:#475569; text-transform:uppercase; }
        .input-wrapper { display:flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--bg); }
        input, select, textarea { width:100%; padding:8px 10px; border:none; background:transparent; color:var(--text); outline:none; font-size:13px; font-weight:600; font-family:inherit; }
        .input-icon { padding:8px 10px; background:var(--border); border-right:1px solid var(--border); min-width:35px; text-align:center; color:#000; font-weight:bold; display:flex; align-items:center; justify-content:center; font-size:14px; opacity:0.8; }
        .input-wrapper:focus-within { border-color:var(--blue); box-shadow:0 0 0 2px rgba(37,99,235,0.2); }
        input[readonly] { background:var(--border); color:var(--blue); font-weight:900; }
        .checkbox-wrapper { min-height:42px; max-height:130px; overflow-y:auto; background:var(--bg); width:100%; padding:10px; border:1px solid var(--border); border-radius:6px; box-shadow:inset 0 1px 3px rgba(0,0,0,0.02); }
        .checkbox-grid { display:flex; flex-wrap:wrap; gap:8px; width:100%; align-items:center; }
        .chk-item { display:inline-flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start; gap:8px; font-size:11px; font-weight:800; color:var(--text); background:var(--card); padding:6px 12px; border-radius:30px; border:1px solid var(--border); cursor:pointer; transition:all 0.2s; margin:0; white-space:nowrap; line-height:1; }
        .chk-item input[type="checkbox"] { margin:0 !important; width:14px !important; height:14px !important; flex-shrink:0 !important; cursor:pointer; accent-color:var(--blue); position:relative; }
        .chk-item:hover { border-color:var(--blue); color:var(--blue); }
        .action-buttons { display:flex; justify-content:center; gap:20px; margin-top:30px; border-top:1px solid var(--border); padding-top:25px; }
        .btn-save { background:linear-gradient(135deg,#1e40af,#2563eb); padding:12px 40px; font-size:15px; border-radius:30px; box-shadow:0 4px 15px rgba(37,99,235,0.4); border:none; color:#fff; font-weight:800; cursor:pointer; }
        .btn-reset { background:linear-gradient(135deg,#b91c1c,#ef4444); padding:12px 40px; font-size:15px; border-radius:30px; box-shadow:0 4px 15px rgba(220,38,38,0.4); border:none; color:#fff; font-weight:800; cursor:pointer; }
        .filter-bar { display:flex; flex-wrap:wrap; gap:12px; background:var(--bg); padding:15px; border-radius:8px; border:1px solid var(--border); margin-bottom:20px; align-items:flex-end; }
        .filter-item { display:flex; flex-direction:column; flex:1; min-width:130px; }
        .filter-item label { font-size:10px; font-weight:800; margin-bottom:5px; color:#475569; text-transform:uppercase; }
        .filter-item input, .filter-item select { width:100%; padding:0 10px; font-size:12px; border:1px solid var(--border); border-radius:4px; height:34px; outline:none; font-weight:600; background:var(--card); color:var(--text); box-sizing:border-box; }
        .filter-actions { display:flex; gap:8px; margin-left:auto; height:34px; align-items:center; }
        .table-wrap { overflow-x:auto; border:none; border-radius:8px; width:100%; border:1px solid var(--border); box-shadow:0 2px 10px rgba(0,0,0,0.03); }
        table { width:100%; border-collapse:collapse; min-width:1100px; background:var(--card); }
        th { background:#f8fafc; color:#334155; padding:12px 15px; text-align:left; font-size:10px; font-weight:800; text-transform:uppercase; border-bottom:2px solid var(--border); }
        body[data-theme="dark"] th { background:#0f172a; color:#cbd5e1; }
        td { padding:12px 15px; vertical-align:top; color:var(--text); font-weight:600; border-bottom:1px solid var(--border); }
        .tbl-job-box { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:12px; margin-bottom:10px; transition:0.2s; }
        .st-badge { padding:4px 12px; border-radius:30px; color:#fff; font-size:10px; font-weight:900; text-transform:uppercase; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,0.15); }
        .action-stack { display:flex; flex-direction:column; gap:8px; width:100%; }
        .action-stack .btn { width:100%; justify-content:flex-start; padding:8px 12px; font-size:12px; text-transform:none; font-weight:800; gap:8px; border-radius:6px; white-space:nowrap; box-sizing:border-box; }
        .action-stack .btn svg { flex-shrink:0; width:14px; height:14px; margin-right:4px; }
        #printableArea { position:fixed; top:0; left:0; width:100%; height:100%; background:#525659; z-index:99999; overflow-y:auto; display:none; padding:40px 0; flex-direction:column; align-items:center; gap:20px; }
        .a4-page { width:210mm; min-height:297mm; background:#fff; color:#000; padding:12mm; box-shadow:0 5px 25px rgba(0,0,0,0.5); font-family:Arial, sans-serif; position:relative; margin:0 auto; display:flex; flex-direction:column; }
        
        /* 🚀 FIX: Missing Print Layout CSS Added */
        .print-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #1e40af; padding-bottom: 15px; margin-bottom: 20px; }
        .print-logo { max-height: 60px; }
        .print-comp-info { text-align: right; font-size: 12px; color: #333; line-height: 1.5; }
        .print-comp-name { font-size: 18px; font-weight: 900; color: #1e40af; text-transform: uppercase; margin-bottom: 5px; }
        .print-title { text-align: center; font-size: 18px; font-weight: 900; background: #f1f5f9; padding: 10px; margin-bottom: 20px; border: 1px solid #cbd5e1; border-radius: 4px; }
        .print-grid { display: flex; gap: 20px; margin-bottom: 20px; }
        .print-box { flex: 1; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; }
        .print-box-title { background: #f8fafc; font-size: 11px; font-weight: 900; padding: 8px 12px; border-bottom: 1px solid #cbd5e1; color: #0f172a; text-transform: uppercase; }
        .print-box-content { padding: 12px; font-size: 12px; line-height: 1.8; }
        .row-info { display: flex; justify-content: space-between; border-bottom: 1px dashed #e2e8f0; padding-bottom: 4px; margin-bottom: 4px; }
        .row-info:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .sig-area { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 50px; page-break-inside: avoid; }
        .sig-line { border-top: 1px solid #000; width: 200px; text-align: center; font-weight: bold; font-size: 12px; padding-top: 5px; }

        /* 🚀 FIX: Multiple Blank Pages Issue in Printing */
        @media print { 
            @page { size: A4; margin: 0; }
            
            /* पीछे के सारे सॉफ्टवेयर को पूरी तरह हटा दें ताकि खाली जगह न बचे */
            body > *:not(#printableArea) { display: none !important; }
            
            html, body { margin: 0; padding: 0; background: #fff; width: 100%; height: auto !important; min-height: auto !important; overflow: visible !important; }
            
            #printableArea { 
                display: block !important; 
                position: static !important; /* Absolute पोज़िशनिंग हटा दी गई है */
                width: 100%; height: auto !important; 
                background: transparent; padding: 0; margin: 0; 
                overflow: visible !important; 
            }
            
            #printContent { display: block !important; position: static !important; width: 100%; height: auto !important; }
            .print-action-bar { display: none !important; }
            
            .a4-page { 
                width: 100%; height: auto; min-height: auto; 
                border: none; box-shadow: none; margin: 0; padding: 10mm; 
                page-break-after: avoid; page-break-inside: avoid; 
            }
        }
        @media (hover: hover) and (pointer: fine) {
            .dash-card, .log-stat-box { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; }
            .bg-op:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 15px 25px rgba(220, 38, 38, 0.5) !important; z-index: 10; }
            .bg-pe:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 15px 25px rgba(217, 119, 6, 0.5) !important; z-index: 10; }
            .bg-it:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 15px 25px rgba(37, 99, 235, 0.5) !important; z-index: 10; }
            .bg-cl:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 15px 25px rgba(22, 163, 74, 0.5) !important; z-index: 10; }
        }/* आपकी मुख्य स्टाइल यहाँ */