.dashboard{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:100vh;display:flex;flex-direction:column;background-color:#f5f5f5}.dashboard-header{background-color:#2c3e50;color:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.dashboard-title{margin:0;font-size:24px;font-weight:300}.connection-status{display:flex;align-items:center;font-size:14px;padding:6px 12px;background-color:#ffffff1a;border-radius:4px}.connection-status span{margin-left:4px}.error-banner{background-color:#e74c3c;color:#fff;padding:10px 20px;text-align:center;font-size:14px}.dashboard-container{display:flex;flex:1;gap:1px;background-color:#ddd;overflow:hidden}.column{background-color:#fff;padding:20px;overflow-y:auto;display:flex;flex-direction:column}.device-list{flex:0 0 300px;border-right:1px solid #ddd;display:flex;flex-direction:column;overflow:hidden}.device-list-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;margin-bottom:10px}.device-list-content{flex:1;overflow-y:auto}.device-details{flex:1;border-right:1px solid #ddd}.component-details{flex:1}.column h2,.column h3{margin-top:0;margin-bottom:15px;color:#2c3e50;font-weight:500}.column h2{font-size:20px;border-bottom:2px solid #3498db;padding-bottom:8px}.column h3{font-size:16px;color:#34495e}.device-item{display:flex;align-items:center;padding:12px;margin-bottom:8px;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .2s ease;background-color:#fafafa;min-height:75px}.device-item:hover{background-color:#e3f2fd;border-color:#2196f3;transform:translate(2px)}.device-item.selected{background-color:#3498db;border-color:#3498db;color:#fff}.device-info{display:flex;flex-direction:column;flex:1}.device-serial{font-weight:600;font-size:14px}.device-room{font-size:12px;color:#666;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-item.selected .device-room{color:#ecf0f1}.device-last-seen{font-size:.85em;color:#666;margin-top:2px}.device-item.stale .device-last-seen{color:#999}.device-item.selected .device-last-seen{color:#ecf0f1;opacity:.9}.device-details{display:flex;flex-direction:column}.events-section{flex:0 0 200px;min-height:200px;border-bottom:1px solid #e0e0e0;padding-bottom:15px;margin-bottom:20px}.device-info-section{border-bottom:1px solid #e0e0e0;padding-bottom:20px;margin-bottom:20px}.components-section{flex:1;display:flex;flex-direction:column;overflow:hidden}.components-header{flex-shrink:0;padding-bottom:10px;margin-bottom:10px}.components-header h3{margin:0}.events-list{max-height:150px;overflow-y:auto}.event-item{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid #f0f0f0;font-size:12px}.event-time{color:#666;min-width:70px;font-family:monospace}.event-type{color:#3498db;font-weight:500;min-width:100px}.event-message{color:#2c3e50;flex:1}.components-list{display:flex;flex-direction:column;gap:8px;flex:1;overflow-y:auto}.component-item{display:flex;align-items:center;padding:10px 12px;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;transition:all .2s ease;background-color:#fafafa}.component-item:hover{background-color:#e8f5e8;border-color:#4caf50}.component-item.selected{background-color:#27ae60;border-color:#27ae60;color:#fff}.component-name{font-weight:500;margin-right:8px}.component-type{font-size:12px;color:#666;font-style:italic}.component-item.selected .component-type{color:#ecf0f1}.component-info-section{border-bottom:1px solid #e0e0e0;padding-bottom:20px;margin-bottom:20px}.component-events-section,.component-logs-section{flex:1;display:flex;flex-direction:column;margin-bottom:20px}.component-events-section{border-bottom:1px solid #e0e0e0;padding-bottom:20px}.logs-list{flex:1;overflow-y:auto;font-family:monospace;font-size:12px}.log-item{display:flex;gap:10px;padding:4px 0;border-bottom:1px solid #f5f5f5}.log-time{color:#666;min-width:70px}.log-level{min-width:50px;font-weight:700}.log-message{flex:1;color:#2c3e50}.log-error .log-level{color:#e74c3c}.log-warn .log-level{color:#f39c12}.log-info .log-level{color:#3498db}.log-debug .log-level{color:#95a5a6}.status-indicator{flex-shrink:0;box-shadow:0 0 3px #0000004d}.dashboard-footer{font-size:.8em;color:#666;text-align:center;padding:10px;background-color:#f5f5f5;border-top:1px solid #ddd}.placeholder{display:flex;align-items:center;justify-content:center;flex:1;color:#95a5a6;font-style:italic;font-size:16px;padding:20px;text-align:center}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#bdc3c7;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#95a5a6}@media (max-width: 1200px){.device-list{flex:0 0 250px}}@media (max-width: 768px){.dashboard-header{flex-direction:column;gap:10px;text-align:center}.dashboard-container{flex-direction:column}.column{flex:none;height:300px;border-right:none;border-bottom:1px solid #ddd}.device-list{height:200px}.device-item{min-height:85px}}