body{background-color:#08080f;margin:0;padding:0}:root{--bg-primary:#f8f7fc;--bg-secondary:#ffffffd9;--bg-sidebar:#fffc;--text-primary:#140f2d;--text-secondary:#595180;--text-dim:#8a7fa6;--primary:#7c3aed;--primary-hover:#6d28d9;--primary-light:#7c3aed14;--border-color:#7c3aed1f;--shadow-soft:0 10px 30px #7c3aed0a;--shadow-hover:0 15px 35px #7c3aed14;--success:#10b981;--success-light:#ecfdf5;--error:#ef4444;--error-light:#fef2f2;--warning:#f59e0b;--warning-light:#fefbeb;--glass-blur:blur(20px)}body{background-color:var(--bg-primary);color:var(--text-primary);margin:0;padding:0;font-family:Cairo,Outfit,sans-serif;overflow-x:hidden}*{font-family:Cairo,Outfit,sans-serif}.adminContainer{direction:rtl;min-height:100vh;display:flex}.sidebar{background-color:var(--bg-sidebar);border-left:1px solid var(--border-color);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);z-index:40;flex-direction:column;width:280px;display:flex;position:fixed;top:0;bottom:0;right:0;box-shadow:-4px 0 30px #7c3aed05}.sidebarHeader{border-bottom:1px solid var(--border-color);align-items:center;gap:.75rem;padding:2rem 1.5rem;display:flex}.logoIcon{background:linear-gradient(135deg, var(--primary), #c084fc);color:#fff;border-radius:12px;justify-content:center;align-items:center;width:42px;height:42px;font-size:16px;font-weight:900;display:flex;box-shadow:0 4px 15px #7c3aed59}.brandTitle{color:var(--text-primary);margin:0;font-size:18px;font-weight:800}.brandSub{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin:0;font-size:10px}.navMenu{flex-direction:column;flex:1;gap:.35rem;padding:1.5rem 1rem;display:flex}.navItem{color:var(--text-secondary);cursor:pointer;text-align:right;background:0 0;border:none;border-radius:10px;align-items:center;gap:.75rem;width:100%;padding:.85rem 1.15rem;font-size:14px;font-weight:600;transition:all .2s;display:flex}.navItem:hover{background-color:var(--primary-light);color:var(--primary)}.navItem.active{background-color:var(--primary-light);color:var(--primary);box-shadow:inset 0 0 0 1px #7c3aed26}.sidebarFooter{border-top:1px solid var(--border-color);padding:1.5rem}.mqttStatus{color:var(--success);background:var(--success-light);border:1px solid #10b98126;border-radius:8px;align-items:center;gap:.5rem;padding:.65rem .85rem;font-size:12px;font-weight:700;display:flex}.pulseDot{background-color:var(--success);border-radius:50%;width:8px;height:8px;animation:2s infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #10b98180}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.mainContent{flex-direction:column;flex:1;min-height:100vh;margin-right:280px;display:flex}.topbar{border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:30;background:#fcfbfecc;justify-content:space-between;align-items:center;padding:1.5rem 2.5rem;display:flex;position:sticky;top:0}.pageTitle{color:var(--text-primary);margin:0;font-size:20px;font-weight:800}.searchBox{width:320px;position:relative}.searchIcon{color:var(--text-dim);position:absolute;top:50%;right:14px;transform:translateY(-50%)}.searchInput{background:var(--bg-secondary);border:1px solid var(--border-color);width:100%;color:var(--text-primary);border-radius:10px;outline:none;padding:.65rem 1rem .65rem 2.8rem;font-size:14px;transition:all .25s;box-shadow:0 2px 8px #7c3aed05}.searchInput:focus{border-color:var(--primary);box-shadow:0 4px 15px #7c3aed0f}.contentArea{flex:1;padding:2.5rem}.panel{background:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:16px;margin-bottom:2rem;padding:1.85rem;transition:transform .25s,box-shadow .25s,border-color .25s}.panelHeader{justify-content:space-between;align-items:center;margin-bottom:1.85rem;display:flex}.panelHeader h3{color:var(--text-primary);margin:0;font-size:16px;font-weight:800}.statsGrid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-bottom:2rem;display:grid}.statCard{background:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:var(--shadow-soft);border-radius:16px;padding:1.75rem;transition:all .25s}.statCard:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.statLabel{color:var(--text-secondary);margin:0 0 .5rem;font-size:13px;font-weight:600}.statValue{color:var(--text-primary);margin:0;font-size:32px;font-weight:900}.devicesGrid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;display:grid}.deviceCard{background:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:var(--shadow-soft);cursor:pointer;border-radius:16px;padding:1.5rem;transition:all .25s}.deviceCard:hover{box-shadow:var(--shadow-hover);border-color:#7c3aed33;transform:translateY(-3px)}.activeCard{border-color:var(--primary)!important;box-shadow:0 10px 30px #7c3aed1a!important}.deviceCardHeader{border-bottom:1px solid #7c3aed0d;align-items:center;gap:1rem;margin-bottom:1.25rem;padding-bottom:.75rem;display:flex}.deviceIcon{font-size:24px}.deviceInfoBrief{flex:1}.deviceInfoBrief h4{color:var(--text-primary);margin:0 0 .25rem;font-size:15px;font-weight:800}.deviceMac{color:var(--text-dim);font-size:11px}.statusDot{border-radius:50%;width:10px;height:10px}.statusDot.online{background-color:var(--success);box-shadow:0 0 10px #10b98166}.statusDot.offline{background-color:var(--error)}.deviceMetrics{flex-direction:column;gap:.65rem;display:flex}.metricRow{justify-content:space-between;align-items:center;font-size:13px;display:flex}.metricLabel{color:var(--text-secondary);font-weight:500}.metricValue{color:var(--text-primary);font-weight:700}.metricBarContainer{align-items:center;gap:.5rem;width:150px;display:flex}.metricBar{background:var(--primary);border-radius:3px;height:6px;transition:width .3s}.metricText{color:var(--text-primary);font-size:11px;font-weight:700}.activeClientsCount{background:var(--primary-light);color:var(--primary);border-radius:6px;padding:.15rem .5rem;font-size:11px;font-weight:700}.deviceOfflineState{text-align:center;padding:1.5rem 0}.lastSeenText{color:var(--text-dim);margin-top:.5rem;font-size:11px;display:block}.table{border-collapse:collapse;width:100%}.table th{text-align:right;color:var(--text-dim);border-bottom:1px solid var(--border-color);text-transform:uppercase;padding:1rem 1.25rem;font-size:12px;font-weight:700}.table td{color:var(--text-primary);border-bottom:1px solid #7c3aed08;padding:1.15rem 1.25rem;font-size:14px}.table tr:hover td{background:var(--primary-light)}.mono{font-family:Courier New,Courier,monospace;font-weight:700}.dim{color:var(--text-secondary)}.badge{border:1px solid #0000;border-radius:8px;padding:.35rem .65rem;font-size:11px;font-weight:700;display:inline-block}.badgeSuccess{background:var(--success-light);color:var(--success);border-color:#10b9811a}.badgeError{background:var(--error-light);color:var(--error);border-color:#ef44441a}.badgeWarning{background:var(--warning-light);color:var(--warning);border-color:#f59e0b1a}.badgeBrand{background:var(--primary-light);color:var(--primary);border:1px solid #7c3aed26;border-radius:8px;padding:.35rem .65rem;font-size:11px;font-weight:700}.primaryBtn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:.65rem 1.25rem;font-size:13px;font-weight:700;transition:all .2s;box-shadow:0 4px 12px #7c3aed33}.primaryBtn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 15px #7c3aed4d}.successBtn{background:var(--success-light);color:var(--success);cursor:pointer;border:1px solid #10b98133;border-radius:8px;padding:.45rem .85rem;font-size:12px;font-weight:700}.dangerBtn{background:var(--error-light);color:var(--error);cursor:pointer;border:1px solid #ef444433;border-radius:8px;padding:.45rem .85rem;font-size:12px;font-weight:700}.terminalBtn{color:var(--primary);cursor:pointer;background:#fbfbfe;border:1px solid #7c3aed40;border-radius:8px;align-items:center;padding:.45rem .85rem;font-size:12px;font-weight:700;display:inline-flex;box-shadow:0 2px 6px #7c3aed05}.terminalBtn:disabled{opacity:.5;cursor:not-allowed;color:var(--text-dim);border-color:var(--border-color)}.modalOverlay{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100;background:#1d193366;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modalContent{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;width:520px;max-width:90vw;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px -12px #7c3aed26}.modalHeader{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1.5rem 2rem;display:flex}.modalHeader h3{color:var(--text-primary);margin:0;font-size:18px;font-weight:800}.closeBtn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;font-size:24px}.modalBody{padding:2rem}.modalFooter{border-top:1px solid var(--border-color);justify-content:flex-end;gap:1rem;padding:1.5rem 2rem;display:flex}.secondaryBtn{background:var(--bg-primary);color:var(--text-secondary);border:1px solid var(--border-color);cursor:pointer;border-radius:10px;padding:.65rem 1.25rem;font-size:13px;font-weight:700}.formGroup{margin-bottom:1.25rem}.formGroup label{color:var(--text-secondary);margin-bottom:.5rem;font-size:13px;font-weight:600;display:block}.input{background:var(--bg-primary);border:1px solid var(--border-color);width:100%;color:var(--text-primary);border-radius:10px;outline:none;padding:.75rem 1rem;font-size:14px;transition:all .2s}.input:focus{border-color:var(--primary);background:var(--bg-secondary)}.grid2{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}.tabsContainer{border-bottom:1px solid var(--border-color);gap:1rem;margin-bottom:2rem;display:flex}.tabBtn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-bottom:3px solid #0000;padding:1rem 1.5rem;font-size:14px;font-weight:700;transition:all .25s}.tabBtn.active{color:var(--primary);border-bottom-color:var(--primary)}.switch{width:46px;height:24px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#e4e4e7;border:1px solid #7c3aed0d;transition:all .4s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;width:18px;height:18px;transition:all .4s;position:absolute;bottom:2px;left:3px;box-shadow:0 2px 6px #0000001a}input:checked+.slider{background-color:var(--primary)}input:checked+.slider:before{transform:translate(22px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.drawerOverlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:90;background:#1d193359;justify-content:flex-start;display:flex;position:fixed;inset:0}.drawerContent{background:var(--bg-secondary);border-right:1px solid var(--border-color);width:460px;max-width:95vw;height:100vh;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);flex-direction:column;animation:.3s ease-out slideIn;display:flex;box-shadow:25px 0 50px -12px #7c3aed1f}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}.drawerHeader{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1.85rem;display:flex}.drawerHeader h3{color:var(--text-primary);margin:0 0 .25rem;font-size:18px;font-weight:800}.closeDrawerBtn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;font-size:28px}.drawerBody{flex:1;padding:1.85rem;overflow-y:auto}.drawerSection{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem}.drawerSection h4{color:var(--text-primary);border-bottom:2px solid #7c3aed14;margin:0 0 1.25rem;padding-bottom:.5rem;font-size:14px;font-weight:800}.drawerStatsGrid{grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem;display:grid}.drawerStatItem{flex-direction:column;gap:.25rem;display:flex}.drawerStatLabel{color:var(--text-dim);font-size:11px;font-weight:700}.drawerStatValue{color:var(--text-primary);font-size:13px;font-weight:700}.drawerMetricProgress{margin-top:.75rem}.progressLabel{color:var(--text-secondary);justify-content:space-between;margin-bottom:.35rem;font-size:12px;font-weight:600;display:flex}.progressBarBg{background:#e4e4e7;border-radius:4px;height:8px;overflow:hidden}.progressBarFill{border-radius:4px;height:100%}.drawerClientsHeader{border-bottom:2px solid #7c3aed14;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.5rem;display:flex}.drawerClientsHeader h4{border:none;margin:0;padding:0}.clientsBadge{background:var(--primary-light);color:var(--primary);border-radius:8px;padding:.15rem .65rem;font-size:12px;font-weight:700}.clientsList{flex-direction:column;gap:1.25rem;display:flex}.clientItemCard{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:14px;padding:1.25rem;transition:all .2s;box-shadow:0 4px 15px #7c3aed03}.clientItemCard:hover{box-shadow:var(--shadow-soft)}.clientPaused{background-color:var(--error-light)!important;border-color:#ef444433!important}.clientMainInfo{align-items:flex-start;gap:.75rem;margin-bottom:1.15rem;display:flex}.clientIcon{font-size:20px}.clientDetails{flex-direction:column;gap:.15rem;display:flex}.clientIp{color:var(--text-primary);font-size:14px;font-weight:700}.clientMac{font-size:11px}.clientActions{border-top:1px solid #7c3aed0d;padding-top:1rem}.clientActionRow{justify-content:space-between;align-items:center;display:flex}.actionLabel{color:var(--text-secondary);font-size:12px;font-weight:700}.speedSliderLabel{justify-content:space-between;margin-bottom:.5rem;display:flex}.speedValue{color:var(--primary);font-size:12px;font-weight:700}.speedRangeSlider{width:100%;accent-color:var(--primary);background:#e4e4e7;border-radius:3px;outline:none;height:6px}.settingsLayoutContainer{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);gap:2rem;display:flex;background:var(--bg-secondary)!important}.settingsSubSidebar{border-left:1px solid var(--border-color);flex-direction:column;gap:.5rem;width:250px;padding-left:1.5rem;display:flex}.subTabBtn{color:var(--text-secondary);cursor:pointer;text-align:right;background:0 0;border:none;border-radius:10px;align-items:center;gap:.75rem;padding:.85rem 1.15rem;font-size:13px;font-weight:700;transition:all .25s;display:flex}.subTabBtn:hover{background:var(--primary-light);color:var(--primary)}.subTabBtn.active{background:var(--primary-light);color:var(--primary);box-shadow:inset 0 0 0 1px #7c3aed26}.settingsSubContent{flex:1}.settingsInnerSection h3{color:var(--text-primary);margin-bottom:.25rem;font-size:18px;font-weight:800}.innerPanel{border:1px solid #7c3aed0f;border-radius:12px;margin-top:1rem;padding:1.5rem;background:#7c3aed03!important}.proactiveAlertsPanel{background:#ef44440d;border:1px solid #ef444426;border-radius:16px;margin-bottom:2rem;padding:1.5rem;animation:3s infinite alternate borderPulse;box-shadow:0 10px 30px #ef444405}@keyframes borderPulse{0%{border-color:#ef444426}to{border-color:#ef444466}}.alertPanelHeader{align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.alertPanelHeader h4{color:var(--error);margin:0;font-size:15px;font-weight:800}.alertPulse{background-color:var(--error);border-radius:50%;width:10px;height:10px;animation:1.5s infinite redPulse}@keyframes redPulse{0%{box-shadow:0 0 #ef444499}70%{box-shadow:0 0 0 8px #ef444400}to{box-shadow:0 0 #ef444400}}.alertItemsList{flex-direction:column;gap:.75rem;display:flex}.alertItemCardRow{background:#fff;border:1px solid #ef444414;border-radius:10px;justify-content:space-between;align-items:center;padding:.85rem 1.25rem;display:flex}.alertMeta{align-items:center;gap:1rem;display:flex}.alertDurationBadge{background:var(--error-light);color:var(--error);border-radius:6px;padding:.25rem .65rem;font-size:11px;font-weight:700}.alertActionBtn{background:var(--error);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:.4rem 1rem;font-size:12px;font-weight:700;transition:background .2s}.alertActionBtn:hover{background:#dc2626}.drawerContent{-webkit-backdrop-filter:blur(24px)!important;backdrop-filter:blur(24px)!important;background:#ffffffbf!important;border-right:1px solid #7c3aed1a!important;box-shadow:10px 0 50px #7c3aed0d!important}.inlineForm{align-items:center;gap:1rem;display:flex}.macPoolTableContainer{max-height:400px;margin-top:1.5rem;overflow-y:auto}.clientPaused{opacity:.7;background:#ef444405!important;border-color:#ef444433!important}.clientPinTag{color:var(--primary);background:#7c3aed0d;border-radius:4px;align-self:flex-start;margin-top:.25rem;padding:.15rem .4rem;font-size:11px;font-weight:700;display:inline-block}.sidebar{transition:width .3s cubic-bezier(.4,0,.2,1)}.sidebar.collapsed{width:80px}.sidebar.collapsed .sidebarHeader{padding:1.5rem .5rem}.sidebar.collapsed .navItem span,.sidebar.collapsed .mqttStatus{display:none}.navItem{transition:all .2s cubic-bezier(.4,0,.2,1)}.navItem.activeParent{background-color:var(--primary-light);color:var(--primary);box-shadow:inset 0 0 0 1px #7c3aed1f}.navSubItem{width:100%;transition:all .2s;display:block}.navSubItem:hover{color:var(--primary)!important;background-color:#7c3aed0d!important}.navSubItem.activeSub{font-weight:700;background-color:var(--primary-light)!important;color:var(--primary)!important}.hamburgerBtn{transition:all .2s}.hamburgerBtn:hover{transform:scale(1.1);color:#ff009d!important}.shortcutBtn{transition:all .2s}.shortcutBtn:hover{transform:translateY(-1px);color:#ff009d!important;background-color:#ff009d14!important;border-color:#ff009d4d!important}:root{--magenta:#ff009d;--magenta-hover:#e0008b;--magenta-light:#ff009d14}.sidebarHeader .logoIcon{background:linear-gradient(135deg, var(--magenta), var(--primary))!important;box-shadow:0 4px 15px #ff009d4d!important}.topbar{border-bottom:1px solid var(--border-color);position:relative}.topbar:after{content:"";opacity:.6;background:linear-gradient(90deg,#0000,#ff009d,#7c3aed,#0000);height:1px;position:absolute;bottom:-1px;left:0;right:0}.grid3{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.chartSvg{overflow:visible}.chartPointGroup circle{transition:r .2s}.chartPointGroup:hover circle{r:7}.dashboardMainGrid{margin-top:1rem}@media (width<=1024px){.dashboardMainGrid{grid-template-columns:1fr!important}}.sidebar{background:linear-gradient(#140f2d 0%,#220c3a 60%,#4a0031 100%)!important;border-left:1px solid #ff009d40!important;box-shadow:-4px 0 30px #ff009d1f!important}.topbar{background:linear-gradient(90deg,#140f2d 0%,#200c37 100%)!important;border-bottom:1px solid #ff009d40!important}.topbar:after{opacity:.8!important;background:linear-gradient(90deg,#0000,#ff009d,#7c3aed,#0000)!important}.sidebar .brandTitle{color:#fff!important}.sidebar .brandSub{color:#ff9ed6!important}.sidebar .navItem{color:#d8d3ec!important}.sidebar .navItem:hover{color:#fff!important;background:linear-gradient(90deg,#ff009d26 0%,#7c3aed0d 100%)!important}.sidebar .navItem.active{color:#fff!important;background:linear-gradient(90deg,#ff009d40 0%,#7c3aed1a 100%)!important;border-right:3px solid #ff009d!important;box-shadow:inset 0 0 0 1px #ff009d59!important}.sidebar .navItem.activeParent{color:#fff!important;background:#ff009d1f!important;box-shadow:inset 0 0 0 1px #ff009d40!important}.topbar .pageTitle,.topbar .hamburgerBtn{color:#fff!important}.topbar .searchInput{color:#fff!important;background:#ffffff14!important;border-color:#ff009d40!important}.topbar .searchInput::placeholder{color:#a49fc4!important}.topbar .searchInput:focus{background:#ffffff1f!important;border-color:#ff009d!important;box-shadow:0 0 15px #ff009d1a!important}.topbar .searchIcon{color:#a49fc4!important}.topbar .adminProfileWidget span{color:#fff!important}.topbar .adminProfileWidget .dim{color:#ff9ed6!important}.topbar .shortcutBtn{color:#d8d3ec!important;background:#ffffff14!important;border:1px solid #ff009d33!important}.topbar .shortcutBtn:hover{color:#fff!important;background:#ff009d26!important;border-color:#ff009d!important}