body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.datachart-container{padding:1rem;background-color:#fff;border-radius:24px;max-width:100%;box-sizing:border-box}.datachart-container h2{font-size:1.5rem;margin-bottom:1rem}.chart-controls{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.chart-controls label{display:flex;flex-direction:column;font-weight:500;font-size:.9rem;min-width:100px}.chart-controls input,.chart-controls select{margin-top:.25rem;padding:.4rem .6rem;border:1px solid #ccc;border-radius:6px;font-size:.9rem}.chart-controls input:focus,.chart-controls select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff26}.chart-title{text-align:center}.dashboard-container{padding:1rem;max-width:1400px;background-color:#f5f5f7a0;margin:0 auto}.dashboard-container h2{font-size:2rem;margin-bottom:0rem}.main-grid{display:flex;flex-direction:column;gap:1rem}.chart-section,.device-panel{width:100%}.chart-wrapper{width:100%;max-width:100%;overflow-x:auto}.device-panel{overflow-x:auto;padding-bottom:1rem}.device-list{list-style-type:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}.device-list>li{border:1px solid #ccc;border-radius:8px;background-color:#f9f9f9;padding:.5rem}.device-list li ul{margin-top:.5rem;padding-left:1rem}.device-list li ul li{margin:.25rem 0}@media (min-width: 768px){.main-grid{flex-direction:row;align-items:flex-start}.chart-section{flex:2}.device-panel{flex:1;max-height:710px;overflow-y:auto}.device-list{flex-direction:column}}.device-panel{display:flex;flex-direction:column;height:100%;background-color:#fff;border-radius:8px;box-shadow:0 2px 6px #0000000d;margin-top:3.7rem}.device-header{padding:.5rem 1rem;margin:0;background-color:#ffffff4b;border-bottom:1px solid #aa8c8c;font-size:1.1rem;font-weight:600}.device-scroll{overflow-y:auto;padding:.5rem 1rem;flex:1}.tile-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}.tile{width:160px;height:100px;background-color:#f4f4f4;border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 2px 8px #0000001a;margin:5px}.tile-value{font-size:32px;font-weight:700;color:#333;flex:1;display:flex;justify-content:center;align-items:center}.tile-legend{font-size:14px;color:#666;padding-bottom:8px;text-align:center}.media-dashboard{padding:2rem;font-family:sans-serif}.video-list-container{margin-top:2rem;max-height:400px;overflow-y:auto;border:1px solid #ccc;padding:1rem}.video-thumbnails{display:flex;flex-direction:column;gap:1.2rem}.video-thumb{display:flex;gap:1rem;align-items:center;background:#f9f9f9;padding:.8rem;border-radius:6px}.thumb-video{cursor:pointer;border:1px solid #ccc;border-radius:4px}.video-meta{display:flex;flex-direction:column}.video-meta p{margin:.4rem 0;color:#666;font-size:.9rem}.video-player{margin-top:2rem}.playlist-columns{display:flex;gap:1rem;margin-top:1rem}.video-column{flex:1;border:1px solid #ddd;padding:1rem;border-radius:8px;background-color:#fafafa}.video-column h5{margin-top:0;font-weight:700;text-align:center}.playlist-management{padding:1rem;font-family:Arial,sans-serif}.device-section{margin-bottom:2rem}.device-section h4{margin-bottom:1rem;font-size:1.2rem}.playlist-columns{display:flex;gap:1.5rem;justify-content:space-between;flex-wrap:wrap}.video-column{flex:1;min-width:280px;background-color:#f8f9fa;border:1px solid #ccc;border-radius:8px;padding:1rem}.video-column h5{margin-top:0;margin-bottom:1rem;font-size:1.1rem;text-align:center;color:#333;border-bottom:1px solid #ddd;padding-bottom:.5rem}.video-column ul{list-style:none;padding:0;margin:0}.video-column li{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;background-color:#fff;padding:.4rem .6rem;border-radius:4px;border:1px solid #e2e6ea}.video-column li:hover{background-color:#f1f3f5}.video-column button{margin-left:.5rem;background-color:transparent;border:none;cursor:pointer;font-size:.95rem}.video-column button:hover{color:#007bff}.video-column .order-info{margin-right:auto;color:#666;font-size:.85rem;margin-left:.5rem}.video-column li{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.button-group{margin-left:auto;display:flex;gap:.4rem;justify-content:flex-end}.device-section{border:1px solid #ccc;border-radius:6px;padding:1rem;margin-bottom:1.5rem;background-color:#fafafa;box-shadow:0 1px 3px #0000000d}.device-section h4{margin-top:0;font-weight:600;border-bottom:1px solid #ddd;padding-bottom:.5rem;margin-bottom:1rem}.video-thumb{display:flex;gap:1rem;align-items:center;background:#f9f9f9;padding:.8rem;border-radius:6px;border:1px solid #ddd;overflow:hidden}.video-meta{display:flex;flex-direction:column;overflow:hidden}.video-meta strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.video-meta p{margin:.4rem 0;color:#666;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.video-thumbnails>.video-thumb+.video-thumb{border-top:1px solid #eee;margin-top:.5rem;padding-top:.5rem}.device-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;padding:.25rem .5rem;cursor:pointer;align-items:center}.device-name{text-align:left}.device-label{text-align:center;font-style:italic;color:#555}.device-group{text-align:right;color:#888}.device-header,.device-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;align-items:center}.device-header{display:grid;grid-template-columns:20px 1fr 1fr 1fr;gap:.5rem;font-weight:700;border-bottom:2px solid #ccc;padding:.4rem .6rem;margin-bottom:.5rem;font-size:.9rem;color:#555}.device-list{list-style:none;padding:0;margin:0}.device-row{display:grid;grid-template-columns:20px 1fr 1fr 1fr;gap:.5rem;padding:.5rem .6rem;align-items:center;background-color:#fff;border:1px solid #e2e6ea;border-radius:6px;margin-bottom:.5rem;transition:background-color .15s ease;cursor:pointer}.device-row.selected{font-weight:700;background:#f0f0f0;border-radius:4px}.device-label{display:flex;align-items:center;gap:.25rem}.device-label-input{border:1px solid #ccc;border-radius:4px;padding:2px 4px;font-size:.9rem;width:100%}.edit-btn{background:none;border:none;cursor:pointer;font-size:.9rem;color:#666}.edit-btn:hover{color:#000}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}.status-dot.green{background-color:#2ecc71}.status-dot.red{background-color:#e74c3c}.status-dot.grey{background-color:#bdc3c7}.navbar{display:flex;justify-content:space-between;align-items:center;background-color:#333;color:#fff;padding:10px 20px;position:relative}.navbar .logo-container{display:flex;align-items:center;gap:10px}.navbar .logo{font-size:24px;font-weight:700;margin:0}.navbar .sublogo{font-size:18px;font-weight:400;margin:0}.hamburger{display:none;border:none;background-color:transparent;cursor:pointer;position:absolute;top:10px;right:20px}.hamburger-box{width:30px;height:24px;display:inline-block;position:relative}.hamburger-inner,.hamburger-inner:before,.hamburger-inner:after{background-color:#fff;height:3px;width:100%;position:absolute;left:0;transition:transform .3s ease}.hamburger-inner{top:50%;transform:translateY(-50%)}.hamburger-inner:before,.hamburger-inner:after{content:"";display:block}.hamburger-inner:before{top:-10px}.hamburger-inner:after{top:10px}.navbar .nav-links{display:flex;align-items:center}.navbar .nav-links .nav-item{margin-left:20px;text-decoration:none;color:#fff;font-size:18px;cursor:pointer}.navbar .nav-links .nav-item:hover{text-decoration:underline}@media (max-width: 768px){.hamburger{display:block}.navbar .nav-links{display:none}.nav-links{display:none;flex-direction:column;align-items:flex-start;position:absolute;background-color:#333;right:0;top:100%;width:100%}.nav-links.expanded{display:flex}.navbar .nav-links .nav-item{margin:10px 20px}}.org-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:20px}.org-actions{display:flex;gap:10px}.edit-btn,.delete-btn{padding:8px 12px;border-radius:4px;border:none;color:#fff;cursor:pointer}.edit-btn{background-color:#28a745}.delete-btn{background-color:#dc3545}.delete-btn:disabled{background-color:#ccc;cursor:not-allowed}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080}.modal{position:absolute;top:20%;left:50%;transform:translate(-50%,-20%);background:#fff;padding:30px;border-radius:8px;max-width:400px;width:90%}.modal input[type=text]{width:100%;margin:10px 0;padding:6px}.confirm-checkbox{font-size:.9rem;display:block;margin-bottom:10px}.modal-buttons{display:flex;justify-content:flex-end;gap:10px}.device-edit-container{max-width:700px;margin:2rem auto;padding:2rem;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 2px 6px #0000000d}.device-edit-container h2{font-size:1.5rem;font-weight:600;margin-bottom:1.5rem;color:#111827}.device-edit-container h3{font-size:1.2rem;margin-top:2rem;margin-bottom:1rem;color:#374151;border-bottom:1px solid #e5e7eb;padding-bottom:.25rem}.device-edit-container form{display:grid;grid-template-columns:1fr;gap:1rem}.device-edit-container label{display:block;font-size:.9rem;font-weight:500;margin-bottom:.25rem;color:#374151}.device-edit-container input,.device-edit-container textarea,.device-edit-container select{width:100%;padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:6px;font-size:.95rem;transition:border .2s,box-shadow .2s}.device-edit-container input:focus,.device-edit-container textarea:focus,.device-edit-container select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}.device-edit-container button{padding:.6rem 1.2rem;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:.95rem;font-weight:500;cursor:pointer;transition:background .2s}.device-edit-container button:hover{background:#2563eb}.device-edit-container button:disabled{background:#9ca3af;cursor:not-allowed}.device-edit-container table{width:100%;border-collapse:collapse;margin-top:1rem}.device-edit-container th,.device-edit-container td{padding:.5rem;border-bottom:1px solid #e5e7eb;text-align:left}.device-edit-container th{font-weight:600;color:#374151}.device-edit-container td{font-size:.9rem;color:#111827}.device-edit-container pre{background:#f3f4f6;padding:.75rem;border-radius:6px;font-size:.85rem;overflow-x:auto}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background-color:#f5f5f5;padding:15px;box-sizing:border-box}.login-form{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-width:400px;width:100%;margin:0 auto}.login-form h2{text-align:center;color:#333;margin-bottom:20px}.login-form .form-field{margin-bottom:15px}.login-form .form-field label{display:block;margin-bottom:5px;color:#333}.login-form .form-field input{width:calc(100% - 20px);padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.login-form button{width:calc(100% - 20px);padding:10px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;margin-top:10px}.login-form button:hover{background-color:#0056b3}@media (max-width: 768px){.login-form{width:calc(100% - 20px);padding:10px;box-shadow:none}}.registration-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background-color:#f5f5f5;padding:15px}.registration-form{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-width:400px;width:100%;margin:0 auto}.registration-form h2{text-align:center;color:#333;margin-bottom:20px}.registration-form .form-field{margin-bottom:15px}.registration-form .form-field label{display:block;margin-bottom:5px;color:#333}.registration-form .form-field input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.registration-form button{width:100%;padding:10px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;margin-top:10px}.registration-form button:hover{background-color:#0056b3}@media (max-width: 768px){.registration-form{max-width:100%;box-shadow:none}}.success-message{color:green;text-align:center;margin-bottom:15px}@media (max-width: 768px){.registration-form{width:calc(100% - 20px);padding:10px;box-shadow:none}}.password-reset-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background-color:#f5f5f5;padding:15px}.password-reset-form{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-width:400px;width:100%;margin:0 auto}.password-reset-form h2{text-align:center;color:#333;margin-bottom:20px}.password-reset-form .form-field{margin-bottom:15px}.password-reset-form .form-field label{display:block;margin-bottom:5px;color:#333}.password-reset-form .form-field input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.password-reset-form button{width:100%;padding:10px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;margin-top:10px}.password-reset-form button:hover{background-color:#0056b3}.error-message{color:red;text-align:center;margin-bottom:15px}@media (max-width: 768px){.password-reset-form{width:calc(100% - 20px);padding:10px;box-shadow:none}}.new-password-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background-color:#f5f5f5;padding:15px}.new-password-form{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-width:400px;width:100%;margin:0 auto}.new-password-form h2{color:#333;margin-bottom:20px;text-align:center}.new-password-form .form-field{margin-bottom:15px}.new-password-form .form-field label{display:block;margin-bottom:5px;color:#333}.new-password-form .form-field input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.new-password-form button{width:100%;padding:10px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;margin-top:10px}.new-password-form button:hover{background-color:#0056b3}.new-password-form .message,.new-password-form .error-message{color:red;text-align:center;margin-bottom:15px}@media (max-width: 768px){.new-password-form{width:calc(100% - 20px);padding:10px;box-shadow:none}}.verification-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background-color:#f5f5f5;padding:15px}.verification-form{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-width:400px;width:100%;margin:0 auto;text-align:center}.verification-form h2{color:#333;margin-bottom:20px}.verification-form .message{color:#007bff;margin-bottom:15px}@media (max-width: 768px){.verification-form{width:calc(100% - 20px);padding:10px;box-shadow:none}}