*{margin:0;padding:0;box-sizing:border-box}:root{--bg:#0b111e;--surface:#141c2b;--surface-2:#151f30;--surface-3:#1a2537;--surface-4:#0f1724;--border:#1f2d3f;--border-2:#2a3a4e;--text:#f0f4fa;--text-2:#d0dbe8;--text-3:#889bb0;--text-4:#6a7f96;--text-5:#4a5f78;--primary:#3b82f6;--primary-dark:#2563eb;--success:#22c55e;--warning:#eab308;--danger:#dc2626}body{font-family:Vazirmatn,Tahoma,sans-serif;background:var(--bg);color:var(--text-2);min-height:100vh;line-height:1.6}button{font-family:inherit;cursor:pointer;border:none;background:0 0}input,select{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px}.login-overlay{position:fixed;inset:0;background:radial-gradient(circle at 30% 20%,#1a2537 0,#0b111e 70%);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000}.login-overlay.hidden{display:none}.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border-2);border-radius:20px;padding:32px 26px;box-shadow:0 20px 60px rgba(0,0,0,.6)}.login-logo{width:60px;height:60px;margin:0 auto 18px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 8px 24px rgba(59,130,246,.35)}.login-card h1{text-align:center;color:var(--text);font-size:18px;font-weight:700;margin-bottom:4px}.login-card .sub{text-align:center;color:var(--text-4);font-size:12px;margin-bottom:26px}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:12px;color:var(--text-3);margin-bottom:6px;font-weight:500}.form-group input{width:100%;padding:13px 14px;background:var(--surface-4);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:15px;transition:.2s}.form-group input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.15)}.login-error{color:var(--danger);font-size:12px;text-align:center;min-height:18px;margin-bottom:12px}.btn-primary{padding:13px 0;background:linear-gradient(135deg,var(--primary-dark),var(--primary));border-radius:10px;font-size:14px;font-weight:600;transition:.2s}.btn-primary:hover:not(:disabled){transform:translateY(-1px)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.app{display:none;min-height:100vh;flex-direction:column}.app.active{display:flex}.app-header{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:50}.brand{display:flex;align-items:center;gap:10px}.brand .logo{width:36px;height:36px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 12px rgba(59,130,246,.3)}.brand-title h1{font-size:15px;color:var(--text)}.brand-title small{display:block;font-size:10px;color:var(--text-4)}.user-menu{margin-right:auto;display:flex;align-items:center;gap:10px}.user-badge{display:flex;align-items:center;gap:8px;background:var(--surface-3);border:1px solid var(--border-2);padding:6px 12px;border-radius:10px;font-size:12px}.user-badge .role{font-size:10px;color:var(--primary);background:rgba(59,130,246,.15);padding:1px 6px;border-radius:6px}.btn-logout{background:0 0;border:1px solid var(--border-2);color:var(--danger);padding:8px 14px;border-radius:10px;font-size:12px;transition:.2s}.btn-logout:hover{background:rgba(220,38,38,.1);border-color:var(--danger)}.header-icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-3);border:1px solid var(--border-2);border-radius:10px;font-size:16px;cursor:pointer;transition:.15s;padding:0;color:var(--text-2)}.header-icon-btn:hover{background:var(--surface-4);border-color:var(--primary);transform:scale(1.05)}.admin-link-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);border:1px solid var(--border-2);border-radius:10px;font-size:18px;cursor:pointer;transition:.2s;padding:0}.admin-link-btn:hover{background:rgba(234,179,8,.15);border-color:#eab308;transform:scale(1.05);box-shadow:0 4px 12px rgba(234,179,8,.3)}.admin-link-btn:active{transform:scale(.95)}.tabs{background:var(--surface);border-bottom:1px solid var(--border);padding:0 20px;display:flex;gap:4px;overflow-x:auto}.tab{padding:14px 16px;font-size:13px;color:var(--text-4);font-weight:500;border-bottom:2px solid transparent;transition:.2s;white-space:nowrap}.tab:hover{color:var(--text-2)}.tab.active{color:var(--primary);border-bottom-color:var(--primary)}.app-content{flex:1;padding:24px;max-width:1200px;width:100%;margin:0 auto}.tab-panel{display:none}.tab-panel.active{display:block}.header-factory{flex:1;max-width:320px;margin:0 12px;position:relative}.header-factory.single .factory-btn{cursor:default}.header-factory.single .factory-btn .chevron{display:none}.header-factory.no-factories .factory-btn{opacity:.6;cursor:default}.factory-btn{display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-end;background:var(--surface-3);border:1px solid var(--border-2);padding:8px 14px;border-radius:10px;color:var(--text-2);font-size:13px;transition:.2s;min-height:40px}.factory-btn:hover{border-color:var(--primary)}.factory-btn .icon{color:var(--primary);font-size:15px}.factory-btn .name{flex:1;text-align:right;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.factory-btn .chevron{font-size:10px;color:var(--text-4);transition:transform .2s}.header-factory.open .factory-btn .chevron{transform:rotate(180deg)}.factory-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:260px;background:var(--surface);border:1px solid var(--border-2);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.6);z-index:200;max-height:340px;overflow-y:auto;padding:6px}.header-factory.open .factory-dropdown{display:block}.factory-option{padding:10px 12px;cursor:pointer;font-size:13px;border-radius:8px;transition:background .15s;display:flex;align-items:center;gap:8px}.factory-option:hover{background:var(--surface-3)}.factory-option.active{background:rgba(59,130,246,.15);color:var(--primary)}.factory-option .opt-icon{font-size:14px}.factory-option .opt-city{margin-right:auto;font-size:10px;color:var(--text-4)}.dash-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:linear-gradient(135deg,var(--surface-2) 0,var(--surface-3) 100%);border:1px solid var(--border);border-radius:18px;margin-bottom:20px;flex-wrap:wrap;box-shadow:0 2px 12px rgba(0,0,0,.1)}.dash-hero-main{display:flex;align-items:center;gap:14px;min-width:0;flex:1}.dash-hero-icon{width:52px;height:52px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 6px 20px rgba(59,130,246,.35);flex-shrink:0}.dash-hero-info{min-width:0}.dash-hero-info h2{font-size:17px;color:var(--text);margin:0 0 3px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dash-hero-info small{font-size:11px;color:var(--text-4)}.dash-hero-stats{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}.hero-stat{display:flex;align-items:center;gap:8px;padding:7px 12px;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:11px;min-width:88px;transition:.2s;backdrop-filter:blur(4px)}.hero-stat:hover{border-color:var(--border-2);transform:translateY(-1px)}.hero-stat-icon{font-size:16px;line-height:1;flex-shrink:0}.hero-stat-content{display:flex;flex-direction:column;gap:1px;min-width:0}.hero-stat-value{font-size:15px;font-weight:700;color:var(--text);line-height:1;direction:ltr}.hero-stat-label{font-size:9px;color:var(--text-4);line-height:1;white-space:nowrap}.hero-stat.has-alarm{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.45);animation:2s infinite pulse-alarm-bg}.hero-stat.has-alarm .hero-stat-value{color:var(--danger)}.hero-stat.has-alarm .hero-stat-label{color:rgba(239,68,68,.8)}@keyframes pulse-alarm-bg{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.3)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}.dash-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:8px}.dash-section-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text)}.dst-icon{font-size:16px}.dst-count{background:var(--surface-3);color:var(--text-3);font-size:11px;padding:2px 10px;border-radius:10px;font-weight:600;direction:ltr}.salon-cards-v2{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}.salon-card-v2{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;transition:.25s cubic-bezier(.4, 0, .2, 1);position:relative}.salon-card-v2:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 12px 32px rgba(59,130,246,.2)}.salon-card-v2.has-alarm{border-color:rgba(220,38,38,.35)}.salon-card-v2.has-alarm:hover{border-color:var(--danger);box-shadow:0 12px 32px rgba(220,38,38,.2)}.salon-card-topbar{height:4px;background:linear-gradient(90deg,#3b82f6,#60a5fa);transition:.3s}.salon-card-v2.has-alarm .salon-card-topbar{background:linear-gradient(90deg,#dc2626,#ef4444);animation:2s infinite pulse-bar}.salon-card-body{padding:20px 16px 16px;text-align:center}.salon-card-icon{width:54px;height:54px;margin:0 auto 12px;background:var(--surface-3);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;transition:.3s;box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}.salon-card-v2:hover .salon-card-icon{background:rgba(59,130,246,.15);transform:scale(1.08) rotate(-3deg)}.salon-card-v2.has-alarm .salon-card-icon{background:rgba(220,38,38,.15)}.salon-card-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.salon-card-desc{font-size:11px;color:var(--text-4);margin-bottom:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:16px}.salon-card-stats{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.sstat{display:inline-flex;align-items:center;gap:4px;background:var(--surface-3);padding:5px 10px;border-radius:10px;font-size:11px;color:var(--text-3);transition:.2s}.salon-card-v2:hover .sstat{background:rgba(59,130,246,.08)}.sstat-icon{font-size:12px;line-height:1}.sstat-num{font-weight:700;color:var(--text);direction:ltr}.sstat.sstat-alarm{background:rgba(220,38,38,.15);color:var(--danger)}.sstat.sstat-alarm .sstat-num{color:var(--danger)}.salon-card-actions{position:absolute;top:10px;left:10px;display:flex;gap:4px;opacity:0;transition:opacity .2s}.salon-card-v2:hover .salon-card-actions{opacity:1}.salon-act-btn{width:28px;height:28px;border-radius:6px;background:var(--surface);border:1px solid var(--border);color:var(--text-3);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;transition:.15s;box-shadow:0 2px 6px rgba(0,0,0,.2)}.salon-act-btn:hover{color:var(--primary);border-color:var(--primary);background:rgba(59,130,246,.1);transform:scale(1.1)}.salon-act-btn.danger:hover{color:var(--danger);border-color:var(--danger);background:rgba(220,38,38,.1)}.salon-card-v2.has-alarm.salon-severity-warning{border-color:rgba(234,88,12,.4)}.salon-card-v2.has-alarm.salon-severity-warning:hover{border-color:#ea580c;box-shadow:0 12px 32px rgba(234,88,12,.2)}.salon-card-v2.has-alarm.salon-severity-warning .salon-card-topbar{background:linear-gradient(90deg,#ea580c,#f97316);animation:none}.salon-card-v2.has-alarm.salon-severity-warning .salon-card-icon{background:rgba(234,88,12,.15)}.salon-card-v2.has-alarm.salon-severity-warning .sstat.sstat-alarm{background:rgba(234,88,12,.15);color:#ea580c}.salon-card-v2.has-alarm.salon-severity-warning .sstat.sstat-alarm .sstat-num{color:#ea580c}.settings-tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--border)}.stab{padding:10px 16px;font-size:13px;color:var(--text-4);border-bottom:2px solid transparent;transition:.2s}.stab:hover{color:var(--text-2)}.stab.active{color:var(--primary);border-bottom-color:var(--primary)}.sub-panel{display:none}.sub-panel.active{display:block}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-header h2{font-size:16px;color:var(--text)}.btn{padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:.2s}.btn-primary{width:auto;background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;box-shadow:0 4px 14px rgba(59,130,246,.3)}.btn-ghost{background:0 0;color:var(--text-3);border:1px solid var(--border)}.btn-ghost:hover{border-color:var(--border-2);color:var(--text-2)}.btn-secondary{background:var(--surface-3);color:var(--text-2);border:1px solid var(--border-2)}.btn-danger{background:var(--danger);color:#fff}.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}.list{display:flex;flex-direction:column;gap:10px}.list-item{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;align-items:center;gap:14px;transition:.2s}.list-item:hover{border-color:var(--border-2)}.list-item.inactive{opacity:.55}.list-item .item-icon{width:44px;height:44px;background:var(--surface-3);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}.list-item .item-body{flex:1;min-width:0}.list-item .item-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px}.list-item .item-sub{font-size:11px;color:var(--text-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-item .item-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.tag{font-size:10px;padding:2px 8px;background:var(--surface-3);border:1px solid var(--border);border-radius:10px;color:var(--text-3)}.tag.primary{color:var(--primary);border-color:rgba(59,130,246,.4)}.tag.success{color:var(--success);border-color:rgba(34,197,94,.4)}.tag.danger{color:var(--danger);border-color:rgba(220,38,38,.4)}.tag.warning{color:var(--warning);border-color:rgba(234,179,8,.4)}.list-item .item-actions{display:flex;gap:6px;flex-shrink:0}.icon-btn{width:36px;height:36px;border-radius:8px;background:var(--surface-3);border:1px solid var(--border);color:var(--text-3);display:flex;align-items:center;justify-content:center;font-size:15px;transition:.2s}.icon-btn:hover{color:var(--primary);border-color:var(--primary)}.icon-btn.danger:hover{color:var(--danger);border-color:var(--danger)}.empty-state{text-align:center;padding:50px 20px;color:var(--text-4)}.empty-state .ico{font-size:44px;opacity:.3;margin-bottom:12px}.empty-state .msg{font-size:13px}.empty-state .sub{font-size:11px;margin-top:6px;color:var(--text-5)}.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}.modal-backdrop.active{display:flex}.modal{background:var(--surface);border:1px solid var(--border-2);border-radius:20px;width:100%;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.8);animation:.25s modalIn}@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.modal-header h3{font-size:15px;color:var(--text)}.modal-close{width:40px;height:40px;border-radius:10px;color:var(--text-3);font-size:24px;display:flex;align-items:center;justify-content:center;transition:.2s}.modal-close:hover{background:var(--surface-3);color:var(--danger)}.modal-body{padding:20px;overflow-y:auto;flex:1}.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}.field{margin-bottom:14px}.field label{display:block;font-size:12px;color:var(--text-3);margin-bottom:6px;font-weight:500}.field input[type=password],.field input[type=text],.field select{width:100%;padding:12px 14px;background:var(--surface-4);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;transition:.2s}.field input:focus,.field select:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.15)}.field .hint{font-size:10px;color:var(--text-5);margin-top:4px}.checkbox-list{background:var(--surface-4);border:1px solid var(--border);border-radius:10px;padding:10px;max-height:200px;overflow-y:auto}.checkbox-list:empty::before{content:'کارخانه‌ای موجود نیست';display:block;text-align:center;color:var(--text-5);font-size:12px;padding:10px}.checkbox-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .15s;font-size:13px}.checkbox-item:hover{background:var(--surface-3)}.checkbox-item input{accent-color:var(--primary)}.checkbox-label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}.checkbox-label input{accent-color:var(--primary)}.toast-container{position:fixed;bottom:20px;left:20px;z-index:500;display:flex;flex-direction:column;gap:8px}.toast{background:var(--surface);border:1px solid var(--border-2);border-radius:12px;padding:12px 16px;color:var(--text-2);font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.5);display:flex;align-items:center;gap:10px;min-width:260px;animation:.3s toastIn}.toast.success{border-right:3px solid var(--success)}.toast.error{border-right:3px solid var(--danger)}.toast.warning{border-right:3px solid var(--warning)}.toast.info{border-right:3px solid var(--primary)}@keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.dev-section-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 2px 8px;font-size:13px;font-weight:600;color:var(--text-2)}.btn-mini{padding:5px 12px;font-size:11px;font-weight:600;border-radius:8px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.35);color:var(--primary);cursor:pointer;transition:.15s;font-family:inherit}.btn-mini:hover{background:rgba(59,130,246,.2);border-color:var(--primary)}.dev-list{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}.dev-empty{padding:14px;text-align:center;font-size:11px;color:var(--text-4);background:var(--surface-4);border:1px dashed var(--border-2);border-radius:10px}.dev-row{display:grid;grid-template-columns:130px 1fr 128px 32px;gap:6px;align-items:center;padding:8px;background:var(--surface-4);border:1px solid var(--border);border-radius:10px;transition:border-color .15s}.dev-row:hover{border-color:var(--border-2)}.dev-row.dev-existing{background:var(--surface-3);border-color:rgba(34,197,94,.25)}.dev-row.dev-new{border-color:rgba(59,130,246,.25)}.dev-row .name-input,.dev-row select{width:100%;padding:7px 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;font-family:inherit;min-width:0}.dev-row .name-input:focus,.dev-row select:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.15)}.dev-row select:disabled{opacity:.7;cursor:not-allowed}.dev-row .dev-remove{width:32px;height:32px;border-radius:8px;background:0 0;border:1px solid var(--border);color:var(--text-4);font-size:18px;line-height:1;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit}.dev-row .dev-remove:hover{background:rgba(220,38,38,.1);border-color:var(--danger);color:var(--danger)}.dev-row .hw-wrap{flex:0 0 auto;width:128px}@media (max-width:600px){.dev-row{grid-template-columns:1fr 1fr;grid-template-areas:"type type" "name name" "hw remove"}.dev-row>select{grid-area:type}.dev-row>.name-input{grid-area:name}.dev-row>.hw-wrap{grid-area:hw;width:auto}.dev-row>.dev-remove{grid-area:remove;justify-self:end}}.salon-filter{display:flex;gap:5px;flex-wrap:wrap;align-items:center}.salon-filter .chip{padding:6px 12px;background:var(--surface-4);border:1px solid var(--border);border-radius:20px;color:var(--text-3);font-size:11px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap;user-select:none}.salon-filter .chip:hover{background:var(--surface-3);border-color:var(--border-2);color:var(--text-2)}.salon-filter .chip.active{background:rgba(59,130,246,.15);border-color:var(--primary);color:var(--primary)}.value-flash{animation:.6s value-flash}@keyframes value-flash{0%,100%{transform:scale(1)}30%{transform:scale(1.08)}}.sensor-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.sensor-card{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:16px;cursor:pointer;transition:.2s;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px}.sensor-card::before{content:'';position:absolute;top:0;right:0;left:0;height:3px;background:var(--success);transition:background .3s}.sensor-card.state-alarm::before{background:var(--danger)}.sensor-card.state-offline::before{background:var(--text-5)}.sensor-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 24px rgba(59,130,246,.15)}.sc-top{display:flex;align-items:center;gap:10px}.sc-icon-wrap{width:42px;height:42px;border-radius:12px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sc-icon{font-size:22px}.sc-titles{flex:1;min-width:0}.sc-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sc-salon{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-4);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sc-hwid-mini{font-family:'Courier New',monospace;font-weight:700;color:var(--text-3);direction:ltr;font-size:10px}.sc-sep{color:var(--text-5);font-size:10px;line-height:1;flex-shrink:0}.sc-salon-name{color:var(--text-4);font-size:10px;overflow:hidden;text-overflow:ellipsis}.sc-state-dot{width:10px;height:10px;border-radius:50%;background:var(--success);box-shadow:0 0 8px rgba(34,197,94,.5);flex-shrink:0}.sensor-card.state-alarm .sc-state-dot{background:var(--danger);box-shadow:0 0 8px rgba(220,38,38,.5);animation:1.5s infinite pulse-dot}.sensor-card.state-offline .sc-state-dot{background:var(--text-5)}.sc-value-wrap{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}.sc-value{font-size:34px;font-weight:700;color:var(--text);direction:ltr;line-height:1;letter-spacing:-.5px;display:flex;align-items:baseline;gap:4px}.sc-unit{font-size:14px;font-weight:500;color:var(--text-4)}.sc-trend-icon{font-size:14px;opacity:.5}.sc-footer{display:flex;justify-content:flex-end;align-items:center;gap:6px;font-size:10px;color:var(--text-4);margin-top:4px}.sc-footer .sc-time{white-space:nowrap}.sensor-card.state-normal::before{background:#22c55e}.sensor-card.state-warning_low::before{background:#0891b2}.sensor-card.state-warning_high::before{background:#ea580c}.sensor-card.state-critical_low::before{background:#1e40af;animation:1.5s infinite pulse-bar}.sensor-card.state-critical_high::before{background:#dc2626;animation:1.5s infinite pulse-bar}.sensor-card.state-offline::before{background:#6a7f96}.sensor-card.state-normal .sc-state-dot{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5)}.sensor-card.state-warning_low .sc-state-dot{background:#0891b2;box-shadow:0 0 8px rgba(8,145,178,.5)}.sensor-card.state-warning_high .sc-state-dot{background:#ea580c;box-shadow:0 0 8px rgba(234,88,12,.5)}.sensor-card.state-critical_low .sc-state-dot{background:#1e40af;box-shadow:0 0 10px rgba(30,64,175,.6);animation:1.5s infinite pulse-dot}.sensor-card.state-critical_high .sc-state-dot{background:#dc2626;box-shadow:0 0 10px rgba(220,38,38,.6);animation:1.5s infinite pulse-dot}.sensor-card.state-offline .sc-state-dot{background:#6a7f96;box-shadow:none}.sensor-card.state-warning_low{border-color:rgba(8,145,178,.4);background:linear-gradient(135deg,var(--surface-2),rgba(8,145,178,.05))}.sensor-card.state-warning_high{border-color:rgba(234,88,12,.4);background:linear-gradient(135deg,var(--surface-2),rgba(234,88,12,.05))}.sensor-card.state-critical_low{border-color:rgba(30,64,175,.5);background:linear-gradient(135deg,var(--surface-2),rgba(30,64,175,.08))}.sensor-card.state-critical_high{border-color:rgba(220,38,38,.5);background:linear-gradient(135deg,var(--surface-2),rgba(220,38,38,.08))}.sensor-card.state-offline{opacity:.75}.sensor-card.state-warning_low .sc-value{color:#67e8f9}.sensor-card.state-warning_high .sc-value{color:#fdba74}.sensor-card.state-critical_low .sc-value{color:#93c5fd}.sensor-card.state-critical_high .sc-value{color:#f87171}.sensor-card.state-offline .sc-value{color:var(--text-4)}.sensor-card.state-critical_low .sc-icon-wrap{background:rgba(30,64,175,.2)}.sensor-card.state-critical_high .sc-icon-wrap{background:rgba(220,38,38,.2)}.sensor-card.state-warning_low .sc-icon-wrap{background:rgba(8,145,178,.15)}.sensor-card.state-warning_high .sc-icon-wrap{background:rgba(234,88,12,.15)}@keyframes pulse-bar{50%{opacity:.5;opacity:.4}0%,100%{opacity:1}}@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.relay-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.relay-card-modern{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:16px;transition:.3s;position:relative;overflow:hidden;cursor:pointer}.relay-card-modern::before{content:'';position:absolute;top:0;right:0;left:0;height:3px;background:var(--danger);transition:background .3s}.relay-card-modern.state-on::before{background:var(--success)}.relay-card-modern.state-on{background:linear-gradient(135deg,var(--surface-2),rgba(34,197,94,.05))}.rc-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}.rc-icon-wrap{width:42px;height:42px;border-radius:12px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.3s}.relay-card-modern.state-on .rc-icon-wrap{background:rgba(34,197,94,.15)}.rc-icon{font-size:22px}.rc-titles{flex:1;min-width:0}.rc-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rc-salon{font-size:10px;color:var(--text-4);margin-top:2px}.rc-dot{width:14px;height:14px;border-radius:50%;background:var(--danger);box-shadow:0 0 12px rgba(220,38,38,.5);flex-shrink:0;transition:.3s}.relay-card-modern.state-on .rc-dot{background:var(--success);box-shadow:0 0 12px rgba(34,197,94,.5)}.rc-state-wrap{margin-bottom:14px;padding:10px 12px;background:var(--surface-4);border-radius:10px;text-align:center}.rc-state-label{font-size:10px;color:var(--text-3);margin-bottom:4px;font-weight:500}.rc-state-text{display:flex;justify-content:center}.rc-state-badge{font-size:14px;font-weight:700;padding:4px 16px;border-radius:20px;background:rgba(220,38,38,.15);color:var(--danger);transition:.3s}.relay-card-modern.state-on .rc-state-badge{background:rgba(34,197,94,.15);color:var(--success)}.rc-actions{display:flex;gap:8px}.rc-btn{flex:1;padding:10px 0;border-radius:10px;font-size:13px;font-weight:600;color:#fff;transition:.15s;display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;cursor:pointer;border:none}.rc-btn:disabled{opacity:.5;cursor:not-allowed}.rc-btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)}.rc-btn-on{background:linear-gradient(135deg,#16a34a,#22c55e)}.rc-btn-on.btn-on-light{background:linear-gradient(135deg,#a16207,#eab308)}.rc-btn-off{background:linear-gradient(135deg,#b91c1c,#dc2626)}.rc-chain{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);padding:10px 18px;border-radius:10px;font-size:12px;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 1px var(--border-2);white-space:nowrap;display:none;min-width:160px;text-align:center;backdrop-filter:blur(4px)}.rc-chain[style*="display: block"]{animation:.15s ease-out chainIn}@keyframes chainIn{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.chain-step{display:flex;align-items:center;gap:6px;color:var(--text-3)}.chain-step.current{color:var(--primary)}.chain-step.fail{color:var(--danger)}.spinner{width:12px;height:12px;border:2px solid var(--primary);border-top-color:transparent;border-radius:50%;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.input-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.input-card-modern{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:16px;position:relative;overflow:hidden;transition:.2s;cursor:pointer}.input-card-modern::before{content:'';position:absolute;top:0;right:0;left:0;height:3px;background:var(--text-5);transition:background .3s}.input-card-modern.state-active::before{background:var(--success);animation:2s infinite pulse-bar}.input-card-modern:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 24px rgba(59,130,246,.15)}.input-card-modern.state-active:hover{border-color:var(--success);box-shadow:0 8px 24px rgba(34,197,94,.15)}.ic-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}.ic-icon-wrap{width:42px;height:42px;border-radius:12px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s}.input-card-modern.state-active .ic-icon-wrap{background:rgba(34,197,94,.15)}.ic-icon{font-size:22px}.ic-titles{flex:1;min-width:0}.ic-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ic-salon{font-size:10px;color:var(--text-4);font-family:monospace;direction:ltr;margin-top:2px}.ic-dot{width:14px;height:14px;border-radius:50%;background:var(--text-5);flex-shrink:0;transition:.3s}.input-card-modern.state-active .ic-dot{background:var(--success);box-shadow:0 0 12px rgba(34,197,94,.5)}.ic-state-wrap{padding:10px 12px;background:var(--surface-4);border-radius:10px;text-align:center}.ic-state-label{font-size:10px;color:var(--text-5);margin-bottom:4px}.ic-state-text{display:flex;justify-content:center}.ic-state-badge{font-size:13px;font-weight:700;padding:4px 16px;border-radius:20px;background:rgba(107,127,150,.15);color:var(--text-4);transition:.3s}.input-card-modern.state-active .ic-state-badge{background:rgba(34,197,94,.15);color:var(--success)}.ic-footer{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:10px;color:var(--text-5);font-family:monospace;direction:ltr}.ic-edit-btn,.rc-edit-btn,.sc-edit-btn{width:26px;height:26px;border-radius:6px;background:0 0;border:1px solid transparent;color:var(--text-4);display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;transition:.15s;flex-shrink:0;opacity:0!important;pointer-events:none!important;padding:0}.input-card-modern:hover .ic-edit-btn,.relay-card-modern:hover .rc-edit-btn,.sensor-card:hover .sc-edit-btn{opacity:1!important;pointer-events:auto!important}.ic-edit-btn:hover,.rc-edit-btn:hover,.sc-edit-btn:hover{color:var(--primary)!important;border-color:var(--primary)!important;background:rgba(59,130,246,.1)!important}@media (max-width:768px),(hover:none){.ic-edit-btn,.rc-edit-btn,.sc-edit-btn{opacity:1!important;pointer-events:auto!important}}.thresholds-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.thresholds-section h4{font-size:13px;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:6px}.threshold-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.threshold-row .field{margin:0}.threshold-row input{width:100%;padding:9px 10px;background:var(--surface-4);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;direction:ltr;text-align:center;font-variant-numeric:tabular-nums}.threshold-row input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.15)}.threshold-preview{background:var(--surface-4);padding:12px;border-radius:10px;font-size:12px;color:var(--text-3);text-align:center;border:1px solid var(--border);margin-top:10px;line-height:1.8}.threshold-preview .range-bar{display:flex;height:32px;border-radius:5px;overflow:hidden;margin-top:4px;font-size:9px;font-weight:700;color:#fff}.threshold-preview .zone{display:flex;align-items:center;justify-content:center;padding:0 4px;overflow:hidden;white-space:nowrap;min-width:0;transition:flex .3s;font-size:9px;text-overflow:ellipsis}.threshold-preview .zone-critical-low{background:#1e40af}.threshold-preview .zone-warning-low{background:#0891b2}.threshold-preview .zone-normal{background:#22c55e;flex:2}.threshold-preview .zone-warning-high{background:#ea580c}.threshold-preview .zone-critical-high{background:#dc2626}.range-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px;justify-content:center;font-size:10px;color:var(--text-3)}.range-legend>span{display:inline-flex;align-items:center;gap:4px}.range-legend .lg-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}.hw-wrap{display:flex;align-items:stretch;flex:0 0 128px;position:relative}.hw-wrap .hw-input{flex:1;min-width:0;border-radius:6px 0 0 6px;border-right:none;font-family:'Courier New',monospace;direction:ltr;text-align:center;color:var(--text);font-size:12.5px;font-weight:700;background:var(--surface);border:1px solid var(--primary);padding:6px 4px}.hw-wrap .hw-input:focus{outline:0;box-shadow:0 0 0 3px rgba(59,130,246,.2);z-index:1;position:relative}.hw-pick-btn{flex-shrink:0;width:26px;background:var(--primary);border:1px solid var(--primary);border-left:none;border-radius:0 6px 6px 0;color:#fff;cursor:pointer;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:.15s;padding:0}.hw-pick-btn:hover{background:#2563eb;border-color:#2563eb}.hw-wrap.hw-locked .hw-input{background:var(--surface-4);border-color:var(--border);color:var(--text-4);font-weight:400;cursor:not-allowed;padding-right:22px}.hw-lock{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:11px;pointer-events:none;opacity:.7}.hw-picker-pop{background:var(--surface-2);border:1px solid var(--primary);border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 0 4px rgba(59,130,246,.1);min-width:220px;max-width:280px;max-height:300px;display:flex;flex-direction:column;overflow:hidden;animation:.15s hwPopIn}.hw-picker-header{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:rgba(59,130,246,.12);border-bottom:1px solid var(--border);font-size:11px;font-weight:700;color:var(--primary)}.hw-picker-close{background:0 0;border:none;color:var(--primary);font-size:18px;cursor:pointer;padding:0 4px;border-radius:4px}.hw-picker-list{display:flex;flex-wrap:wrap;gap:5px;padding:10px;overflow-y:auto;max-height:240px}.hw-pick-item{padding:6px 11px;background:var(--surface-4);border:1px solid var(--border);border-radius:7px;color:var(--text-2);font-family:'Courier New',monospace;font-size:12px;font-weight:600;cursor:pointer;transition:.15s;direction:ltr}.hw-pick-item:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.08);box-shadow:0 4px 12px rgba(59,130,246,.4)}@keyframes hwPopIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.icon-picker-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}.icon-input{width:64px;padding:10px;text-align:center;font-size:26px;background:var(--surface-4);border:1px solid var(--primary);border-radius:12px;color:var(--text);cursor:default;box-shadow:0 0 0 3px rgba(59,130,246,.1);line-height:1.2}.icon-picker-hint{font-size:11px;color:var(--text-4)}.emoji-picker{display:flex;flex-direction:column;gap:6px;padding:10px;background:var(--surface-4);border:1px solid var(--border);border-radius:12px;max-height:340px;overflow-y:auto}.emoji-category{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.emoji-btn{aspect-ratio:1;min-height:38px;background:var(--surface-3);border:1px solid var(--border);border-radius:8px;font-size:20px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.emoji-btn:hover{border-color:var(--primary);background:rgba(59,130,246,.1);transform:scale(1.08)}.emoji-btn.active{border-color:var(--primary);background:rgba(59,130,246,.2);box-shadow:0 0 0 2px rgba(59,130,246,.25);transform:scale(1.05)}.emoji-category-label{font-size:11px;font-weight:600;color:var(--text-3);padding:6px 4px 4px;margin-top:6px;border-top:1px solid var(--border);display:flex;align-items:center;gap:6px}.emoji-category-label:first-child{border-top:none;margin-top:0}.chart-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;background:var(--surface-3);border:1px solid var(--border);border-radius:12px;margin-bottom:12px;min-height:48px;box-sizing:border-box}.chart-presets{display:flex;gap:4px;flex-wrap:wrap;align-items:center}.chart-presets button{height:32px;padding:0 12px;border-radius:8px;background:var(--surface-4);color:var(--text-3);border:1px solid var(--border);font-size:12px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;line-height:1;box-sizing:border-box}.chart-presets button:hover:not(.active){background:var(--surface);color:var(--text-2)}.chart-presets button.active{background:rgba(59,130,246,.15);border-color:var(--primary);color:var(--primary)}.chart-toolbar-sep{width:1px;height:22px;background:var(--border-2);margin:0 4px;flex-shrink:0}.chart-custom-dates{display:flex;align-items:center;gap:4px;height:32px;margin-inline-start:auto}.chart-custom-dates .chart-input{height:32px;width: 130px !important; min-width: 120px !important; padding: 0 10px !important; text-align: center; font-size: 12px !important; box-sizing:border-box;border:1px solid var(--border-2);background:var(--surface-4);color:var(--text);cursor:pointer;font-family:inherit;text-align:center;direction:rtl}.chart-custom-dates .chart-input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.15)}.chart-control-sep{font-size:11px;color:var(--text-4);padding:0 2px;line-height:1}.chart-custom-dates .btn{height:32px;padding:0 12px;font-size:11px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.chart-custom-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 12px;background:var(--surface-3);border:1px solid var(--border);border-radius:12px;margin-bottom:12px;min-height:48px;box-sizing:border-box}.chart-control-group{display:flex;align-items:center;gap:8px;height:32px}.chart-control-label{font-size:11px;color:var(--text-4);font-weight:600;line-height:1;white-space:nowrap}.chart-custom-controls .chart-input{height:32px;padding:0 8px;box-sizing:border-box;font-size:11px;min-width:130px;text-align:center;direction:rtl}.chart-custom-controls .btn{height:32px;padding:0 12px;font-size:11px;box-sizing:border-box}.chart-custom-controls select.chart-input,.chart-toolbar select.chart-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--surface-4);background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23889bb0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 8px center;background-size:12px;color:var(--text);border:1px solid var(--border-2);border-radius:8px!important;overflow:hidden;padding:0 10px 0 28px;text-align:right;direction:rtl;cursor:pointer;font-family:inherit;box-sizing:border-box}.chart-custom-controls select.chart-input:focus,.chart-toolbar select.chart-input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.15)}.chart-custom-controls select.chart-input option{background:var(--surface);color:var(--text)}.chart-manual-y{display:flex;gap:4px;align-items:center;height:32px}.chart-input.small{width:65px;padding:0 8px;text-align:center;direction:ltr;min-width:0}.chart-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}.chart-stats .cs{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 6px;text-align:center}.chart-stats .cs .l{font-size:10px;color:var(--text-4)}.chart-stats .cs .v{font-size:16px;font-weight:700;color:var(--text);direction:ltr;margin-top:2px}#digitalTimeline{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:12px}.timeline-header{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-3);margin-bottom:6px}.timeline-value{font-size:13px;font-weight:700;color:var(--success);direction:ltr;font-variant-numeric:tabular-nums}.timeline-bar{height:8px;background:var(--surface-4);border-radius:4px;overflow:hidden}.timeline-fill{height:100%;background:var(--success);width:0%;transition:width .5s;border-radius:4px}.chart-container{position:relative;height:320px;background:var(--surface-4);border-radius:10px;padding:12px;margin-bottom:12px}.chart-info{text-align:center;font-size:11px;color:var(--text-4);padding:8px}.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-inline-start:6px;border-radius:10px;font-size:10px;font-weight:700;color:#fff;background:var(--text-4);direction:ltr}.tab-badge.badge-critical{background:#dc2626;animation:1.5s infinite badge-pulse}.tab-badge.badge-warning{background:#ea580c}.tab-badge.badge-offline{background:#64748b}@keyframes badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}.alerts-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px}.alerts-filters{display:flex;gap:6px;flex-wrap:wrap}.alert-filter{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:var(--surface-4);border:1px solid var(--border);border-radius:9px;color:var(--text-3);font-size:12px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}.alert-filter:hover{background:var(--surface-3);border-color:var(--border-2);color:var(--text-2)}.alert-filter.active{background:rgba(59,130,246,.15);border-color:var(--primary);color:var(--primary)}.af-count{background:rgba(0,0,0,.15);padding:1px 7px;border-radius:7px;font-size:10px;font-weight:700;min-width:18px;text-align:center}.alert-filter.active .af-count{background:rgba(59,130,246,.3);color:var(--primary)}.alerts-list{display:flex;flex-direction:column;gap:8px}.alert-item{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:.15s;border-inline-start:4px solid var(--border)}.alert-item:hover{border-color:var(--border-2);background:var(--surface-3);transform:translateX(-3px)}.alert-item.sev-critical{border-inline-start-color:#dc2626;background:linear-gradient(90deg,rgba(220,38,38,.08),var(--surface-2))}.alert-item.sev-warning{border-inline-start-color:#ea580c;background:linear-gradient(90deg,rgba(234,88,12,.06),var(--surface-2))}.alert-item.sev-offline{border-inline-start-color:#64748b}.alert-icon-wrap{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;background:var(--surface-3)}.alert-icon-wrap.sev-critical{background:rgba(220,38,38,.15)}.alert-icon-wrap.sev-warning{background:rgba(234,88,12,.15)}.alert-body{flex:1;min-width:0}.alert-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alert-loc{font-size:11px;color:var(--text-4);display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alert-sep{color:var(--text-5)}.alert-hwid{font-family:'Courier New',monospace;font-size:10px;direction:ltr}.alert-value-wrap{text-align:center;min-width:90px;flex-shrink:0}.alert-value{font-size:20px;font-weight:700;color:var(--text);direction:ltr;line-height:1}.alert-item.sev-critical .alert-value{color:#f87171}.alert-item.sev-warning .alert-value{color:#fdba74}.alert-item.sev-offline .alert-value{color:var(--text-4)}.alert-unit{font-size:11px;color:var(--text-4);margin-inline-start:3px}.alert-time{font-size:10px;color:var(--text-4);margin-top:3px}.alert-severity{padding:4px 12px;border-radius:14px;font-size:10px;font-weight:700;flex-shrink:0}.alert-severity.sev-critical{background:rgba(220,38,38,.15);color:#f87171}.alert-severity.sev-warning{background:rgba(234,88,12,.15);color:#fdba74}.alert-severity.sev-offline{background:rgba(100,116,139,.15);color:#94a3b8}.alert-chart-btn{width:34px;height:34px;border-radius:8px;background:var(--surface-4);border:1px solid var(--border);color:var(--text-3);font-size:14px;cursor:pointer;transition:.15s;flex-shrink:0}.alert-chart-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}.alerts-empty{text-align:center;padding:60px 20px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px}.alerts-empty-icon{font-size:64px;margin-bottom:14px}.alerts-empty-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px}.alerts-empty-sub{font-size:12px;color:var(--text-4)}.datepicker-plot-area,.datepicker-plot-area *{font-family:Vazirmatn,Tahoma,sans-serif!important;color:var(--text)!important;background-color:transparent!important;box-shadow:none!important;border-color:var(--border-2)!important}.datepicker-plot-area{background-color:var(--surface)!important;border:1px solid var(--border-2)!important;border-radius:12px!important;box-shadow:0 10px 40px rgba(0,0,0,.8)!important;overflow:hidden!important}.datepicker-plot-area .navigator,.datepicker-plot-area .time-section,.datepicker-plot-area .weekdays{background-color:var(--surface-3)!important;border-bottom:1px solid var(--border-2)!important;border-top:1px solid var(--border-2)!important;padding:6px!important}.datepicker-plot-area .navigator .btn,.datepicker-plot-area .navigator .selectbox{background-color:var(--surface-4)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:6px!important;padding:2px 10px!important;font-weight:700!important;cursor:pointer!important;transition:.2s!important}.datepicker-plot-area .navigator .btn:hover,.datepicker-plot-area .navigator .selectbox:hover{background-color:var(--primary)!important;color:#fff!important}.datepicker-plot-area .weekdays .day-name{color:var(--text-4)!important;font-size:11px!important;font-weight:700!important}.datepicker-plot-area .day-item{color:var(--text-2)!important;transition:.15s!important}.datepicker-plot-area .day-item:hover{background-color:var(--surface-4)!important;border-radius:6px!important}.datepicker-plot-area .day-item.selected{background-color:var(--primary)!important;color:#fff!important;border-radius:6px!important}.datepicker-plot-area .day-item.today{border:1px solid var(--primary)!important;color:var(--primary)!important;border-radius:6px!important}.datepicker-plot-area .time-section input{background-color:var(--surface-4)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:6px!important;padding:2px 6px!important;text-align:center!important}.datepicker-plot-area .toolbox{display:none!important}.salon-detail-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:14px 16px}.sd-info{display:flex;align-items:center;gap:12px;flex:1 1 240px;min-width:0}.sd-icon{font-size:32px;line-height:1;flex-shrink:0}.sd-info>div{min-width:0;flex:1;overflow:hidden}.sd-info h2{font-size:16px;color:var(--text);margin:0 0 2px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sd-info small{font-size:11px;color:var(--text-4);display:block;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sd-actions{display:flex;gap:8px;flex-wrap:nowrap;flex-shrink:0}.sd-actions .btn{padding:8px 14px;font-size:12px;white-space:nowrap}@media (max-width:640px){.sd-info{flex-basis:100%}.sd-actions{width:100%;flex-wrap:wrap}.sd-actions .btn{flex:1 1 auto;min-width:0;padding:8px 10px;font-size:11px}}[data-theme=light]{--bg:#e5eaf1;--surface:#ffffff;--surface-2:#edf1f7;--surface-3:#e2e8f0;--surface-4:#d5dde8;--border:#c8d2df;--border-2:#a8b4c4;--card-border:#c8d2df;--text:#0f172a;--text-2:#334155;--text-3:#64748b;--text-4:#94a3b8;--text-5:#cbd5e1;--primary:#2563eb;--primary-dark:#1d4ed8;--danger:#dc2626;--success:#16a34a;--warning:#d97706}[data-theme=light] .login-overlay{background:radial-gradient(circle at 30% 20%,#e2e8f0 0,#eef2f7 70%)}[data-theme=light] .login-card,[data-theme=light] .modal{box-shadow:0 10px 40px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04)}[data-theme=light] .brand .logo,[data-theme=light] .login-logo{box-shadow:0 6px 20px rgba(37,99,235,.25)}[data-theme=light] .app-header{box-shadow:0 1px 3px rgba(0,0,0,.05)}[data-theme=light] .factory-btn:hover{background:var(--surface-4)}[data-theme=light] .factory-dropdown{box-shadow:0 10px 30px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06)}[data-theme=light] .factory-option.active{background:rgba(37,99,235,.1)}[data-theme=light] .modal-backdrop{background:rgba(15,23,42,.4)}[data-theme=light] .toast{box-shadow:0 10px 30px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.05)}[data-theme=light] .admin-kpi,[data-theme=light] .admin-welcome,[data-theme=light] .alert-item,[data-theme=light] .backup-card,[data-theme=light] .breakdown-card,[data-theme=light] .dash-hero,[data-theme=light] .factory-card,[data-theme=light] .gw-accordion-card,[data-theme=light] .gw-card-v2,[data-theme=light] .gw-channel-card,[data-theme=light] .gw-health-item,[data-theme=light] .input-card-modern,[data-theme=light] .list-item,[data-theme=light] .relay-card-modern,[data-theme=light] .salon-card-v2,[data-theme=light] .sensor-card,[data-theme=light] .stat-card,[data-theme=light] .type-card{background:var(--surface-2);border:1px solid var(--card-border);box-shadow:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05)}[data-theme=light] .admin-kpi:hover,[data-theme=light] .breakdown-card:hover,[data-theme=light] .factory-card:hover,[data-theme=light] .gw-accordion-card:hover,[data-theme=light] .gw-card-v2:hover,[data-theme=light] .gw-channel-card:hover,[data-theme=light] .input-card-modern:hover,[data-theme=light] .list-item:hover,[data-theme=light] .relay-card-modern:hover,[data-theme=light] .salon-card-v2:hover,[data-theme=light] .sensor-card:hover,[data-theme=light] .stat-card:hover,[data-theme=light] .type-card:hover{background:#e5eaf2;border-color:var(--border-2);box-shadow:0 4px 14px rgba(15,23,42,.1),0 2px 4px rgba(15,23,42,.06)}[data-theme=light] .salon-card-v2:hover{border-color:#93c5fd;box-shadow:0 6px 18px rgba(37,99,235,.15)}[data-theme=light] .sensor-card.state-critical_high,[data-theme=light] .sensor-card.state-critical_low{background:#fdf2f2;border-color:rgba(220,38,38,.55)}[data-theme=light] .sensor-card.state-warning_high,[data-theme=light] .sensor-card.state-warning_low{background:#fefaf3;border-color:rgba(234,88,12,.5)}[data-theme=light] .sensor-card.state-offline{background:#eef1f5;border-color:var(--text-5)}[data-theme=light] .salon-card-v2.has-alarm{border-color:rgba(220,38,38,.5)}[data-theme=light] .salon-card-v2.has-alarm.salon-severity-warning{border-color:rgba(234,88,12,.5)}[data-theme=light] .sensor-card.state-warning_low .sc-value{color:#0891b2}[data-theme=light] .sensor-card.state-warning_high .sc-value{color:#ea580c}[data-theme=light] .sensor-card.state-critical_low .sc-value{color:#1e40af}[data-theme=light] .sensor-card.state-critical_high .sc-value{color:#dc2626}[data-theme=light] .alert-icon-wrap,[data-theme=light] .fc-icon,[data-theme=light] .gwa-icon,[data-theme=light] .gwc-icon,[data-theme=light] .ic-icon-wrap,[data-theme=light] .item-icon,[data-theme=light] .kpi-icon,[data-theme=light] .rc-icon-wrap,[data-theme=light] .salon-card-icon,[data-theme=light] .sc-icon-wrap,[data-theme=light] .type-icon,[data-theme=light] .welcome-icon{background:var(--surface-4);border:1px solid var(--border)}[data-theme=light] .audit-table-wrap,[data-theme=light] .channels-table-wrap,[data-theme=light] .devices-table-wrap,[data-theme=light] .users-table-wrap{background:var(--surface-2);border:1px solid var(--card-border);box-shadow:0 1px 3px rgba(15,23,42,.06)}[data-theme=light] .audit-table thead,[data-theme=light] .channels-table thead,[data-theme=light] .devices-table thead,[data-theme=light] .users-table thead{background:var(--surface-3)}[data-theme=light] .audit-table tbody tr,[data-theme=light] .channels-table tbody tr,[data-theme=light] .devices-table tbody tr,[data-theme=light] .users-table tbody tr{border-bottom:1px solid #d5dde8}[data-theme=light] .audit-table tbody tr:hover,[data-theme=light] .channels-table tbody tr:hover,[data-theme=light] .devices-table tbody tr:hover,[data-theme=light] .users-table tbody tr:hover{background:#e5eaf2}[data-theme=light] .channels-search,[data-theme=light] .chart-input,[data-theme=light] .checkbox-list,[data-theme=light] .devices-search,[data-theme=light] .field input[type=number],[data-theme=light] .field input[type=password],[data-theme=light] .field input[type=text],[data-theme=light] .field select,[data-theme=light] .filter-select,[data-theme=light] .types-search{border:1px solid #bcc7d6;background:#fff}[data-theme=light] .chart-input:focus,[data-theme=light] .devices-search:focus,[data-theme=light] .field input:focus,[data-theme=light] .field select:focus,[data-theme=light] .filter-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)}[data-theme=light] .alerts-toolbar,[data-theme=light] .audit-filters,[data-theme=light] .backup-header,[data-theme=light] .channels-header,[data-theme=light] .chart-custom-controls,[data-theme=light] .chart-toolbar,[data-theme=light] .devices-toolbar,[data-theme=light] .gw-retention-section,[data-theme=light] .page-toolbar,[data-theme=light] .rollup-info,[data-theme=light] .salon-detail-header,[data-theme=light] .types-toolbar{background:var(--surface-2);border:1px solid var(--card-border);box-shadow:0 1px 2px rgba(15,23,42,.04)}[data-theme=light] .chart-custom-dates{background:0 0;border:none;box-shadow:none}[data-theme=light] .chart-container{background:#fff;border:1px solid var(--card-border);box-shadow:0 1px 3px rgba(15,23,42,.05)}[data-theme=light] .admin-empty,[data-theme=light] .alerts-empty,[data-theme=light] .chart-stats .cs,[data-theme=light] .devices-empty,[data-theme=light] .empty-state,[data-theme=light] .gwa-body,[data-theme=light] .gwa-empty,[data-theme=light] .types-empty{background:var(--surface-2);border:1px solid var(--card-border)}[data-theme=light] .rc-chain{background:var(--surface-3);border:1px solid var(--card-border)}[data-theme=light] .meta-value,[data-theme=light] .sstat,[data-theme=light] .tag{background:var(--surface-3);border:1px solid var(--border)}[data-theme=light] .admin-header,[data-theme=light] .admin-sidebar{background:var(--surface-2);border-color:var(--card-border)}[data-theme=light] .api-key-box code{background:#f1f5f9;color:#1e40af;border-color:var(--primary)}[data-theme=light] .hw-picker-pop{box-shadow:0 10px 30px rgba(0,0,0,.15)}[data-theme=light] .threshold-preview{background:#f8fafc}[data-theme=light] ::-webkit-scrollbar-thumb{background:#cbd5e1}[data-theme=light] ::-webkit-scrollbar-thumb:hover{background:#94a3b8}[data-theme=light] .hero-stat{background:rgba(0,0,0,.03)}[data-theme=light] .hero-stat:hover{background:rgba(0,0,0,.05)}[data-theme=light] .hero-stat.has-alarm{background:rgba(220,38,38,.08)}.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:1.5s infinite shimmer;border-radius:10px}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.skeleton-card{height:100px;margin-bottom:10px}.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}body.tv-mode .app-header{padding:8px 14px}body.tv-mode .app-content{padding:12px;max-width:none}body.tv-mode .user-badge .role{display:none}body.tv-mode .tabs{padding:0 14px}body.tv-mode .tab{padding:12px 14px;font-size:12px}@media (max-width:900px){.chart-toolbar{flex-direction:column;align-items:stretch;min-height:auto}.chart-toolbar-sep{width:100%;height:1px;margin:4px 0}.chart-custom-dates{width:100%;flex-wrap:wrap}.chart-custom-dates .chart-input{flex:1;width:auto}}@media (max-width:640px){.app-header{padding:10px 12px}.brand-title small,.user-badge .name{display:none}.app-content{padding:16px}.list-item{padding:12px;gap:10px}.list-item .item-icon{width:38px;height:38px;font-size:18px}.list-item .item-actions .icon-btn{width:32px;height:32px;font-size:13px}.modal-backdrop{padding:0}.modal{max-width:none!important;height:100vh;max-height:100vh;border-radius:0}.dash-hero{padding:14px;flex-direction:column;align-items:stretch;gap:12px}.dash-hero-icon{width:46px;height:46px;font-size:22px;border-radius:12px}.dash-hero-info h2{font-size:15px}.dash-hero-stats{gap:6px}.hero-stat{flex:1;min-width:0;padding:6px 8px;gap:6px}.hero-stat-icon{font-size:14px}.hero-stat-value{font-size:13px}.hero-stat-label{font-size:8px}.salon-cards-v2{grid-template-columns:repeat(2,1fr);gap:10px}.salon-card-icon{width:44px;height:44px;font-size:22px}.salon-card-title{font-size:12px}.salon-card-desc{font-size:10px}.sstat{padding:3px 8px;font-size:10px}.salon-card-actions{opacity:1}.input-cards-grid,.relay-cards-grid,.salon-grid,.sensor-cards-grid{grid-template-columns:1fr}.sc-value{font-size:30px}.chart-stats{grid-template-columns:repeat(2,1fr)}.chart-container{height:240px;padding:8px}.alert-item{flex-wrap:wrap;padding:12px}.alert-body{flex-basis:calc(100% - 60px)}.alert-value-wrap{flex-basis:100%;text-align:right;display:flex;justify-content:space-between;align-items:baseline;padding-top:8px;border-top:1px solid var(--border);margin-top:4px}.alert-severity{order:4}.alert-chart-btn{order:5}.alerts-toolbar{flex-direction:column;align-items:stretch}}@media (max-width:480px){.app-header{flex-wrap:wrap;gap:8px}.header-factory{order:3;flex-basis:100%;max-width:none;margin:4px 0 0}.user-menu{margin-right:auto}.emoji-category{grid-template-columns:repeat(6,1fr)}.emoji-btn{font-size:18px;min-height:34px}.icon-input{font-size:22px;width:54px}.salon-cards-v2,.threshold-row{grid-template-columns:1fr}.dash-hero-stats{flex-wrap:wrap}.hero-stat{min-width:calc(50% - 3px)}}.chart-custom-controls .chart-input,.chart-custom-controls select.chart-input,.chart-custom-dates .chart-input,.chart-input,input[type=number].chart-input,input[type=text].chart-input{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;appearance:none;-webkit-appearance:none}.chart-manual-y .chart-input,input[type=number].chart-input,input[type=text].chart-input{background:var(--surface-4)!important;border:1px solid var(--border-2)!important;color:var(--text)!important;border-radius:8px!important;padding:0 10px;height:32px;width:70px;min-width:0;max-width:80px;font-size:12px;font-family:inherit;text-align:center;direction:ltr;transition:.15s;-moz-appearance:textfield;appearance:textfield;box-sizing:border-box}.chart-manual-y .chart-input::placeholder,input[type=number].chart-input::placeholder{color:var(--text-4);font-size:11px}.chart-manual-y .chart-input:hover,input[type=number].chart-input:hover{border-color:var(--primary)!important}.chart-manual-y .chart-input:focus,input[type=number].chart-input:focus{outline:0;border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(59,130,246,.15);background:var(--surface)!important}.chart-manual-y .chart-input::-webkit-inner-spin-button,.chart-manual-y .chart-input::-webkit-outer-spin-button,input[type=number].chart-input::-webkit-inner-spin-button,input[type=number].chart-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#loginBtn,.login-card .btn-primary{width:100%!important;height:48px;min-height:48px;max-height:48px;box-sizing:border-box;padding:0 16px!important;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s,opacity .15s,transform .15s}#loginBtn.loading,#loginBtn:disabled{width:100%!important;height:48px;min-height:48px;max-height:48px;padding:0 16px!important;cursor:not-allowed;opacity:.6}@media (max-width:768px){.app-header{flex-wrap:wrap!important;padding:10px!important;gap:8px!important}.brand{flex:1 1 auto;gap:6px}.brand .logo{width:32px;height:32px;font-size:16px}.brand-title h1{display:none}.user-menu{margin-right:auto;gap:4px!important;flex-wrap:wrap;justify-content:flex-end}.user-badge{padding:4px 8px!important;font-size:11px!important}.user-badge .name{display:none}.admin-link-btn,.header-icon-btn{width:32px!important;height:32px!important;font-size:14px!important}.btn-logout{padding:6px 10px!important;font-size:11px!important;min-height:32px;flex-shrink:0!important}#audioToggleBtn,#changePwBtn,#tvModeBtn{display:none!important}.header-factory{flex:1 1 100%;order:3;margin:4px 0 0!important;max-width:none!important}.factory-btn{padding:4px 8px;font-size:11px;min-height:32px}.factory-btn .name{font-size:11px}.input-cards-grid,.relay-cards-grid,.sensor-cards-grid{grid-template-columns:1fr!important;gap:10px!important}.input-card-modern,.relay-card-modern,.sensor-card{padding:12px!important;gap:8px!important}.ic-top,.rc-top,.sc-top{flex-wrap:nowrap;gap:8px;align-items:flex-start;margin-bottom:8px}.ic-icon-wrap,.rc-icon-wrap,.sc-icon-wrap{width:34px;height:34px;border-radius:10px}.ic-icon,.rc-icon,.sc-icon{font-size:18px}.ic-titles,.rc-titles,.sc-titles{flex:1;min-width:0}.ic-name,.rc-name,.sc-name{font-size:12px}.ic-salon,.rc-salon,.sc-salon{font-size:9px}.ic-edit-btn,.rc-edit-btn,.sc-edit-btn{width:22px;height:22px;font-size:10px}.ic-dot,.rc-dot,.sc-state-dot{width:8px;height:8px}.sc-value{font-size:26px}.sc-unit{font-size:12px}.sc-footer{margin-top:2px;font-size:10px}.ic-state-wrap,.rc-state-wrap{margin-bottom:8px;padding:6px 10px;border-radius:8px}.ic-state-label,.rc-state-label{font-size:9px}.ic-state-badge,.rc-state-badge{font-size:12px;padding:3px 12px}.rc-actions{gap:6px}.rc-btn{min-height:36px;font-size:12px;padding:6px 0;border-radius:8px}.ic-footer{margin-top:8px;padding-top:8px;font-size:9px}.alerts-toolbar{flex-direction:column!important;align-items:stretch!important;padding:8px!important;gap:8px!important}.alerts-filters{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:4px!important;width:100%}.alert-filter{padding:8px 4px!important;font-size:10px!important;justify-content:center!important;white-space:nowrap;border-radius:8px!important}.af-count{font-size:9px!important;padding:1px 5px!important;min-width:16px!important}.alerts-toolbar .btn{height:34px!important;font-size:11px!important;padding:0 12px!important}.alert-item{display:grid!important;grid-template-columns:36px 1fr auto!important;grid-template-areas:"icon body value" "icon sev  chart"!important;gap:6px 10px!important;padding:12px!important;align-items:center!important;border-radius:12px!important;flex-wrap:nowrap!important}.alert-icon-wrap{grid-area:icon!important;width:36px!important;height:36px!important;font-size:16px!important;border-radius:10px!important}.alert-body{grid-area:body!important;min-width:0!important;flex-basis:auto!important}.alert-name{font-size:13px!important;margin-bottom:2px!important}.alert-loc{font-size:10px!important}.alert-hwid{font-size:9px!important}.alert-time{display:none!important}.alert-value-wrap{grid-area:value!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;flex-basis:auto!important;border-top:none!important;padding-top:0!important;margin-top:0!important;min-width:60px!important}.alert-value{font-size:18px!important;line-height:1.1!important}.alert-unit{font-size:10px!important;margin-left:2px!important}.alert-severity{grid-area:sev!important;justify-self:start!important;align-self:end!important;padding:2px 8px!important;font-size:9px!important;margin-top:4px!important;border-radius:6px!important}.alert-chart-btn{grid-area:chart!important;justify-self:end!important;align-self:end!important;width:28px!important;height:28px!important;font-size:12px!important;margin-top:4px!important;border-radius:8px!important}.chart-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%}.chart-presets button{padding:0 4px;font-size:10px;height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-custom-dates{display:flex!important;width:100%!important;gap:6px!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important}.chart-custom-dates .chart-input{flex:1 1 auto!important;max-width:140px!important;min-width:0!important;font-size:11px!important;height:30px!important}.chart-custom-dates .chart-control-sep{display:inline-block!important;color:var(--text-3)!important;font-size:12px!important;margin:0 2px!important}.chart-custom-dates .btn{flex:0 0 auto!important;padding:0 14px!important;margin:0!important;height:30px!important;font-size:11px!important}.chart-custom-controls{flex-direction:column;align-items:stretch;gap:8px;padding:8px}.chart-control-group{flex-wrap:nowrap!important;justify-content:space-between;height:auto!important;min-height:32px;width:100%;gap:6px}.chart-control-group select{flex:1 1 auto!important;min-width:0!important}#chartYAxisManual{flex:1 1 auto!important;align-items:center!important;gap:4px!important;min-width:0!important}#chartYAxisManual input{width:50px!important;flex:1 1 auto!important;padding:0 4px!important;font-size:11px!important;min-width:0!important}#chartApplyY{flex:0 0 auto!important;padding:0 12px!important;height:30px!important;width:auto!important;margin:0!important}.chart-stats{gap:4px;margin-bottom:10px}.chart-stats .cs{padding:6px 4px}.chart-stats .cs .l{font-size:9px}.chart-stats .cs .v{font-size:14px}.chart-container{height:280px!important;padding:10px 10px 20px!important}#digitalTimeline{padding:8px 10px;margin-bottom:8px}.timeline-header{font-size:10px}#chartModal .modal-footer{padding-bottom:calc(24px + env(safe-area-inset-bottom,16px))!important;padding-top:12px!important;margin-bottom:0!important;flex-wrap:wrap;justify-content:space-between}#chartModal .modal-footer .btn{flex:1 1 auto;padding:10px 14px!important;font-size:12px!important;min-height:40px}.datepicker-plot-area{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:auto!important;transform:none!important;width:90vw!important;max-width:320px!important;height:fit-content!important;max-height:85vh!important;overflow-y:auto!important;overflow-x:hidden!important;z-index:99999!important;box-shadow:0 20px 60px rgba(0,0,0,.8)!important;border-radius:14px!important}.datepicker-plot-area .day-item{font-size:13px!important;height:30px!important;line-height:30px!important}.datepicker-plot-area .weekdays .day-name{font-size:10px!important;padding:4px 0!important}.datepicker-plot-area .time-section{display:flex!important;justify-content:center!important;padding:10px!important;background-color:var(--surface-3)!important;border-top:1px solid var(--border-2)!important}.datepicker-plot-area .toolbox{display:flex!important;justify-content:space-between!important;padding:8px 12px!important;background-color:var(--surface-3)!important;border-top:1px solid var(--border-2)!important}.datepicker-plot-area .toolbox .btn{background:var(--surface-4)!important;color:var(--text)!important;padding:4px 12px!important;border-radius:6px!important;font-size:12px!important;font-weight:700!important;border:1px solid var(--border)!important}}.salon-inline-wrapper{display:flex!important;align-items:stretch!important;background:var(--surface-4)!important;border:1px solid var(--border)!important;border-radius:10px!important;overflow:hidden!important;transition:.2s}.salon-inline-wrapper:focus-within{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(59,130,246,.15)!important}.salon-inline-wrapper .icon-inline-input{width:48px!important;min-width:48px!important;text-align:center!important;font-size:22px!important;background:var(--surface-3)!important;border:none!important;border-left:1px solid var(--border)!important;cursor:pointer!important;padding:0!important;outline:0!important;color:var(--text)!important}.salon-inline-wrapper .icon-inline-input:hover{background:var(--surface-2)!important}.salon-inline-wrapper #salonName{flex:1!important;border:none!important;background:0 0!important;box-shadow:none!important;border-radius:0!important;padding:10px 14px!important;color:var(--text)!important;font-size:14px!important}


/* ═══════════════════════════════════════════════════════════════════════
   ۱. فونت اختصاصی و تنظیمات پایه (Base & Typography)
   ═══════════════════════════════════════════════════════════════════════ */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/static/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2'),
         url('/static/fonts/webfonts/Vazirmatn-Regular.woff') format('woff'),
         url('/static/fonts/ttf/Vazirmatn-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/static/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body, button, input, select, textarea {
    font-family: 'Vazirmatn', Tahoma, sans-serif !important;
}

#chartInfo, .chart-info {
    font-family: 'Vazirmatn', Tahoma, sans-serif !important;
    font-size: 12px !important;
    color: var(--text-4) !important;
    text-align: center !important;
    padding: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ۲. کامپوننت‌های سراسری مودال‌ها (Global Modals)
   ═══════════════════════════════════════════════════════════════════════ */

/* --- مودال ویرایش دستگاه (نام و آیکون کنار هم) --- */
.device-inline-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    background: var(--surface-4) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.device-inline-wrapper:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}
.device-inline-wrapper .icon-inline-input {
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 46px !important;
    background: var(--surface-3) !important;
    border: none !important;
    border-left: 1px solid var(--border) !important;
    text-align: center !important;
    font-size: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    outline: none !important;
}
.device-inline-wrapper #deviceEditName {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 46px !important;
    padding: 0 14px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    font-size: 15px !important;
    color: var(--text) !important;
    box-sizing: border-box !important;
    outline: none !important;
}

