:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.login-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.login-dialog{background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 6px #0000001a;width:100%;max-width:400px}.login-dialog h2{margin-top:0;margin-bottom:1.5rem;color:#333;text-align:center}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;color:#555;font-weight:500}.form-group input{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#4caf50}.form-group input:disabled{background-color:#f5f5f5;cursor:not-allowed}.error-message{color:#f44336;background-color:#ffebee;padding:.75rem;border-radius:4px;margin-bottom:1rem;font-size:.9rem}.login-button{width:100%;padding:.75rem;background-color:#4caf50;color:#fff;border:none;border-radius:4px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s}.login-button:hover:not(:disabled){background-color:#45a049}.login-button:disabled{background-color:#ccc;cursor:not-allowed}.image-gallery{display:grid;grid-template-columns:repeat(1,1fr);grid-template-rows:repeat(1,1fr);gap:1rem;padding:1rem;box-sizing:border-box}.gallery-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:3rem;color:#666}.gallery-empty h2{font-size:2.5rem;color:#4caf50;margin-bottom:1rem;font-weight:600}.gallery-empty p{font-size:1.5rem;color:#888;margin:0}.image-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#f0f0f0;border-radius:8px;box-shadow:0 2px 8px #0000001a}.image-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000026}.image-card img{width:100%;height:auto;display:block}.image-metadata{background:#000000e6;color:#fff;padding:.75rem;font-size:.85rem}.metadata-row{margin:.25rem 0;display:flex;flex-wrap:wrap;gap:.5rem 1rem}.metadata-row span{white-space:nowrap}.metadata-row strong{font-weight:600;min-width:60px}.button-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.response-button{flex:1 1 auto;min-width:80px;padding:.5rem .75rem;border:none;border-radius:4px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease;color:#fff}.response-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 2px 8px #0000004d}.response-button:active:not(:disabled){transform:translateY(0)}.response-button:disabled{opacity:.6;cursor:not-allowed}.fire-button{background-color:#f44336}.fire-button:hover:not(:disabled){background-color:#d32f2f}.offsite-button{background-color:#ff9800}.offsite-button:hover:not(:disabled){background-color:#f57c00}.no-fire-button{background-color:#4caf50}.no-fire-button:hover:not(:disabled){background-color:#388e3c}.button-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:6px}.image-loading{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:200px;color:#666}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #4CAF50;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:.5rem}.image-error{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:300px;color:#333;padding:2rem;text-align:center;background:#fff5f5;border:2px solid #ffcdd2;border-radius:8px}.image-error .error-icon{font-size:3rem;margin-bottom:1rem}.image-error h3{margin:0 0 .75rem;color:#c62828;font-size:1.5rem}.image-error .error-message{color:#666;margin:0 0 .5rem;font-size:.95rem;font-family:monospace;background:#f5f5f5;padding:.5rem 1rem;border-radius:4px}.image-error .error-hint{color:#888;margin:0 0 1.5rem;font-size:.9rem}.image-error .refresh-error-button{background-color:#2196f3;color:#fff;border:none;padding:.75rem 2rem;font-size:1rem;font-weight:600;border-radius:4px;cursor:pointer;transition:all .2s ease}.image-error .refresh-error-button:hover{background-color:#1976d2;transform:translateY(-2px);box-shadow:0 2px 8px #2196f366}.image-error .refresh-error-button:active{transform:translateY(0)}.image-error .error-countdown{margin:1rem 0 0;color:#666;font-size:.9rem}.image-error small{color:#999;margin-top:.5rem;font-size:.75rem}@media(max-width:768px){.image-gallery{grid-template-columns:1fr;gap:1rem;padding:.5rem}.image-metadata{font-size:.8rem;padding:.75rem}.metadata-row{display:grid;grid-template-columns:1fr 1fr;gap:.25rem .5rem}.metadata-row span{white-space:normal;word-break:break-word}.button-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}.response-button{width:100%;padding:.6rem .25rem;font-size:.75rem;min-width:unset}}@media(max-width:400px){.metadata-row,.button-row{grid-template-columns:1fr}.response-button{padding:.75rem;font-size:.85rem}}.previous-alerts{padding:1rem 2rem}.alerts-header{display:flex;padding:1rem 2rem;justify-content:space-between;align-items:center}.alerts-header h2{margin:0;color:#333}.header-controls{display:flex;gap:1rem;align-items:center}.alerts-filters{background:#fff;padding:1rem;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:1.5rem}.filter-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}.filter-right-actions{margin-left:auto;display:flex;align-items:flex-end;gap:1rem}.filter-group{display:flex;flex-direction:column;gap:.25rem;flex:0 1 auto}.filter-group label{font-size:.85rem;color:#666;font-weight:500}.filter-input,.filter-select{padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:.9rem;min-width:150px}.filter-input:focus,.filter-select:focus{outline:none;border-color:#2196f3}.autocomplete-wrapper{position:relative;flex:0 1 auto;min-width:200px}.autocomplete-container{position:relative;display:inline-block;width:100%}.autocomplete-input{width:100%;padding-right:2rem}.autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;max-height:300px;overflow-y:auto;box-shadow:0 4px 6px #0000001a;z-index:1000;margin-top:-1px}.autocomplete-item{padding:.75rem;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #f0f0f0}.autocomplete-item:last-child{border-bottom:none}.autocomplete-item:hover{background-color:#f5f9ff}.autocomplete-item.no-results{cursor:default;color:#999;text-align:center}.autocomplete-item.no-results:hover{background-color:#fff}.device-project{color:#666;font-size:.85rem}.clear-device-button{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.5rem;color:#999;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.clear-device-button:hover{background-color:#f0f0f0;color:#333}.clear-filters-button{padding:.5rem 1rem;background-color:#757575;color:#fff;border:none;border-radius:4px;font-size:.9rem;cursor:pointer;height:fit-content}.clear-filters-button:hover{background-color:#616161}.alerts-info{padding:.5rem 1rem;background:#fff;border-radius:8px 8px 0 0;color:#666;font-size:.9rem}.alerts-info p{margin:0}.pagination-controls{display:flex;justify-content:center;align-items:center;gap:1rem;padding:1rem;background:#fff;border-radius:0 0 8px 8px;box-shadow:0 2px 4px #0000001a}.pagination-button{padding:.5rem 1rem;background-color:#2196f3;color:#fff;border:none;border-radius:4px;font-size:.9rem;cursor:pointer;transition:background-color .2s}.pagination-button:hover:not(:disabled){background-color:#1976d2}.pagination-button:disabled{background-color:#ccc;cursor:not-allowed}.pagination-info{font-size:.9rem;color:#666;font-weight:500}.alerts-loading,.alerts-error,.no-alerts{text-align:center;padding:3rem;color:#666}.spinner-large{border:4px solid #f3f3f3;border-top:4px solid #2196F3;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;margin:0 auto 1rem}.retry-button{padding:.5rem 1rem;background-color:#2196f3;color:#fff;border:none;border-radius:4px;font-size:.9rem;cursor:pointer;margin-top:1rem}.retry-button:hover{background-color:#1976d2}.alerts-table-container{background:#fff;border-radius:0;box-shadow:0 2px 4px #0000001a;overflow-x:auto}.alerts-table{width:100%;border-collapse:collapse}.alerts-table thead{background-color:#f5f5f5;border-bottom:2px solid #ddd}.alerts-table th{padding:1rem;text-align:left;font-weight:600;color:#333;white-space:nowrap}.alerts-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.alerts-table th.sortable:hover{background-color:#e8e8e8}.alerts-table tbody tr{border-bottom:1px solid #eee;cursor:pointer;transition:background-color .2s}.alerts-table tbody tr:hover{background-color:#f9f9f9}.alerts-table td{padding:1rem;color:#666}.alert-detail-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;padding:1rem}.alert-detail-dialog{background:#fff;border-radius:8px;width:90%;max-width:none;max-height:90vh;overflow:auto;box-shadow:0 4px 20px #0000004d}.alert-detail-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #eee}.alert-detail-header h2{margin:0;color:#333}.close-button{background:none;border:none;font-size:2rem;color:#999;cursor:pointer;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.close-button:hover{background-color:#f5f5f5;color:#333}.alert-detail-content{padding:1.5rem;display:grid;grid-template-columns:1fr 2fr;gap:2rem}@media(max-width:768px){.alert-detail-content{grid-template-columns:1fr}}.alert-detail-info{display:flex;flex-direction:column;gap:1rem}.info-row{display:flex;flex-direction:column;gap:.25rem}.info-label{font-size:.85rem;color:#999;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.info-value{font-size:1rem;color:#333;word-break:break-word}.response-badge{display:inline-block;padding:.25rem .75rem;background-color:#4caf50;color:#fff;border-radius:12px;font-size:.85rem;font-weight:500;text-transform:capitalize}.alert-detail-image{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#f5f5f5;border-radius:8px;padding:1rem;min-height:300px}.alert-detail-image img{max-width:100%;height:auto;border-radius:4px;box-shadow:0 2px 8px #0000001a}.image-loading,.image-error{text-align:center;color:#666}.spinner{border:3px solid #f3f3f3;border-top:3px solid #2196F3;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto .5rem}.image-error{color:#f44336}.image-error small{display:block;margin-top:.5rem;font-size:.85rem}.customer-alert-actions{display:flex;gap:1rem;margin-top:1.5rem}.customer-alert-button{padding:.6rem 1.2rem;font-size:1rem;border:none;border-radius:4px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}.customer-alert-button.fire{background:#e53935;color:#fff}.customer-alert-button.fire:disabled{background:#ffb3b3;color:#fff;cursor:not-allowed}.customer-alert-button.offsite-fire{background:#ffd600;color:#333}.customer-alert-button.offsite-fire:disabled{background:#fff9c4;color:#888;cursor:not-allowed}.sending-overlay{display:flex;align-items:center;gap:.75rem;margin-top:1rem;font-weight:500;color:#333}.sending-overlay .spinner{width:22px;height:22px;border:3px solid #eee;border-top:3px solid #2196F3;border-radius:50%;animation:spin 1s linear infinite}.alert-customer-section{border:2px solid #e53935;border-radius:8px;padding:1rem;margin-top:1.5rem;background:#fafafa}.section-title{font-weight:600;color:#333;margin-bottom:.75rem}.app{height:100vh;width:100vw;max-width:100%;overflow-x:hidden;background-color:#f5f5f5}.app-header{background:#fff;padding:1rem 2rem;box-shadow:0 2px 4px #0000001a;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.app-header h1{margin:0;color:#333;font-size:1.75rem}.header-actions{display:flex;gap:1rem}.refresh-button,.logout-button{padding:.5rem 1rem;border:none;border-radius:4px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.refresh-button{background-color:#2196f3;color:#fff}.refresh-button:hover:not(:disabled){background-color:#1976d2}.refresh-button:disabled{background-color:#ccc;cursor:not-allowed}.logout-button{background-color:#f44336;color:#fff}.logout-button:hover{background-color:#d32f2f}.tabs-container{background:#fff;border-bottom:2px solid #e0e0e0;box-shadow:0 2px 4px #0000000d}.tabs{max-width:1400px;display:flex;gap:0}.tab{padding:1rem 2rem;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:1rem;font-weight:500;color:#666;transition:all .3s;position:relative}.tab:hover{color:#333;background-color:#f9f9f9}.tab.active{color:#2196f3;border-bottom-color:#2196f3;background-color:#f5f9ff}.app-content{margin:0 auto;padding:1rem 2rem}.error-banner{background-color:#ffebee;color:#c62828;padding:1rem;border-radius:4px;margin-bottom:1rem;text-align:center}.error-banner p{margin:0}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:400px;color:#666}.spinner-large{width:60px;height:60px;border:6px solid #f3f3f3;border-top:6px solid #4CAF50;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-footer{text-align:center;margin-top:1rem;padding:1rem;color:#666;font-size:.9rem}.app-footer p{margin:0}@media(max-width:768px){.app-header{flex-direction:column;text-align:center}.app-header h1{font-size:1.5rem}.app-content{padding:1rem}}
