@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');*{ margin:0; padding:0; box-sizing:border-box;}:focus-visible{ outline:2px solid var(--primary-color, #1a56db); outline-offset:2px;}:root{ --primary-color:#1a56db; --secondary-color:#0e3a8c; --success-color:#059669; --warning-color:#d97706; --danger-color:#dc2626; --info-color:#2563eb; --light-color:#f5f7fa; --dark-color:#1f2937; --border-color:#e2e5ea; --text-color:#111827; --text-muted:#6b7280; --shadow:0 1px 3px rgba(0, 0, 0, 0.08); --shadow-hover:0 4px 12px rgba(0, 0, 0, 0.1); --border-radius:8px; --transition:all 0.2s ease; --bg-card:#ffffff; --bg-surface:#f5f7fa; --bg-body-start:#eef1f5; --bg-body-end:#eef1f5; --navbar-bg:#ffffff; --input-bg:#ffffff;}[data-theme="dark"]{ --primary-color:#4b83f0; --light-color:#1e2130; --dark-color:#f0f1f3; --border-color:#3b4058; --text-color:#f0f1f3; --text-muted:#a8adb8; --warning-color:#d97706; --shadow:0 1px 4px rgba(0, 0, 0, 0.4); --shadow-hover:0 4px 16px rgba(0, 0, 0, 0.5); --bg-card:#1e2130; --bg-surface:#171a26; --bg-body-start:#0d0f18; --bg-body-end:#0d0f18; --navbar-bg:#1e2130; --input-bg:#2a2e40;}body{ font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background:var(--bg-body-start); min-height:100vh; color:var(--text-color); line-height:1.6;}.flash-messages{ position:fixed; top:20px; right:20px; z-index:1000; max-width:400px;}.flash-message{ padding:12px 16px; margin-bottom:10px; border-radius:6px; box-shadow:var(--shadow); display:flex; justify-content:space-between; align-items:center; animation:slideIn 0.3s ease; transition:opacity 0.5s ease; border:1px solid var(--border-color);}.flash-success{ background:#ecfdf5; color:#065f46; border-left:3px solid var(--success-color);}.flash-error{ background:#fef2f2; color:#991b1b; border-left:3px solid var(--danger-color);}.flash-info{ background:#eff6ff; color:#1e40af; border-left:3px solid var(--info-color);}.close-flash{ background:none; border:none; font-size:18px; cursor:pointer; margin-left:10px; opacity:0.5;}.close-flash:hover{ opacity:1;}@keyframes slideIn{ from{ transform:translateX(100%); opacity:0;} to{ transform:translateX(0); opacity:1;}}.navbar{ background:var(--navbar-bg); border-bottom:1px solid var(--border-color); padding:0; position:sticky; top:0; z-index:100;}.nav-container{ max-width:100%; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:6px 20px;}.nav-brand{ display:flex; align-items:center; gap:12px;}.nav-brand-link{ display:flex; align-items:center; text-decoration:none;}.nav-logo{ height:24px; width:auto; object-fit:contain;}.nav-brand h2{ color:var(--primary-color); font-size:1em; font-weight:600;}.nav-menu{ display:flex; align-items:center; gap:16px;}.nav-link{ color:var(--text-color); text-decoration:none; padding:6px 12px; border-radius:6px; font-size:0.875rem; font-weight:500; transition:var(--transition);}.nav-link:hover{ background:var(--light-color); color:var(--primary-color);}.nav-dropdown{ position:relative;}.nav-dropdown-btn{ background:none; border:none; padding:6px 12px; cursor:pointer; border-radius:6px; font-size:0.875rem; transition:var(--transition);}.nav-dropdown-btn:hover{ background:var(--light-color);}.nav-dropdown-content{ position:absolute; top:100%; right:0; background:var(--bg-card); min-width:160px; box-shadow:var(--shadow-hover); border:1px solid var(--border-color); border-radius:6px; padding:4px 0; display:none; z-index:1000;}.nav-dropdown:hover .nav-dropdown-content{ display:block;}.nav-dropdown-content a{ display:block; padding:8px 14px; color:var(--text-color); text-decoration:none; font-size:0.875rem; transition:var(--transition);}.nav-dropdown-content a:hover{ background:var(--light-color);}.nav-user{ display:flex; align-items:center; gap:8px;}.user-name{ font-weight:600; font-size:0.8rem;}.user-role{ color:var(--text-muted); font-size:0.75rem;}.logout-btn{ background:transparent; color:var(--text-muted); text-decoration:none; padding:6px 12px; border-radius:6px; font-size:0.8rem; font-weight:500; border:1px solid var(--border-color); transition:var(--transition);}.logout-btn:hover{ color:var(--danger-color); border-color:var(--danger-color); background:#fef2f2;}[data-theme="dark"] .logout-btn:hover{ background:rgba(220, 38, 38, 0.1);}.main-content{ padding:1% 1.5%; max-width:100%; margin:0 auto;}.login-container{ display:flex; justify-content:center; align-items:center; min-height:100vh; padding:20px;}.login-card{ background:var(--bg-card); border-radius:8px; padding:36px; box-shadow:var(--shadow-hover); border:1px solid var(--border-color); max-width:800px; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:36px; overflow:hidden;}.login-header{ text-align:center;}.logo{ margin-bottom:24px;}.logo-icon{ font-size:2.5em; margin-bottom:8px;}.login-header h1{ color:var(--text-color); font-size:1.75em; font-weight:700; margin-bottom:8px;}.login-header p{ color:var(--text-muted); font-size:0.95em;}.login-form{ display:flex; flex-direction:column; gap:16px;}.form-group{ display:flex; flex-direction:column;}.form-group label{ color:var(--text-color); font-weight:600; font-size:0.875rem; margin-bottom:6px;}.form-group input{ width:100%; padding:10px 12px; border:1px solid var(--border-color); border-radius:6px; font-size:0.9375rem; font-family:inherit; transition:var(--transition); background:var(--input-bg); color:var(--text-color);}.form-group input:focus{ outline:none; border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(26, 86, 219, 0.1);}.login-btn{ width:100%; background:var(--primary-color); color:white; border:none; padding:10px; border-radius:6px; font-size:0.9375rem; font-weight:600; font-family:inherit; cursor:pointer; transition:var(--transition); position:relative; display:flex; align-items:center; justify-content:center;}.login-btn:hover:not(:disabled){ background:var(--secondary-color);}.login-btn:disabled{ background:#9ca3af; cursor:not-allowed;}.btn-spinner{ display:flex; align-items:center; gap:8px;}.spinner{ width:16px; height:16px; border:2px solid transparent; border-top:2px solid white; border-radius:50%; animation:spin 1s linear infinite;}@keyframes spin{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}}.login-info{ background:var(--light-color); border-radius:8px; padding:20px;}.demo-accounts h3{ color:var(--text-color); margin-bottom:16px; font-size:1.1em;}.account-section{ margin-bottom:16px;}.account-section h4{ color:var(--primary-color); margin-bottom:8px; font-size:0.95em; font-weight:600;}.account-list{ display:flex; flex-direction:column; gap:6px;}.account-item{ display:flex; flex-direction:column; gap:4px; padding:8px; background:var(--bg-card); border-radius:6px; border:1px solid var(--border-color);}.account-item code{ background:var(--light-color); padding:2px 6px; border-radius:4px; font-family:'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; font-size:0.85em; cursor:pointer; transition:var(--transition);}.account-item code:hover{ background:var(--primary-color); color:white;}.account-desc{ font-size:0.8em; color:var(--text-muted);}.security-info{ background:#eff6ff; border-radius:6px; padding:12px; border-left:3px solid var(--info-color);}.security-info h4{ color:var(--info-color); margin-bottom:8px; font-size:0.9em;}.security-info ul{ margin-left:18px; color:var(--text-muted); font-size:0.85em;}.security-info li{ margin-bottom:2px;}.dashboard-container{ background:var(--bg-card); border-radius:8px; padding:24px; border:1px solid var(--border-color); box-shadow:var(--shadow);}.dashboard-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; border-bottom:1px solid var(--border-color); padding-bottom:20px;}.client-info{ display:flex; align-items:center; gap:16px;}.client-logo{ width:64px; height:64px; border-radius:8px; object-fit:contain; background:white; padding:8px; border:1px solid var(--border-color);}.client-details h1{ color:var(--text-color); font-size:1.75em; font-weight:700; margin-bottom:2px;}.client-details .subtitle{ color:var(--text-muted); font-size:0.95em;}.admin-viewing-badge{ background:#fef3c7; color:#92400e; padding:4px 8px; border-radius:4px; font-size:0.8em; margin-top:5px;}.admin-viewing-badge a{ color:#92400e; text-decoration:underline;}.header-controls{ display:flex; align-items:center; gap:12px;}.refresh-controls{ display:flex; align-items:center; gap:8px;}.refresh-controls label{ font-weight:500; font-size:0.875rem; color:var(--text-muted);}.refresh-controls select{ padding:6px 10px; border:1px solid var(--border-color); border-radius:6px; background:var(--input-bg); color:var(--text-color); font-family:inherit; font-size:0.875rem;}.status-bar{ display:flex; justify-content:space-between; align-items:center; background:var(--bg-surface); padding:16px 20px; border-radius:8px; margin-bottom:24px; border:1px solid var(--border-color); border-left:3px solid var(--success-color);}.status-item{ text-align:center; position:relative;}.status-item.healthy::before{ content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:4px; height:4px; background:var(--success-color); border-radius:50%;}.status-item.warning::before{ content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:4px; height:4px; background:var(--warning-color); border-radius:50%;}.status-item.critical::before{ content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:4px; height:4px; background:var(--danger-color); border-radius:50%;}.status-value{ font-size:2em; font-weight:700; font-family:'JetBrains Mono', 'SF Mono', monospace; color:var(--text-color); display:block; line-height:1;}.status-label{ color:var(--text-muted); font-size:0.8em; margin-top:4px; text-transform:uppercase; letter-spacing:0.03em; font-weight:500;}.last-updated{ color:var(--text-muted); font-size:0.85em; display:flex; align-items:center; gap:8px;}.status-indicator{ width:10px; height:10px; border-radius:50%; display:inline-block;}.status-indicator.connected{ background:var(--success-color); animation:pulse 2s infinite;}.status-indicator.loading{ background:var(--warning-color); animation:pulse 1s infinite;}.status-indicator.error{ background:var(--danger-color); animation:none;}@keyframes pulse{ 0%{opacity:1} 50%{opacity:0.5} 100%{opacity:1}}.loading-state{ text-align:center; padding:60px 20px; color:var(--text-muted);}.spinner-large{ width:36px; height:36px; border:3px solid var(--border-color); border-top:3px solid var(--primary-color); border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 16px;}.error-state{ text-align:center; padding:60px 20px; color:var(--text-muted);}.error-icon{ font-size:2.5em; margin-bottom:16px;}.retry-btn{ background:var(--primary-color); color:white; border:none; padding:8px 16px; border-radius:6px; font-family:inherit; font-size:0.875rem; font-weight:500; cursor:pointer; margin-top:12px; transition:var(--transition);}.retry-btn:hover{ background:var(--secondary-color);}.charts-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); gap:20px; margin-bottom:24px;}.chart-container{ background:var(--bg-card); border-radius:var(--border-radius); padding:20px; border:1px solid var(--border-color); box-shadow:var(--shadow); position:relative; overflow:hidden;}.chart-container::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--primary-color);}.chart-title{ font-size:1.05em; font-weight:600; color:var(--text-color); margin-bottom:16px; text-align:center;}.chart-canvas{ position:relative; height:clamp(200px, 30vh, 400px);}.section-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:12px;}.section-header h2{ color:var(--text-color); font-size:1.4em; font-weight:700;}.section-controls{ display:flex; gap:8px; align-items:center;}.section-controls input,.section-controls select{ padding:6px 10px; border:1px solid var(--border-color); border-radius:6px; background:var(--input-bg); color:var(--text-color); font-family:inherit; font-size:0.875rem;}.section-controls input{ min-width:150px;}.devices-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px;}.device-card{ background:var(--bg-card); border-radius:var(--border-radius); padding:16px; border:1px solid var(--border-color); box-shadow:var(--shadow); transition:var(--transition); border-left:3px solid var(--success-color);}.device-card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px);}.device-card.warning{ border-left-color:var(--warning-color);}.device-card.critical{ border-left-color:var(--danger-color);}.device-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px;}.device-name{ font-size:0.95em; font-weight:600; color:var(--text-color); flex:1; margin-right:10px;}.device-status{ display:flex; align-items:center; gap:6px; flex-shrink:0;}.status-dot{ width:8px; height:8px; border-radius:50%; background:var(--success-color);}.status-dot.warning{ background:var(--warning-color);}.status-dot.critical{ background:var(--danger-color);}.status-text{ font-size:0.8em; font-weight:500; text-transform:capitalize; color:var(--text-muted);}.device-metrics{ margin-bottom:12px;}.metric{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; position:relative;}.metric-label{ font-weight:500; font-size:0.8em; color:var(--text-muted); min-width:50px;}.metric-value{ font-weight:600; font-family:'JetBrains Mono', 'SF Mono', monospace; font-size:0.85em; color:var(--text-color); min-width:50px; text-align:right;}.metric-bar{ flex:1; height:4px; background:var(--border-color); border-radius:2px; margin:0 8px; overflow:hidden;}.metric-fill{ height:100%; background:var(--primary-color); border-radius:2px; transition:width 0.3s ease;}.device-issues{ font-size:0.85em; color:var(--text-muted); line-height:1.4;}.device-issues strong{ color:var(--text-color); display:block; margin-bottom:4px; font-size:0.875em;}.device-issues ul{ margin-left:14px; margin-top:4px;}.device-issues li{ margin-bottom:2px;}.modal{ display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.4);}.modal-content{ background-color:var(--bg-card); margin:15% auto; padding:0; border-radius:var(--border-radius); width:90%; max-width:500px; border:1px solid var(--border-color); box-shadow:0 8px 24px rgba(0, 0, 0, 0.12); animation:modalSlideIn 0.2s ease;}@keyframes modalSlideIn{ from{ transform:translateY(-30px); opacity:0;} to{ transform:translateY(0); opacity:1;}}.modal-header{ padding:16px 20px; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center;}.modal-header h3{ color:var(--text-color); margin:0; font-size:1.05em;}.close{ color:var(--text-muted); font-size:24px; font-weight:bold; cursor:pointer; line-height:1;}.close:hover{ color:var(--text-color);}.modal-body{ padding:20px;}.modal-body form{ display:flex; flex-direction:column; gap:12px;}.modal-body label{ font-weight:600; font-size:0.875rem; color:var(--text-color);}.modal-body select{ padding:8px 10px; border:1px solid var(--border-color); border-radius:6px; background:var(--input-bg); color:var(--text-color); font-family:inherit; font-size:0.875rem;}.btn{ padding:8px 16px; border:none; border-radius:6px; cursor:pointer; font-weight:500; font-size:0.875rem; font-family:inherit; transition:var(--transition); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px;}.btn-primary{ background:var(--primary-color); color:white;}.btn-primary:hover{ background:var(--secondary-color);}.footer{ margin-top:32px; padding:16px 0; border-top:1px solid var(--border-color);}.footer-content{ max-width:1400px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:0 30px; color:var(--text-muted); font-size:0.8em;}.footer-links{ display:flex; gap:16px; align-items:center;}.footer-links a{ color:var(--text-muted); text-decoration:none; transition:var(--transition);}.footer-links a:hover{ color:var(--text-color);}.tv-layout{ display:flex; flex-direction:row; height:calc(100vh - 200px); gap:16px;}.tv-left-section{ width:66.67%; display:flex; flex-direction:column; gap:16px;}.tv-right-section{ width:33.33%; display:flex; flex-direction:column;}.tv-status-overview{ display:flex; justify-content:space-between; align-items:center; background:var(--bg-card); padding:16px 20px; border-radius:var(--border-radius); border:1px solid var(--border-color); box-shadow:var(--shadow); border-left:3px solid var(--success-color); margin-bottom:16px;}.tv-last-updated{ color:var(--text-muted); font-size:0.85em; display:flex; align-items:center; margin-left:20px;}.tv-status-item{ text-align:center; position:relative;}.tv-status-item.healthy::before{ content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:4px; height:4px; background:var(--success-color); border-radius:50%;}.tv-status-item.warning::before{ content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:4px; height:4px; background:var(--warning-color); border-radius:50%;}.tv-status-item.critical::before{ content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:4px; height:4px; background:var(--danger-color); border-radius:50%;}.tv-status-value{ font-size:2em; font-weight:700; font-family:'JetBrains Mono', 'SF Mono', monospace; color:var(--text-color); display:block; line-height:1;}.tv-status-label{ color:var(--text-muted); font-size:0.8em; margin-top:4px; text-transform:uppercase; letter-spacing:0.03em; font-weight:500;}.tv-main-content{ display:flex; flex:1; gap:16px;}.tv-health-section{ width:35%; background:var(--bg-card); border-radius:var(--border-radius); padding:16px; border:1px solid var(--border-color); box-shadow:var(--shadow); display:flex; flex-direction:column;}.tv-metrics-section{ width:65%; display:flex; gap:12px;}.tv-metric-column{ flex:1; background:var(--bg-card); border-radius:var(--border-radius); padding:16px; border:1px solid var(--border-color); box-shadow:var(--shadow); display:flex; flex-direction:column;}.tv-section-title{ font-size:1.2em; font-weight:700; color:var(--text-color); margin-bottom:16px; text-align:center; border-bottom:1px solid var(--border-color); padding-bottom:12px;}.tv-metric-title{ font-size:0.95em; font-weight:600; color:var(--text-color); margin-bottom:12px; text-align:center; padding-bottom:8px; border-bottom:1px solid var(--border-color);}.tv-health-chart{ flex:1; position:relative; min-height:250px;}.tv-top-list{ flex:1; overflow-y:auto; padding-right:8px;}.tv-top-list::-webkit-scrollbar{ width:4px;}.tv-top-list::-webkit-scrollbar-track{ background:var(--light-color); border-radius:2px;}.tv-top-list::-webkit-scrollbar-thumb{ background:var(--border-color); border-radius:2px;}.tv-top-list::-webkit-scrollbar-thumb:hover{ background:var(--primary-color);}.tv-top-list .top-list-item{ margin-bottom:8px; padding:10px; font-size:0.85em;}.tv-top-list .top-list-name{ font-size:0.9em; font-weight:600;}.tv-top-list .top-list-value{ font-size:1.1em; font-weight:700; font-family:'JetBrains Mono', 'SF Mono', monospace;}.tv-critical-section{ height:100%; background:var(--bg-card); border-radius:var(--border-radius); padding:16px; border:1px solid var(--border-color); box-shadow:var(--shadow); display:flex; flex-direction:column;}.tv-critical-header{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; text-align:center;}.tv-critical-badge{ background:var(--danger-color); color:white; padding:6px 14px; border-radius:6px; font-weight:600; font-size:0.875em; align-self:center;}.tv-critical-badge #tvCriticalCount{ background:rgba(255, 255, 255, 0.2); padding:2px 8px; border-radius:4px; margin-right:5px;}.tv-critical-grid{ flex:1; display:flex; flex-direction:column; gap:12px; overflow-y:auto; padding-right:8px;}.tv-critical-grid::-webkit-scrollbar{ width:4px;}.tv-critical-grid::-webkit-scrollbar-track{ background:var(--light-color); border-radius:2px;}.tv-critical-grid::-webkit-scrollbar-thumb{ background:var(--border-color); border-radius:2px;}.tv-critical-grid::-webkit-scrollbar-thumb:hover{ background:var(--danger-color);}.tv-critical-grid .device-card{ margin-bottom:0; border-left-width:4px; font-size:0.85em; flex-shrink:0;}.tv-critical-grid .device-name{ font-size:0.95em;}.tv-no-critical{ flex:1; text-align:center; padding:40px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center;}.tv-success-icon{ font-size:3em; margin-bottom:16px;}.tv-no-critical h4{ color:var(--success-color); font-size:1.2em; margin-bottom:10px;}.tv-no-critical p{ color:var(--text-muted); font-size:0.9em;}@media (max-width:1600px){ .tv-health-section{ width:40%;} .tv-metrics-section{ width:60%;} .tv-section-title{ font-size:1.1em;} .tv-metric-title{ font-size:0.9em;}}@media (max-width:1200px){ .tv-layout{ flex-direction:column; height:auto;} .tv-left-section, .tv-right-section{ width:100%;} .tv-main-content{ flex-direction:column;} .tv-health-section, .tv-metrics-section{ width:100%;} .tv-metrics-section{ flex-direction:column;}}.refresh-indicator{ width:10px; height:10px; border-radius:50%; background:var(--success-color); margin-right:8px; position:relative; transition:all 0.2s ease;}.refresh-indicator.loading{ background:var(--warning-color);}.refresh-indicator.loading::after{ content:''; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; border:2px solid var(--warning-color); border-top-color:transparent; border-radius:50%; animation:refreshSpin 1s linear infinite;}.refresh-indicator.error{ background:var(--danger-color);}@keyframes refreshSpin{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}}.loading-overlay{ display:none !important;}.status-bar{ padding:20px 24px; margin-bottom:16px;}.status-value{ font-size:2.2em;}.status-label{ font-size:0.85em;}.last-updated{ font-size:0.9em; display:flex; align-items:center;}.dashboard-header{ padding-bottom:20px; margin-bottom:20px;}.client-logo{ width:80px; height:80px;}.client-details h1{ font-size:2.2em;}.client-details .subtitle{ font-size:1.1em;}@media (max-width:1600px){ .tv-top-row{ height:45%;} .tv-bottom-row{ height:55%;} .tv-health-section{ width:30%;} .tv-metrics-section{ width:70%;} .tv-section-title{ font-size:1.2em;} .tv-metric-title{ font-size:0.95em;}}@media (max-width:1200px){ .tv-layout{ height:auto;} .tv-top-row{ flex-direction:column; height:auto;} .tv-health-section, .tv-metrics-section{ width:100%;} .tv-metrics-section{ flex-direction:column;} .tv-critical-grid{ grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));}}.top-list{ padding:12px 0; overflow-y:auto;}.top-list-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; margin-bottom:6px; background:var(--bg-surface); border-radius:6px; border-left:3px solid var(--primary-color); transition:var(--transition);}.top-list-item:hover{ background:var(--light-color); transform:translateX(2px);}.top-list-item.critical{ border-left-color:var(--danger-color); background:#fef2f2;}.top-list-item.warning{ border-left-color:var(--warning-color); background:#fffbeb;}.top-list-item.healthy{ border-left-color:var(--success-color); background:#ecfdf5;}[data-theme="dark"] .top-list-item.critical{ background:rgba(220, 38, 38, 0.08);}[data-theme="dark"] .top-list-item.warning{ background:rgba(217, 119, 6, 0.08);}[data-theme="dark"] .top-list-item.healthy{ background:rgba(5, 150, 105, 0.08);}.top-list-device{ display:flex; flex-direction:column; flex:1;}.top-list-name{ font-weight:600; font-size:0.875em; color:var(--text-color); margin-bottom:2px;}.top-list-status{ font-size:0.8em; color:var(--text-muted); display:flex; align-items:center; gap:4px;}.top-list-value{ font-size:1.2em; font-weight:700; font-family:'JetBrains Mono', 'SF Mono', monospace; color:var(--text-color); text-align:right;}.top-list-value.critical{ color:var(--danger-color);}.top-list-value.warning{ color:var(--warning-color);}.top-list-value.healthy{ color:var(--success-color);}.loading-placeholder{ text-align:center; padding:40px 20px; color:var(--text-muted); font-style:italic; font-size:0.9em;}.no-critical-devices{ grid-column:1 / -1; text-align:center; padding:60px 20px;}.success-state{ max-width:400px; margin:0 auto;}.success-icon{ font-size:3em; margin-bottom:16px;}.success-state h3{ color:var(--success-color); font-size:1.3em; margin-bottom:8px;}.success-state p{ color:var(--text-muted); font-size:0.95em; line-height:1.5;}.section-info{ display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:0.85em;}.section-info #criticalCount{ background:var(--danger-color); color:white; padding:2px 8px; border-radius:10px; font-weight:600; font-size:0.85em; min-width:20px; text-align:center;}.dashboard-container.loading{ position:relative;}.loading-overlay{ position:absolute; top:0; left:0; right:0; bottom:0; background:var(--bg-body-start); opacity:0.85; display:flex; align-items:center; justify-content:center; z-index:100; transition:opacity 0.3s ease;}.loading-overlay.show{ opacity:1;}.loading-overlay-content{ text-align:center; background:var(--bg-card); padding:24px; border-radius:8px; border:1px solid var(--border-color); box-shadow:var(--shadow);}.loading-overlay .spinner-large{ margin-bottom:12px;}@media (max-width:1200px){ .charts-grid{ grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));} .devices-grid{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));} .section-controls input{ min-width:120px;}}@media (max-width:968px){ .login-card{ grid-template-columns:1fr; max-width:420px;} .dashboard-header{ flex-direction:column; gap:16px; align-items:flex-start;} .status-bar{ flex-wrap:wrap; gap:12px; justify-content:center;} .charts-grid{ grid-template-columns:1fr;} .devices-grid{ grid-template-columns:1fr;} .section-header{ flex-direction:column; align-items:flex-start;} .nav-container{ flex-direction:column; gap:12px;} .footer-content{ flex-direction:column; gap:12px; text-align:center;}}@media (max-width:600px){ .main-content{ padding:10px;} .dashboard-container{ padding:16px;} .login-container{ padding:10px;} .login-card{ padding:24px 20px;} .client-info{ flex-direction:column; text-align:center; gap:12px;} .client-logo{ width:56px; height:56px;} .section-controls{ flex-direction:column; width:100%;} .section-controls input{ min-width:auto; width:100%;}}.back-to-admin-btn{ display:inline-block; padding:6px 12px; background:var(--primary-color); color:white; text-decoration:none; border-radius:6px; font-weight:500; font-size:0.875rem; transition:var(--transition);}.back-to-admin-btn:hover{ background:var(--secondary-color); color:white;}.admin-viewing-badge{ margin-top:8px;}.nav-link.back-link{ background:rgba(26, 86, 219, 0.08); padding:6px 12px; border-radius:6px;}.nav-link.back-link:hover{ background:rgba(26, 86, 219, 0.15);}.mfa-link,.profile-link{ font-size:1.1rem; padding:0 6px;}.theme-toggle{ background:none; border:1px solid var(--border-color); border-radius:6px; padding:5px 9px; cursor:pointer; font-size:1rem; line-height:1; transition:var(--transition); color:var(--text-color);}.theme-toggle:hover{ background:var(--light-color);}.impersonation-banner{ background:#fef3c7; color:#92400e; padding:3px 20px; text-align:center; font-size:0.8em; font-weight:500; display:flex; justify-content:center; align-items:center; gap:12px; z-index:200; border-bottom:1px solid #f59e0b;}[data-theme="dark"] .impersonation-banner{ background:#3d3200; color:#fbbf24; border-bottom-color:#5a4b00;}.impersonation-banner a{ color:#92400e; text-decoration:underline; font-weight:600;}[data-theme="dark"] .impersonation-banner a{ color:#fbbf24;}.header-logo{ display:flex; justify-content:center; margin-bottom:8px;}.header-logo img{ max-width:200px; max-height:72px; width:auto; height:auto; object-fit:contain;}.header-logo img, .nav-logo{ background:transparent;}[data-theme="dark"] .header-logo img,[data-theme="dark"] .nav-logo{ filter:invert(1) brightness(1.2) contrast(0.95);}.login-card-compact{ grid-template-columns:1fr; max-width:420px;}.login-card-compact .login-header,.login-card-compact .login-form{ width:100%; max-width:100%;}.login-card-compact input,.login-card-compact button{ max-width:100%; box-sizing:border-box;}.zabbix-config-form{ max-width:700px;}.zabbix-config-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}.zabbix-config-form .form-group{ display:flex; flex-direction:column; gap:6px;}.zabbix-config-form .form-group label{ font-weight:500; font-size:0.875rem; color:var(--text-muted);}.zabbix-config-form .form-group input{ padding:8px 10px; border:1px solid var(--border-color); border-radius:6px; font-size:0.9375rem; font-family:inherit; background:var(--input-bg); color:var(--text-color);}.zabbix-config-form .form-group input:focus{ border-color:var(--primary-color); outline:none; box-shadow:0 0 0 3px rgba(26, 86, 219, 0.1);}.form-actions{ display:flex; align-items:center; gap:12px;}.save-status{ font-size:0.85rem; font-weight:500;}.save-status.saving{ color:var(--text-muted);}.save-status.success{ color:var(--success-color);}.save-status.error{ color:var(--danger-color);}.stats-period-select{ margin-left:auto; padding:6px 10px; border:1px solid var(--border-color); border-radius:6px; background:var(--input-bg); color:var(--text-color); font-family:inherit; font-size:0.85rem;}.subsection-title{ color:var(--text-color); font-size:1rem; font-weight:600; margin:20px 0 12px 0; padding-bottom:8px; border-bottom:1px solid var(--border-color);}@media (max-width:768px){ .zabbix-config-form .form-row{ grid-template-columns:1fr;}}