@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--color-bg-primary:#050505;--color-bg-secondary:#141414d9;--color-bg-tertiary:#0a0a0abf;--color-bg-elevated:#191919cc;--color-bg-hover:#1e1e1ee6;--color-bg-input:#0000004d;--glass-bg:#0a0a0abf;--glass-bg-light:#19191999;--glass-border:1px solid #ffffff14;--glass-shadow:0 8px 32px #00000073, 0 1px 0 #ffffff0d inset;--glass-backdrop:blur(16px) saturate(180%);--color-border:#ffffff14;--color-border-light:#ffffff24;--color-border-focus:#ffffff59;--color-accent:#6b7280;--color-accent-hover:#9ca3af;--color-accent-glow:#ffffff14;--color-accent-muted:#ffffff0d;--color-success:#22c55e;--color-success-bg:#22c55e1f;--color-warning:#f59e0b;--color-warning-bg:#f59e0b1f;--color-danger:#ef4444;--color-danger-bg:#ef44441f;--color-info:#06b6d4;--color-info-bg:#06b6d41f;--color-text-primary:#ffffffeb;--color-text-secondary:#ffffff8c;--color-text-tertiary:#ffffff4d;--color-text-inverse:#050505;--font-family:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", monospace;--font-size-xs:.75rem;--font-size-sm:.8125rem;--font-size-base:.875rem;--font-size-md:.9375rem;--font-size-lg:1.0625rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:var(--glass-shadow);--sidebar-width:260px;--header-height:56px;--transition-fast:.12s ease;--transition-base:.22s ease}[data-theme=preto]{--color-bg-primary:#000;--color-bg-secondary:#0a0a0ae6;--color-bg-tertiary:#000000e6;--color-bg-elevated:#0a0a0ab3;--color-bg-hover:#191919f2;--color-border:#ffffff14;--color-border-light:#ffffff29;--color-accent:#fff;--color-text-primary:#fffffff5;--color-text-secondary:#ffffffb3;--color-text-tertiary:#ffffff73;--glass-bg:#000000e6;--glass-bg-light:#0a0a0ab3}[data-theme=navy-profundo]{--color-bg-primary:#060810;--color-bg-secondary:#0c1020d9;--color-bg-tertiary:#060810cc;--color-bg-elevated:#0f142899;--color-bg-hover:#19213ce6;--color-border:#ffffff0f;--color-border-light:#ffffff1f;--color-accent:#3a506b;--color-text-primary:#ffffffeb;--color-text-secondary:#fff9;--color-text-tertiary:#ffffff59;--glass-bg:#060810cc;--glass-bg-light:#0f142899}[data-theme=dark-navy]{--color-bg-primary:#0c0f1d;--color-bg-secondary:#14192dd9;--color-bg-tertiary:#0c0f1dcc;--color-bg-elevated:#14192d99;--color-bg-hover:#232d4be6;--color-border:#ffffff12;--color-border-light:#ffffff24;--color-accent:#3a506b;--color-text-primary:#ffffffeb;--color-text-secondary:#ffffffa6;--color-text-tertiary:#fff6;--glass-bg:#0c0f1dcc;--glass-bg-light:#14192d99}[data-theme=navy-mid]{--color-bg-primary:#171e31;--color-bg-secondary:#1c253ad9;--color-bg-tertiary:#171e31cc;--color-bg-elevated:#1e284199;--color-bg-hover:#2d3a5ae6;--color-border:#ffffff14;--color-border-light:#ffffff29;--color-accent:#3a506b;--color-text-primary:#ffffffeb;--color-text-secondary:#ffffffa6;--color-text-tertiary:#fff6;--glass-bg:#171e31cc;--glass-bg-light:#1e284199}[data-theme=roxo-escuro]{--color-bg-primary:#1b0d24;--color-bg-secondary:#2a1538d9;--color-bg-tertiary:#1b0d24cc;--color-bg-elevated:#28143799;--color-bg-hover:#3a1e4ee6;--color-border:#ffffff14;--color-border-light:#ffffff29;--color-accent:#701a75;--color-text-primary:#ffffffeb;--color-text-secondary:#ffffffa6;--color-text-tertiary:#ffffff61;--glass-bg:#1b0d24cc;--glass-bg-light:#28143799}[data-theme=roxo-medio]{--color-bg-primary:#311145;--color-bg-secondary:#4b1c69d9;--color-bg-tertiary:#311145cc;--color-bg-elevated:#46196499;--color-bg-hover:#5f2684e6;--color-border:#ffffff17;--color-border-light:#ffffff2e;--color-accent:#86198f;--color-text-primary:#ffffffeb;--color-text-secondary:#ffffffa6;--color-text-tertiary:#fff6;--glass-bg:#311145cc;--glass-bg-light:#46196499}[data-theme=azul-navy]{--color-bg-primary:#172554;--color-bg-secondary:#1e294bd9;--color-bg-tertiary:#172554cc;--color-bg-elevated:#23377899;--color-bg-hover:#2d3c6ee6;--color-border:#ffffff17;--color-border-light:#ffffff2e;--color-accent:#3b82f6;--color-text-primary:#ffffffeb;--color-text-secondary:#ffffffa6;--color-text-tertiary:#fff6;--glass-bg:#172554cc;--glass-bg-light:#23377899}[data-theme=azul-outline]{--color-bg-primary:#273549;--color-bg-secondary:#304058d9;--color-bg-tertiary:#273549cc;--color-bg-elevated:#32445d99;--color-bg-hover:#415573e6;--color-border:#ffffff17;--color-border-light:#ffffff2e;--color-accent:#5c7a9e;--color-text-primary:#ffffffeb;--color-text-secondary:#ffffffa6;--color-text-tertiary:#fff6;--glass-bg:#273549cc;--glass-bg-light:#32445d99}[data-theme=teal-escuro]{--color-bg-primary:#0f526b;--color-bg-secondary:#145f7ad9;--color-bg-tertiary:#0f526bcc;--color-bg-elevated:#19698799;--color-bg-hover:#1e7896e6;--color-border:#ffffff1a;--color-border-light:#fff3;--color-accent:#1f8a70;--color-text-primary:#ffffffeb;--color-text-secondary:#ffffffad;--color-text-tertiary:#ffffff6b;--glass-bg:#0f526bcc;--glass-bg-light:#19698799}[data-theme=teal-medio]{--color-bg-primary:#147a64;--color-bg-secondary:#1c8c74d9;--color-bg-tertiary:#147a64cc;--color-bg-elevated:#1e917899;--color-bg-hover:#28a58ae6;--color-border:#ffffff1c;--color-border-light:#ffffff38;--color-accent:#2ec4b6;--color-text-primary:#ffffffeb;--color-text-secondary:#ffffffad;--color-text-tertiary:#ffffff6b;--glass-bg:#147a64cc;--glass-bg-light:#1e917899}[data-theme=teal-claro]{--color-bg-primary:#e6f7f4;--color-bg-secondary:#ffffffd1;--color-bg-tertiary:#ffffffd9;--color-bg-elevated:#ffffffa6;--color-bg-hover:#14b89914;--color-border:#14b8992e;--color-border-light:#14b89959;--color-accent:#14b899;--color-text-primary:#0a3a30;--color-text-secondary:#175e50;--color-text-tertiary:#3b8c7c;--color-text-inverse:#fff;--glass-bg:#ffffffd9;--glass-bg-light:#ffffffa6;--glass-border:1px solid #14b89933;--glass-shadow:0 8px 32px #14b8990d}[data-theme=branco],[data-theme=light]{--color-bg-primary:#f8fafc;--color-bg-secondary:#ffffffd9;--color-bg-tertiary:#ffffffd1;--color-bg-elevated:#fff9;--color-bg-hover:#0f172a0d;--color-border:#0f172a1a;--color-border-light:#0f172a33;--color-accent:#475569;--color-text-primary:#0f172a;--color-text-secondary:#334155;--color-text-tertiary:#64748b;--color-text-inverse:#fff;--glass-bg:#ffffffd1;--glass-bg-light:#fff9;--glass-border:1px solid #0f172a1f;--glass-shadow:0 8px 32px #0f172a0f, 0 1px 0 #fff9 inset}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%;font-size:16px}body{height:100%;font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text-primary);background:var(--color-bg-primary);min-height:100vh;line-height:1.5;position:relative;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background-image:radial-gradient(80% 50% at 20% 10%,#3b82f60a 0%,#0000 60%),radial-gradient(60% 40% at 80% 80%,#14b89908 0%,#0000 60%);position:fixed;inset:0}.flex-row{flex-direction:row}.h-screen{height:100vh}.w-screen{width:100vw}.w-full{width:100%}.overflow-hidden{overflow:hidden}.bg-\[\#050505\]{background-color:#050505}#root{z-index:1;flex-direction:column;height:100%;min-height:100vh;display:flex;position:relative}a{color:var(--color-accent);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-accent-hover)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:#ffffff38}.app-layout{min-height:100vh;display:flex}.main-header{z-index:200;height:38px;-webkit-backdrop-filter:var(--glass-backdrop);-webkit-user-select:none;user-select:none;background:#050505eb;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:0 8px;display:flex;position:fixed;top:0;left:0;right:0;box-shadow:0 1px #ffffff0a}.header-left{align-items:center;gap:10px;display:flex}.sidebar-toggle-btn{color:#ffffffbf;cursor:pointer;background:0 0;border:none;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;padding:0;transition:all .2s ease-in-out;display:flex}.sidebar-toggle-btn:hover{color:#fff;background:#ffffff1a}.sidebar-toggle-btn svg{flex-shrink:0;width:14px;height:14px;display:block}.header-user-btn{color:#ffffffd9;cursor:pointer;height:28px;transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);background:0 0;border:1px solid #ffffff26;border-radius:7px;flex-shrink:0;align-items:center;gap:6px;padding:4px 8px;display:flex}.header-user-btn:hover{color:#fff;background:#ffffff1a;border-color:#ffffff4d}.header-logo{cursor:default;align-items:center;gap:8px;display:flex}.logo-text{text-transform:uppercase;letter-spacing:-.03em;color:#fff;font-size:13px;font-weight:900}.logo-text .logo-muted{color:#fff6}.sidebar{width:var(--sidebar-width);background:var(--color-bg-secondary);border-right:1px solid var(--color-border);z-index:100;transition:transform var(--transition-base), opacity var(--transition-base);-webkit-backdrop-filter:var(--glass-backdrop);box-shadow:var(--glass-shadow);flex-direction:column;display:flex;position:fixed;top:38px;bottom:0;left:0;overflow:hidden}.sidebar.hidden{opacity:0;pointer-events:none;transform:translate(-100%)}.sidebar-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);align-items:center;gap:var(--space-3);height:var(--header-height);display:flex}.sidebar-logo{font-size:var(--font-size-lg);color:var(--color-text-primary);letter-spacing:-.02em;font-weight:700}.sidebar-logo span{color:var(--color-accent-hover)}.sidebar-nav{padding:var(--space-3) var(--space-3);flex:1;overflow-y:auto}.nav-section{margin-bottom:var(--space-4)}.nav-section-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);padding:var(--space-1) var(--space-3);margin-bottom:var(--space-1);font-weight:600}.nav-item{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--font-size-md);cursor:pointer;transition:all var(--transition-fast);text-align:left;background:0 0;border:none;width:100%;text-decoration:none;display:flex}.nav-item:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.nav-item.active{background:var(--color-accent-muted);color:var(--color-accent)}.nav-item-icon{opacity:.7;flex-shrink:0;width:18px;height:18px}.nav-item.active .nav-item-icon{opacity:1}.main-content{min-width:0;height:100%;margin-left:var(--sidebar-width);transition:margin-left var(--transition-base);flex:1;padding-top:38px;overflow:hidden auto}.main-content.sidebar-collapsed{margin-left:0}.page-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);background:var(--color-bg-secondary);z-index:50;-webkit-backdrop-filter:var(--glass-backdrop);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.page-title{font-size:var(--font-size-xl);color:var(--color-text-primary);font-weight:600}.page-body{padding:var(--space-6);z-index:1;flex:1;min-height:0;position:relative;overflow-y:auto!important}.card,.stat-card,.device-item-card,.customer-group-card,.login-card,.telemetry-card-clickable{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-sizing:border-box;transition:border-color var(--transition-fast), box-shadow var(--transition-fast);-webkit-backdrop-filter:var(--glass-backdrop);box-shadow:var(--glass-shadow);flex-shrink:0;height:auto!important;min-height:min-content!important;max-height:none!important;overflow:visible!important}.card:hover{border-color:var(--color-border-hover)}.card-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.card-title{font-size:var(--font-size-md);color:var(--color-text-primary);font-weight:600}.card-body{padding:var(--space-5)}.stats-grid{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.stat-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);transition:all var(--transition-fast);-webkit-backdrop-filter:var(--glass-backdrop);box-shadow:var(--glass-shadow)}.stat-card:hover{border-color:var(--color-border-hover);box-shadow:var(--glass-shadow), 0 0 12px var(--color-accent-glow);transform:translateY(-1px)}.stat-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2)}.stat-value{font-size:var(--font-size-2xl);color:var(--color-text-primary);font-variant-numeric:tabular-nums;font-weight:700}.stat-value.success{color:var(--color-success)}.stat-value.warning{color:var(--color-warning)}.stat-value.danger{color:var(--color-danger)}.stat-value.info{color:var(--color-info)}.badge{align-items:center;gap:var(--space-1);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.04em;border-radius:9999px;flex-shrink:0;padding:3px 8px;font-weight:600;line-height:1.3;display:inline-flex}.badge-online{background:var(--color-success-bg);color:var(--color-success)}.badge-offline{background:var(--color-danger-bg);color:var(--color-danger)}.badge-warning{background:var(--color-warning-bg);color:var(--color-warning)}.badge-info{background:var(--color-info-bg);color:var(--color-info)}.badge-dot{background:currentColor;border-radius:50%;width:6px;height:6px}.badge-online .badge-dot{animation:2s infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.table-container{overflow-x:auto}.data-table{border-collapse:collapse;width:100%;font-size:var(--font-size-md)}.data-table th{text-align:left;padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border);background:var(--color-bg-tertiary);white-space:nowrap;font-weight:600;position:relative}.resizable-th{position:relative}.resizer-handle{cursor:col-resize;-webkit-user-select:none;user-select:none;z-index:10;width:6px;height:100%;transition:border-color var(--transition-fast), background var(--transition-fast);border-right:1px solid #0000;position:absolute;top:0;right:0}.resizer-handle:hover,.resizer-handle.resizing{background:var(--color-accent);border-right:1px solid var(--color-accent-hover)}.data-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);color:var(--color-text-primary);white-space:nowrap}.data-table tr{transition:background var(--transition-fast)}.data-table tbody tr:hover{background:var(--color-bg-hover)}.data-table .mono{font-family:var(--font-mono);font-size:var(--font-size-sm)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-md);cursor:pointer;transition:all var(--transition-fast);font-weight:500;font-family:var(--font-family);white-space:nowrap;border:1px solid #0000;line-height:1.4;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent);box-shadow:0 0 20px var(--color-accent-glow)}.btn-primary:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover);box-shadow:0 0 28px var(--color-accent-glow);transform:translateY(-1px)}.btn-secondary{background:var(--color-bg-tertiary);color:var(--color-text-primary);border-color:var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-bg-hover);border-color:var(--color-border-light)}.btn-danger{background:var(--color-danger-bg);color:var(--color-danger);border-color:#f851494d}.btn-danger:hover:not(:disabled){background:#f8514933}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm)}.btn-icon{padding:var(--space-2);aspect-ratio:1}.form-group{margin-bottom:var(--space-4)}.form-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-1);font-weight:500;display:block}.form-input{width:100%;padding:var(--space-2) var(--space-3);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-md);font-family:var(--font-family);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none}.form-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-glow)}.form-input::placeholder{color:var(--color-text-tertiary)}textarea.form-input{resize:vertical;min-height:120px;font-family:var(--font-mono);font-size:var(--font-size-sm)}.login-container{background:var(--color-bg-primary);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{width:100%;max-width:380px;padding:var(--space-8);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.login-header{text-align:center;margin-bottom:var(--space-6)}.login-title{font-size:var(--font-size-2xl);margin-bottom:var(--space-2);font-weight:700}.login-title span{color:var(--color-accent)}.login-subtitle{font-size:var(--font-size-md);color:var(--color-text-secondary)}.login-error{background:var(--color-danger-bg);color:var(--color-danger);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);margin-bottom:var(--space-4);border:1px solid #f8514933}.login-btn{width:100%;padding:var(--space-3);font-size:var(--font-size-md);font-weight:600}.text-muted{color:var(--color-text-secondary)}.text-sm{font-size:var(--font-size-sm)}.text-mono{font-family:var(--font-mono)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mb-4{margin-bottom:var(--space-4)}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.flex-1{flex:1}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:.3s ease-out forwards fade-in}.mobile-back-btn{margin-bottom:var(--space-3);color:var(--color-accent);cursor:pointer;font-size:var(--font-size-sm);background:0 0;border:none;align-items:center;gap:4px;padding:0;font-weight:600;display:none}.mobile-back-btn:hover{color:var(--color-accent-hover)}.sidebar-overlay-backdrop{display:none}@media (width<=768px){.sidebar-overlay-backdrop{display:block!important}.sidebar{z-index:10000!important;opacity:1!important;pointer-events:auto!important;width:260px!important;position:fixed!important;top:38px!important;bottom:0!important;left:0!important;transform:translate(0)!important;box-shadow:0 0 20px #000000b3!important}.sidebar.hidden{opacity:0!important;pointer-events:none!important;box-shadow:none!important;transform:translate(-100%)!important}.main-content{width:100%!important;margin-left:0!important}.stats-grid{gap:var(--space-3);grid-template-columns:repeat(2,1fr)!important}.devices-split-layout{flex-direction:column!important;height:100%!important}.devices-sidebar{flex:1!important;width:100%!important;height:100%!important}.devices-detail-panel{flex:1!important;width:100%!important;height:100%!important;display:none!important}.devices-split-layout.has-selection .devices-sidebar{display:none!important}.devices-split-layout.has-selection .devices-detail-panel,.mobile-back-btn{display:flex!important}.device-detail-header{padding:var(--space-4) var(--space-4)!important;gap:var(--space-3)!important;flex-direction:column!important;align-items:flex-start!important}.device-detail-tabs-nav{-webkit-overflow-scrolling:touch;white-space:nowrap!important;width:100%!important;padding:0 8px!important;display:flex!important;overflow-x:auto!important}.tab-nav-btn{flex:none!important;padding:8px 12px!important}}@media (width<=576px){.header-date,.header-date-divider{display:none!important}}.modal-overlay,.modal-backdrop{-webkit-backdrop-filter:blur(6px);padding:var(--space-4);background:#000000bf;justify-content:center;align-items:center;animation:.2s ease-out fade-in;display:flex;position:fixed;inset:0;overflow-y:auto;z-index:10000!important}.modal-content,.modal{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);z-index:10001;flex-direction:column;width:100%;max-height:calc(100vh - 60px);margin:auto;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 40px #00000080,0 0 0 1px #ffffff14}.modal-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.modal-title{font-size:var(--font-size-lg);color:var(--color-text-primary);font-weight:600}.modal-close{color:var(--color-text-secondary);cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.modal-close:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.modal-body{padding:var(--space-5);flex:1;overflow-y:auto}.modal-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);justify-content:flex-end;align-items:center;gap:var(--space-3);background:var(--color-bg-tertiary);flex-shrink:0;display:flex}.devices-split-layout{width:100%;height:100%;display:flex;overflow:hidden}.devices-sidebar{border-right:1px solid var(--color-border);background:var(--color-bg-secondary);flex-direction:column;flex-shrink:0;width:320px;height:100%;display:flex}.devices-search-box{padding:var(--space-4);border-bottom:1px solid var(--color-border);gap:var(--space-2);flex-direction:column;display:flex}.devices-list{padding:var(--space-3);gap:var(--space-2);flex-direction:column;flex:1;display:flex;overflow-y:auto}.devices-list:after{content:"";height:var(--space-3);flex-shrink:0;display:block}.device-item-card{padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg-tertiary);cursor:pointer;transition:all var(--transition-fast);text-align:left;width:100%}.device-item-card:hover{background:var(--color-bg-hover);border-color:var(--color-border-light)}.device-item-card.active{border-color:var(--color-accent);background:var(--color-accent-muted)}.device-item-header{justify-content:space-between;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);display:flex}.device-item-name{color:var(--color-text-primary);font-weight:600;font-size:var(--font-size-base);min-width:0}.device-item-meta{font-size:var(--font-size-sm);color:var(--color-text-secondary);word-break:break-word;overflow-wrap:anywhere;flex-direction:column;gap:4px;line-height:1.45;display:flex}.devices-detail-panel{background:var(--color-bg-primary);flex-direction:column;flex:1;min-width:0;height:100%;display:flex;overflow-y:auto!important}.detail-placeholder{height:100%;color:var(--color-text-secondary);justify-content:center;align-items:center;display:flex}.device-detail-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);background:var(--color-bg-secondary);z-index:20;flex-shrink:0;justify-content:space-between;align-items:flex-start;display:flex;position:sticky;top:0}.device-detail-title-area{gap:var(--space-1);flex-direction:column;display:flex}.device-detail-title{font-size:var(--font-size-xl);color:var(--color-text-primary);font-weight:700}.device-detail-tabs-nav{border-bottom:1px solid var(--color-border);background:var(--color-bg-tertiary);padding:0 var(--space-4);z-index:19;flex-shrink:0;display:flex;position:sticky;top:57px}.tab-nav-btn{padding:var(--space-3) var(--space-4);color:var(--color-text-secondary);font-weight:500;font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-bottom:2px solid #0000}.tab-nav-btn:hover{color:var(--color-text-primary)}.tab-nav-btn.active{color:var(--color-accent-hover);border-bottom-color:var(--color-accent)}.device-detail-tab-content{padding:var(--space-6);gap:var(--space-5);flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto!important}.device-detail-tab-content:after{content:"";height:var(--space-6);flex-shrink:0;display:block}.metric-progress-wrapper{margin-bottom:var(--space-4)}.metric-progress-label{margin-bottom:var(--space-1);font-size:var(--font-size-sm);justify-content:space-between;display:flex}.metric-progress-bg{background:var(--color-bg-input);border-radius:var(--radius-sm);border:1px solid var(--color-border);height:8px;overflow:hidden}.metric-progress-fill{border-radius:var(--radius-sm);height:100%;transition:width .3s}.metric-progress-fill.success{background:var(--color-success)}.metric-progress-fill.warning{background:var(--color-warning)}.metric-progress-fill.danger{background:var(--color-danger)}.detail-grid-info{gap:var(--space-5);margin-bottom:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));display:grid}.telemetry-charts-grid{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.telemetry-card-clickable{transition:border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast)}.telemetry-card-clickable:hover{transform:translateY(-2px);border-color:var(--color-accent)!important;box-shadow:0 4px 20px var(--color-accent-glow)!important}@media (width<=1100px){.telemetry-charts-grid{grid-template-columns:1fr}}.mini-chart-wrapper{flex-direction:column;display:flex}.mini-chart-header{justify-content:space-between;align-items:baseline;margin-bottom:4px;padding:0 2px;display:flex}.mini-chart-label{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em;font-weight:600}.mini-chart-value{font-size:var(--font-size-md);font-weight:700;font-family:var(--font-mono);font-variant-numeric:tabular-nums}.terminal-console{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--font-size-sm);color:#22c55e;white-space:pre-wrap;height:280px;margin-top:var(--space-3);background:#000;overflow-y:auto;box-shadow:inset 0 0 10px #000c}.ip-filter-toggle{background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);gap:1px;padding:2px;display:inline-flex;overflow:hidden}.ip-filter-btn{font-size:var(--font-size-xs);font-weight:500;font-family:var(--font-family);color:var(--color-text-secondary);cursor:pointer;border-radius:calc(var(--radius-md) - 2px);transition:all var(--transition-fast);background:0 0;border:none;padding:2px 10px;line-height:1.6}.ip-filter-btn:hover{color:var(--color-text-primary);background:var(--color-bg-hover)}.ip-filter-btn.active{background:var(--color-accent);color:#fff;box-shadow:0 1px 4px #0000004d}.ip-chips-container{flex-wrap:wrap;gap:6px;margin-top:2px;display:flex}.ip-chip{font-size:var(--font-size-xs);border:1px solid var(--color-border);background:var(--color-bg-tertiary);color:var(--color-text-primary);word-break:break-all;border-radius:9999px;padding:3px 10px;line-height:1.5;display:inline-block}.ip-chip-v4{color:var(--color-success);background:#22c55e14;border-color:#22c55e40}.ip-chip-v6{color:var(--color-info);background:#06b6d414;border-color:#06b6d440}.ip-chip-public{color:var(--color-warning);background:#f59e0b1a;border-color:#f59e0b4d}.ip-chip-dns{color:#a884f6;font-size:var(--font-size-xs);background:#a884f61a;border-color:#a884f64d}.customer-group-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:border-color .15s;overflow:hidden}.customer-group-card:hover{border-color:var(--color-border-light)}.customer-group-header{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;min-height:44px;padding:10px 14px;transition:background .15s;display:flex}.customer-group-header:hover{background:var(--color-bg-hover)}.customer-group-name{color:var(--color-text-primary);white-space:nowrap;font-size:13px;font-weight:600}.customer-group-stats{flex-shrink:0;align-items:center;gap:6px;display:flex}.customer-group-actions{flex-shrink:0;align-items:center;gap:4px;margin-left:auto;display:flex}.customer-group-devices{border-top:1px solid var(--color-border);background:#0003}.customer-group-devices .data-table thead tr th{background:0 0;padding-left:20px;font-size:10px}.customer-group-devices .data-table tbody tr td{padding-left:20px}.customer-group-devices .data-table tbody tr:last-child td{border-bottom:none}.customer-group-empty{color:var(--color-text-tertiary);align-items:center;padding:16px 20px;font-size:12px;display:flex}.sidebar-overlay-backdrop{-webkit-backdrop-filter:blur(2px);z-index:90;background-color:#0000008c;transition:opacity .2s;position:fixed;inset:38px 0 0}@media (width<=768px){.header-date,.header-date-divider,.header-username{display:none!important}.sidebar{width:260px;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:10000!important}.sidebar-overlay-backdrop{-webkit-backdrop-filter:blur(4px);z-index:990;background-color:#000000a6!important}.page-body{padding:var(--space-4)!important}.stats-grid{gap:var(--space-3)!important;grid-template-columns:repeat(2,1fr)!important}.stat-card{padding:var(--space-3)!important}.stat-value{font-size:20px!important}.table-container{-webkit-overflow-scrolling:touch;border-radius:var(--radius-md);width:100%;overflow-x:auto!important}.data-table th.mobile-hide,.data-table td.mobile-hide{display:none!important}.form-input,.form-select,select,input[type=text],input[type=number],input[type=password]{min-height:40px!important;font-size:14px!important}.btn{min-height:40px!important;padding:8px 16px!important;font-size:13px!important}.btn-xs,.btn-sm{min-height:32px!important;padding:4px 8px!important;font-size:11px!important}.modal-content{width:92%!important;margin:16px auto!important;padding:16px!important}}@media (width<=480px){.page-header{flex-direction:column;gap:8px;padding:var(--space-4)!important;align-items:flex-start!important}.page-title{font-size:18px!important}.page-header button{justify-content:center;width:100%}}.card,.stat-card,.device-item-card,.customer-group-card,.login-card,.telemetry-card-clickable,.modal-content{box-sizing:border-box!important;flex-shrink:0!important;max-width:100%!important;height:auto!important;min-height:min-content!important;max-height:none!important;overflow:visible!important}.card-body,.card-header,.card-footer{box-sizing:border-box!important;height:auto!important;min-height:min-content!important}.form-input,.form-control,input.form-input,select.form-input{box-sizing:border-box!important;height:auto!important;min-height:36px!important}