/* --- مودال ویرایش سالن (آیکون و نام سالن کنار هم) --- */
.salon-inline-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.salon-inline-wrapper .icon-inline-input {
    flex: 0 0 54px !important;
    width: 54px !important;
    text-align: center !important;
    font-size: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0 10px 10px 0 !important;
    border: none !important;
    border-left: 1px solid var(--border) !important;
}
.salon-inline-wrapper #salonName {
    flex: 1 1 0% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
    border-radius: 10px 0 0 10px !important;
    padding: 10px 14px !important;
}

/* --- هدر فشرده صفحه سالن (Compact Salon Header) --- */
.salon-detail-header.compact-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 12px !important; 
    margin-bottom: 12px !important; 
    border-radius: 12px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.salon-detail-header.compact-header .sd-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important; 
    width: auto !important;
    min-width: 0 !important;
}
.salon-detail-header.compact-header .sd-info h2 {
    font-size: 15px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--text) !important;
}
.salon-detail-header.compact-header .sd-info small {
    font-size: 10px !important;
    display: block !important;
    margin-top: 2px !important;
    color: var(--text-4) !important;
}
.salon-detail-header.compact-header .sd-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important; 
    width: auto !important;
    margin: 0 !important;
}
.salon-detail-header.compact-header .sd-actions .header-icon-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--surface-3) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    color: var(--text-2) !important;
}
.salon-detail-header.compact-header .sd-actions .header-icon-btn:hover {
    background: var(--surface-4) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.salon-detail-header.compact-header .sd-actions .header-icon-btn.danger {
    color: var(--danger) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}
.salon-detail-header.compact-header .sd-actions .header-icon-btn.danger:hover {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: var(--danger) !important;
}

/* --- لوگوی صفحه لاگین --- */
.login-card .logo {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 18px !important;
    background: var(--surface-4) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
.login-card .logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 8px !important;
}

/* --- دکمه سالن جدید در هدر داشبورد --- */
.dash-hero-main {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ۳. تنظیمات مخصوص موبایل (Mobile Responsive - Max 768px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ─── الف) هدر، برندینگ و منو (نسخه اصلاح‌شده و قفل‌شده) ─── */
    .app-header {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .brand {
        flex: 1 1 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid var(--border) !important;
        margin-bottom: 4px !important;
        gap: 8px !important;
    }
    .brand-title h1 { display: block !important; font-size: 14px !important; text-align: center !important; }
    .brand-title small { display: none !important; }

    /* 👈 ۱. قفل کردن کارخانه در سمت راست */
    .header-factory {
        flex: 1 1 0% !important; /* گرفتن فضای باقی‌مانده */
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important; /* حذف هرگونه مارجین اضافی */
        order: 1 !important; /* اولویت اول در چیدمان RTL (سمت راست) */
    }

    .factory-btn { 
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        direction: rtl !important; /* اجبار به راست‌چین */
        width: 100% !important; 
        padding: 6px 10px !important; 
        min-height: 34px !important; 
        gap: 6px !important;
    }
    
    .factory-btn .name {
        flex: 1 !important;
        text-align: right !important; 
        padding-right: 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* هل دادن فلش به سمت چپ */
    .factory-btn .chevron {
        flex-shrink: 0 !important;
        margin-right: auto !important; 
        margin-left: 0 !important;
        font-size: 10px !important;
    }
    .factory-option { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
    .factory-option .name { flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: right !important; }
    .factory-option .opt-city { flex-shrink: 0 !important; margin-right: auto !important; }

    /* 👈 ۲. قفل کردن منوی کاربر در سمت چپ */
    .user-menu {
        flex: 0 0 auto !important; /* نگرفتن عرض اضافی */
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin-right: auto !important; /* 👈 این خط جادویی، دکمه‌ها را به سمت چپ هل می‌دهد */
        margin-left: 0 !important;
        gap: 4px !important;
        order: 2 !important; /* دومین المان (سمت چپ) */
    }

    /* فشرده کردن دکمه‌های منوی کاربر */
    .user-badge { padding: 4px 6px !important; height: 32px !important; font-size: 11px !important; }
    .user-badge .name, .user-badge .role { display: none !important; }
    .btn-logout { padding: 4px 8px !important; font-size: 11px !important; height: 32px !important; }
    .header-icon-btn, .admin-link-btn { width: 32px !important; height: 32px !important; font-size: 14px !important; }

    /* ─── ب) هدر تب‌ها ─── */
    .section-header h2 { display: none !important; }
    .section-header { display: flex !important; justify-content: flex-end !important; margin-bottom: 12px !important; margin-top: 4px !important; }
    .section-header > div { width: 100% !important; display: flex !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px !important; }

    /* ─── ج) داشبورد (Hero, Stats, Salon Cards) ─── */
    .dash-hero-main .btn { padding: 4px 8px !important; font-size: 11px !important; height: 30px !important; }
    .dash-hero-stats { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; }
    .hero-stat {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 6px 8px !important;
        gap: 6px !important;
        border-radius: 8px !important;
    }
    .hero-stat-content {
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        width: 100% !important;
        white-space: nowrap !important;
    }
    .hero-stat-value { font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; }
    .hero-stat-label { font-size: 11px !important; line-height: 1 !important; white-space: nowrap !important; color: var(--text-3) !important; }
    .hero-stat-label::after { content: ' -'; color: var(--text-5); margin-right: 2px; }

    .salon-cards-v2 { grid-template-columns: 1fr !important; gap: 10px !important; }
    .salon-card-body { padding: 10px 8px 12px !important; }
    .salon-card-icon { width: 38px !important; height: 38px !important; font-size: 18px !important; margin-bottom: 6px !important; }
    .salon-card-title { font-size: 13px !important; margin-bottom: 2px !important; }
    .salon-card-desc { font-size: 10px !important; margin-bottom: 8px !important; }
    .salon-card-stats { gap: 4px !important; }
    .sstat { padding: 3px 6px !important; font-size: 10px !important; }
    .salon-card-actions { opacity: 1 !important; top: 6px !important; left: 6px !important; gap: 4px !important; }
    .salon-act-btn { width: 24px !important; height: 24px !important; font-size: 11px !important; }

    /* ─── د) مودال سالن (لیست دستگاه‌ها) ─── */
    .dev-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* اصلاح باگ قبلی */
        align-items: center !important;
        gap: 6px !important;
        padding: 8px !important;
        border-radius: 10px !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
    }
    .dev-row > select {
        flex: 1 1 30% !important; max-width: 40% !important; min-width: 0 !important; width: 100% !important;
        height: 36px !important; font-size: 13px !important; padding: 0 4px !important; box-sizing: border-box !important;
    }
    .dev-row > .name-input {
        flex: 1 1 60% !important; min-width: 0 !important; width: 100% !important;
        height: 36px !important; font-size: 16px !important; padding: 0 8px !important; box-sizing: border-box !important;
    }
    .dev-row > .hw-wrap { flex: 1 1 auto !important; min-width: 0 !important; height: 36px !important; }
    .dev-row .hw-input { width: 100% !important; height: 36px !important; font-size: 14px !important; box-sizing: border-box !important; }
    .dev-row > .dev-remove { flex: 0 0 36px !important; width: 30px !important; height: 36px !important; font-size: 18px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; }
    .dev-list { gap: 8px !important; }

    /* ─── ه) ایموجی‌ها و محدوده‌ها (Thresholds) ─── */
    .emoji-category { grid-template-columns: repeat(8, 1fr) !important; gap: 4px !important; }
    .emoji-btn { font-size: 16px !important; min-height: 30px !important; padding: 0 !important; border-radius: 6px !important; }
    .sc-icon, .rc-icon, .ic-icon { font-size: 18px !important; }
    .sc-icon-wrap, .rc-icon-wrap, .ic-icon-wrap { width: 36px !important; height: 36px !important; }

    .thresholds-section { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; margin-top: 10px !important; padding-top: 10px !important; }
    .thresholds-section h4, .thresholds-section .threshold-preview { grid-column: 1 / -1 !important; }
    .thresholds-section .threshold-row { display: contents !important; }
    .threshold-row .field { margin: 0 !important; min-width: 0 !important; }
    .threshold-row .field label { font-size: 9px !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; margin-bottom: 4px !important; }
    .threshold-row .field input { padding: 4px 2px !important; font-size: 12px !important; text-align: center !important; height: 32px !important; width: 100% !important; box-sizing: border-box !important; }

    /* ─── و) مودال نمودار (Chart UI) ─── */
    /* هدر و بدنه */
    #chartModal .modal-header { padding: 8px 14px !important; }
    #chartModalTitle { font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    #chartModal .modal-close { width: 30px !important; height: 30px !important; font-size: 20px !important; }
    #chartModal .modal-body { display: flex !important; flex-direction: column !important; }
    #chartModal .chart-container { flex: 1 1 auto !important; height: auto !important; min-height: 280px !important; margin-bottom: 8px !important; }
    #chartModal .chart-info { flex-shrink: 0 !important; }

    /* آمار بالای نمودار */
    .chart-stats { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; width: 100% !important; margin-bottom: 10px !important; }
    .chart-stats .cs { padding: 6px 0 !important; border-radius: 8px !important; text-align: center !important; }
    .chart-stats .cs .l { font-size: 9px !important; margin-bottom: 2px !important; }
    .chart-stats .cs .v { font-size: 13px !important; }

    /* انتخاب تاریخ */
    .chart-custom-dates { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; width: 100% !important; margin-top: 8px !important; align-items: center !important; }
    .chart-custom-dates .chart-control-sep { display: none !important; }
    .chart-custom-dates .chart-input { width: 100% !important; height: 34px !important; font-size: 11px !important; padding: 0 2px !important; text-align: center !important; }
    .chart-custom-dates .btn { width: 100% !important; height: 34px !important; font-size: 12px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }

    /* تنظیمات Y */
    .chart-custom-controls { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; column-gap: 6px !important; row-gap: 10px !important; padding: 10px !important; border-radius: 10px !important; }
    .chart-custom-controls .chart-control-group { display: contents !important; }
    .chart-custom-controls .chart-control-label { display: none !important; }
    #chartYAxisMode { grid-column: 1 / 3 !important; grid-row: 1 / 2 !important; width: 100% !important; height: 34px !important; margin: 0 !important; }
    #chartToggleZones { grid-column: 3 / 4 !important; grid-row: 1 / 2 !important; width: 100% !important; height: 34px !important; margin: 0 !important; font-size: 11px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
    #chartYAxisManual { grid-column: 1 / 3 !important; grid-row: 2 / 3 !important; display: none; gap: 6px !important; margin: 0 !important; width: 100% !important; }
    #chartYAxisManual input { flex: 1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 34px !important; box-sizing: border-box !important; font-size: 13px !important; padding: 0 8px !important; text-align: center !important; border-radius: 8px !important; }
    #chartApplyY { grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; width: 100% !important; height: 34px !important; margin: 0 !important; font-size: 12px !important; display: none; align-items: center !important; justify-content: center !important; border-radius: 8px !important; }

    /* فواصل (Margins) */
    #chartModal .chart-toolbar { margin-bottom: 25px !important; }
    #chartModal .chart-custom-controls { margin-bottom: 25px !important; }
    #chartModal .chart-stats { margin-top: 6px !important; margin-bottom: 25px !important; }
    
    /* لوگوی لاگین در موبایل */
    .login-card .logo { width: 100px !important; height: 100px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RED DELETE BUTTON IN SALON MODAL (قرمز کردن دکمه حذف دستگاه)
   ═══════════════════════════════════════════════════════════════ */
.dev-row > .dev-remove,
.dev-row .dev-remove {
    color: var(--danger) !important; /* 👈 رنگ ضربدر را قرمز می‌کند */
    border-color: rgba(220, 38, 38, 0.4) !important; /* حاشیه قرمز کم‌رنگ */
    background: rgba(220, 38, 38, 0.05) !important; /* پس‌زمینه قرمز خیلی ملایم */
    transition: all 0.2s ease !important;
}

/* 👈 افکت هنگام بردن موس (در کامپیوتر) یا لمس کردن (در گوشی) */
.dev-row > .dev-remove:hover,
.dev-row > .dev-remove:active,
.dev-row .dev-remove:hover,
.dev-row .dev-remove:active {
    background: var(--danger) !important; /* پس‌زمینه کاملاً قرمز */
    border-color: var(--danger) !important;
    color: #ffffff !important; /* ضربدر سفید می‌شود */
    transform: scale(1.05); /* کمی بزرگ‌تر می‌شود */
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3); /* سایه قرمز زیبا */
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS TOOLBAR FLAT DESIGN (حذف کادر و هماهنگی با تب سنسورها)
   ═══════════════════════════════════════════════════════════════ */
.alerts-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    padding: 0 !important; /* 👈 حذف پدینگ */
    background: transparent !important; /* 👈 حذف پس‌زمینه */
    border: none !important; /* 👈 حذف حاشیه */
    border-radius: 0 !important;
    flex-wrap: wrap !important;
}

/* تنظیمات مخصوص موبایل برای قرارگیری در یک ردیف */
@media (max-width: 768px) {
    .alerts-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        padding: 0 !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
        margin-top: 4px !important;
    }

    .alerts-filters {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        flex: 1 1 0% !important;
        gap: 4px !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .alerts-filters::-webkit-scrollbar { display: none; }

    /* فشرده کردن فیلترها برای زیبایی بیشتر */
    .alert-filter {
        flex: 0 0 auto !important;
        padding: 5px 10px !important; 
        font-size: 11px !important;
        white-space: nowrap !important;
        background: var(--surface-2) !important; /* دادن پس‌زمینه ملایم به خود فیلتر */
        border-radius: 20px !important; /* گرد کردن فیلترها (کپسولی) */
    }

    .alert-filter.active {
        background: rgba(59,130,246,0.15) !important;
        border-color: var(--primary) !important;
    }

    .af-count {
        font-size: 10px !important;
        padding: 0 5px !important;
        min-width: 16px !important;
    }

    /* دکمه بروزرسانی */
    .alerts-toolbar .btn {
        flex: 0 0 auto !important;
        width: auto !important;
        height: 32px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PREMIUM FACTORY HERO HEADER (نسخه نهایی)
   ═══════════════════════════════════════════════════════════════ */
.dash-hero {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* 👈 جلوگیری قطعی از رفتن به خط بعد در دسکتاپ */
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: linear-gradient(145deg, var(--surface-2), var(--surface-3)) !important;
    border: 1px solid var(--border-2) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* سمت راست: نام کارخانه */
.dash-hero-main {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important; /* جلوگیری از سرریز شدن متن */
}

.dash-hero-icon {
    width: 48px !important; height: 48px !important; font-size: 24px !important;
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
}
.dash-hero-info h2 { font-size: 16px !important; margin-bottom: 4px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.dash-hero-info small { font-size: 11px !important; color: var(--text-4) !important; }

/* وسط: آمارها (۴ ستون) */
.dash-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    max-width: 600px !important; 
    margin: 0 auto !important; 
}

/* سمت چپ: دکمه سالن جدید */
#addSalonBtnDash {
    flex: 0 0 auto !important;
    background: var(--surface-4) !important;
    border: 1px solid var(--border-2) !important;
    color: var(--text-2) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    transition: all 0.2s !important;
}
#addSalonBtnDash:hover { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }

/* استایل کارت‌های آمار */
    
/* ۱. کشیدن آمارها تا پر کردن کل فضای خالی */
.dash-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    max-width: none !important; /* 👈 حذف محدودیت عرض */
    width: 100% !important;
    margin: 0 20px !important; 
}

/* ۲. اصلاح چیدمان داخلی کارت‌ها */
.hero-stat {
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    padding: 8px 12px !important;
    background: var(--surface-4) !important;
    border: 1px solid var(--border) !important; 
    border-radius: 10px !important;
    gap: 8px !important;
    min-width: 0 !important; /* 👈 اجازه کوچک شدن بدون سرریز */
    /* white-space: nowrap از اینجا حذف شد */
}

.hero-stat-icon { 
    font-size: 18px !important; 
    flex-shrink: 0 !important; /* آیکون هرگز فشرده نشود */
}

.hero-stat-content {
    display: flex !important;
    flex-direction: row !important; /* چیدمان عادی */
    align-items: center !important;
    gap: 6px !important; 
    white-space: nowrap !important; /* فقط متن‌ها نشکنند */
}

.hero-stat-value { 
    font-size: 15px !important; 
    font-weight: 800 !important; 
    color: var(--text) !important; 
}

.hero-stat-label { 
    font-size: 12px !important; 
    color: var(--text-3) !important; 
}

.hero-stat-label::after {
    content: ' -';
    color: var(--text-5);
    margin-right: 2px;
}
    
.hero-stat:nth-child(1) { border-bottom: 3px solid #3b82f6; } /* سالن */
.hero-stat:nth-child(2) { border-bottom: 3px solid #06b6d4; } /* سنسور */
.hero-stat:nth-child(3) { border-bottom: 3px solid #22c55e; } /* رله */
.hero-stat:nth-child(4) { border-bottom: 3px solid #f59e0b; } /* ورودی */

/* ═══════════════════════════════════════════════════════════════
   تنظیمات مخصوص موبایل (سطر اول: نام+دکمه، سطر دوم: آمار)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .dash-hero {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas: 
            "info button"   /* سطر اول */
            "stats stats" !important; /* سطر دوم */
        gap: 12px !important;
        padding: 12px !important;
        flex-wrap: wrap !important; /* اجازه تغییر چیدمان در موبایل */
    }
    
    .dash-hero-main { grid-area: info !important; }
    
    #addSalonBtnDash { 
        grid-area: button !important; 
        padding: 4px 8px !important; 
        font-size: 11px !important; 
        height: 30px !important;
        align-self: center !important;
    }
    
    .dash-hero-stats {
        grid-area: stats !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* 👈 مخفی کردن آیکون‌های آمار در موبایل */
    .hero-stat-icon {
        display: none !important;
    }

    /* اصلاح چیدمان کارت‌ها بدون آیکون (مقدار و برچسب وسط‌چین) */
    .hero-stat {
        flex-direction: column !important; 
        padding: 8px 4px !important; /* کمی افزایش پدینگ برای پر کردن فضای خالی آیکون */
        gap: 0 !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .hero-stat-content {
        flex-direction: column !important; /* مقدار بالای برچسب قرار بگیرد */
        justify-content: center !important;
        align-items: center !important;
        gap: 2px !important;
        width: 100% !important;
    }

    .hero-stat-value { 
        font-size: 14px !important; 
        font-weight: 800 !important; 
        color: var(--text) !important;
    }
    
    .hero-stat-label { 
        font-size: 10px !important; 
        color: var(--text-4) !important; 
    }
    
    .hero-stat-label::after {
        display: none !important; /* حذف خط تیره در موبایل */
    }
}

@media (max-width: 768px) {
    /* 👈 ۱. مخفی کردن کامل آیکون کاربر در موبایل */
    .user-badge {
        display: none !important; 
    }

    /* 👈 ۲. نمایش دکمه تغییر رمز و هم‌اندازه کردن آن با بقیه دکمه‌ها */
    #changePwBtn {
        display: flex !important; /* اجبار به نمایش در موبایل */
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: var(--surface-3) !important;
        
        /* حفظ رنگ زرد/نارنجی هشداردهنده برای دکمه رمز */
        color: var(--warning) !important;
        border: 1px solid var(--warning) !important;
        transition: all 0.2s !important;
    }

    #changePwBtn:hover, 
    #changePwBtn:active {
        background: rgba(234, 179, 8, 0.15) !important;
    }
}