.mobile-header{align-items:center;background:#232a34;box-shadow:0 2px 4px #0000001a;color:#fff;display:none;height:60px;justify-content:space-between;left:0;padding:0 16px;position:fixed;top:0;width:100%;z-index:1000}.mobile-logo{align-items:center;display:flex}.mobile-logo-img{height:28px;margin-right:8px;width:28px}.mobile-menu-button{align-items:center;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:6px;height:40px;justify-content:center;padding:0;width:40px}.mobile-menu-button span{background:#fff;display:block;height:2px;transition:transform .3s ease,opacity .3s ease;width:24px}.mobile-title{font-size:1.2rem;font-weight:600}.sidebar{background:#232a34;box-shadow:2px 0 5px #0000001a;color:#fff;height:100vh;left:0;overflow-y:auto;position:fixed;top:0;transition:transform .3s ease;width:240px;z-index:1001}.sidebar-header{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;font-size:1.3rem;font-weight:600;padding:20px 16px}.logo-img{height:32px;margin-right:12px;width:32px}.sidebar-links{display:flex;flex-direction:column;padding:12px 0}.sidebar-links a{border-left:3px solid #0000;color:#fff;font-size:1rem;padding:14px 20px;text-decoration:none;transition:all .2s ease}.sidebar-links a.active,.sidebar-links a:hover{background:#ffffff14;border-left:3px solid #00bcd4;color:#00bcd4}.sidebar-divider{background:#ffffff1a;border:0;height:1px;margin:10px 20px}.sidebar-backdrop{background:#00000080;display:none;height:100%;left:0;opacity:0;position:fixed;top:0;transition:opacity .3s ease;width:100%;z-index:1000}.main-content{padding:20px;transition:margin-left .3s ease}@media (max-width:768px){.mobile-header{display:flex}.sidebar{transform:translateX(-100%);width:280px}.main-content{margin-left:0;margin-top:60px;padding:16px}body.mobile-menu-open .sidebar{transform:translateX(0)}body.mobile-menu-open .sidebar-backdrop{display:block;opacity:1}body.mobile-menu-open .mobile-menu-button span:first-child{transform:translateY(8px) rotate(45deg)}body.mobile-menu-open .mobile-menu-button span:nth-child(2){opacity:0}body.mobile-menu-open .mobile-menu-button span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}}@media (min-width:769px) and (max-width:1024px){.sidebar{width:220px}.main-content{margin-left:220px}}@media (min-width:1400px){.sidebar{width:260px}.main-content{margin-left:260px}}@media print{.mobile-header,.sidebar,.sidebar-backdrop{display:none}.main-content{margin-left:0;margin-top:0}}body:after{background:#0000001a;border-radius:3px;bottom:5px;color:#fff;content:"v2.1-mobile";font-size:8px;padding:2px 5px;position:fixed;right:5px;z-index:9999}.dashboard-page{margin:0 auto;max-width:1200px;padding:20px;width:100%}.dashboard-status{align-items:center;display:flex;gap:16px}.data-source-indicator{border-radius:16px;font-size:14px;gap:8px;padding:6px 12px}.data-source-indicator.live{background-color:#4caf501a;color:#4caf50}.data-source-indicator.mock{background-color:#ff98001a;color:#ff9800}.data-source-indicator.error{background-color:#f443361a;color:#f44336}.data-source-indicator.loading{background-color:#03a9f41a;color:#03a9f4}.indicator-dot{border-radius:50%;display:inline-block;height:8px;width:8px}.live .indicator-dot{animation:pulse 2s infinite;background-color:#4caf50}.mock .indicator-dot{background-color:#ff9800}.error .indicator-dot{background-color:#f44336}.loading .indicator-dot{background-color:#03a9f4}.last-updated{color:#666;font-size:14px}.add-device-button{align-items:center;border-radius:4px;display:flex;font-size:14px;font-weight:500;padding:10px 16px}.dashboard-filters{align-items:center;display:flex;justify-content:space-between;margin-bottom:24px}.tab-controls{display:flex;gap:2px}.tab-button{background-color:#f5f5f5;border:none;border-radius:4px;color:#555;cursor:pointer;font-size:14px;font-weight:500;padding:10px 16px}.tab-button.active{background-color:#00bcd4;color:#fff}.tab-button:hover:not(.active){background-color:#e0e0e0}.device-selector{align-items:center;display:flex;gap:10px}.device-selector label{color:#555;font-weight:500}.device-selector select{background-color:#f8f8f8;border:1px solid #ddd;border-radius:4px;font-size:14px;min-width:150px;padding:8px 12px}.dashboard-charts-row{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr 1fr;margin-bottom:30px}.dashboard-chart-block{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:20px}.dashboard-chart-block h3{color:#333;font-size:18px;font-weight:600;margin-bottom:16px;margin-top:0}.valve-status-box-container{display:flex;justify-content:center;margin-bottom:16px}.valve-status-square{align-items:center;display:flex;flex-direction:column;gap:8px}.valve-status-icon{height:32px;width:32px}.valve-status-label{font-size:14px;font-weight:500}.valve-status-label.open{color:#4caf50}.valve-status-label.closed{color:#f44336}.chart-with-weather{position:relative}.weather-line{bottom:24px;position:absolute;right:24px}.weather-indicator{background-color:#2196f31a;border-radius:16px;color:#2196f3;font-size:14px;gap:8px;padding:4px 12px}.weather-icon{font-size:16px}.dashboard-alert-list{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;margin-bottom:30px;padding:20px}.dashboard-alert-list h3{color:#333;font-size:18px;font-weight:600;margin-bottom:16px;margin-top:0}.dashboard-alert-list table{border-collapse:collapse;margin-bottom:20px;width:100%}.dashboard-alert-list th{background-color:#f5f5f5;font-weight:600;text-align:left}.dashboard-alert-list td,.dashboard-alert-list th{border-bottom:1px solid #e0e0e0;color:#333;padding:12px 16px}.dashboard-alert-list tr:last-child td{border-bottom:none}.loading{font-size:16px;height:300px}@media (max-width:768px){.dashboard-header{align-items:flex-start;flex-direction:column}.dashboard-actions,.dashboard-status{margin-top:16px}.dashboard-filters{align-items:flex-start;flex-direction:column}.device-selector{margin-top:16px}.dashboard-charts-row{grid-template-columns:1fr}}.consumption-stats{display:flex;justify-content:space-between;margin-bottom:15px;padding:0 10px}.consumption-range span,.consumption-total span{color:#00bcd4;font-weight:600}.weather-line{display:flex;justify-content:center;margin-top:8px}.weather-indicator{align-items:center;color:#666;display:flex;font-size:.85rem;font-style:italic;gap:6px}.weather-icon{color:#9c27b0}.device-registration-overlay{align-items:center;background-color:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.device-registration-modal{background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026;max-height:90vh;max-width:500px;overflow-y:auto;padding:24px;position:relative;width:90%}.close-button{background:none;border:none;color:#666;cursor:pointer;font-size:24px;line-height:1;position:absolute;right:10px;top:10px}.device-registration-modal h2{color:#232a34;margin-bottom:20px;margin-top:0;text-align:center}.form-group{margin-bottom:20px}.form-group label{color:#232a34;margin-bottom:6px}.form-group input{border:1px solid #ddd;border-radius:8px;font-size:16px;padding:10px 12px;width:100%}.device-type-selector{display:flex;gap:12px;margin-top:10px}.device-option{align-items:center;border:2px solid #eee;border-radius:10px;cursor:pointer;display:flex;flex:1 1;flex-direction:column;padding:12px 16px;transition:all .2s ease}.device-option:hover{background-color:#f5f5f5;border-color:#00bcd4}.device-option.selected{background-color:#00bcd40d;border-color:#00bcd4}.device-icon{align-items:center;background:#f5f5f5;border-radius:50%;display:flex;font-size:28px;height:50px;justify-content:center;margin-bottom:8px;width:50px}.form-actions{display:flex;gap:12px;justify-content:space-between;margin-top:30px}.form-actions button{border:none;border-radius:8px;cursor:pointer;flex:1 1;font-weight:600;padding:12px;transition:background-color .2s}.next-button,.submit-button{background-color:#00bcd4;color:#fff}.next-button:hover,.submit-button:hover{background-color:#0097a7}.back-button{background-color:#f0f0f0;color:#333}.back-button:hover{background-color:#e0e0e0}.submit-button:disabled{background-color:#ccc;cursor:not-allowed}.input-with-unit{align-items:center;display:flex}.input-with-unit input{border-bottom-right-radius:0;border-top-right-radius:0}.unit{background-color:#f5f5f5;border:1px solid #ddd;border-bottom-right-radius:8px;border-left:none;border-top-right-radius:8px;color:#666;padding:10px 12px}.form-help-text{color:#666;font-size:13px;margin-top:6px}.form-group select{-webkit-appearance:menulist;appearance:menulist;background-color:#fff;border:1px solid #ddd;border-radius:8px;cursor:pointer;font-size:16px;padding:10px 12px;width:100%}@media (max-width:768px){.device-registration-modal{padding:20px 16px;width:95%}.device-type-selector{flex-direction:column}}.water-meter-page,.watermeter-page{margin:0 auto;max-width:1200px;padding:20px;width:100%}.watermeter-header{align-items:center;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;margin-bottom:24px;padding-bottom:16px}.data-source-indicator{align-items:center;display:flex;gap:16px}.live-data{align-items:center;background-color:#4caf501a;border-radius:16px;color:#4caf50;display:flex;font-weight:600;padding:6px 12px}.live-data:before{animation:pulse 2s infinite;background-color:#4caf50;border-radius:50%;content:"";display:inline-block;height:10px;margin-right:8px;width:10px}.mock-data{align-items:center;background-color:#ff98001a;border-radius:16px;color:#ff9800;display:flex;font-weight:600;padding:6px 12px}.mock-data:before{background-color:#ff9800;border-radius:50%;content:"";display:inline-block;height:10px;margin-right:8px;width:10px}.data-timestamp{color:#666;font-size:.9rem}.dashboard-actions{align-items:center;background-color:#fff;border-radius:10px;box-shadow:0 2px 8px #0000000d;display:flex;justify-content:space-between;margin-bottom:24px;padding:16px 24px}.refresh-button{align-items:center;background-color:#00bcd4;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:500;padding:10px 16px;transition:background-color .2s}.refresh-button:hover{background-color:#00a5bb}.refresh-button:disabled{background-color:#b0e0e6;cursor:not-allowed}.refresh-button.refreshing .refresh-icon{animation:spinning 1s linear infinite}.refresh-icon{display:inline-block;font-size:1.2rem;margin-right:8px}.auto-refresh-controls{align-items:center;display:flex;gap:16px}.auto-refresh-toggle{align-items:center;display:flex;gap:8px}.toggle-switch{display:inline-block;height:24px;position:relative;width:40px}.toggle-switch input{height:0;opacity:0;width:0}.toggle-slider{background-color:#ccc;border-radius:34px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.toggle-slider:before{background-color:#fff;border-radius:50%;bottom:4px;content:"";height:16px;left:4px;position:absolute;transition:.4s;width:16px}input:checked+.toggle-slider{background-color:#4caf50}input:checked+.toggle-slider:before{transform:translateX(16px)}.refresh-interval{align-items:center;display:flex;gap:8px}.refresh-interval select{background-color:#f8f8f8;border:1px solid #ddd;border-radius:4px;padding:6px 10px}.error-message{background-color:#fff8f8;border:1px solid #ffcdd2;border-radius:8px;box-shadow:0 2px 8px #0000000d;margin-bottom:24px;padding:20px}.error-content{align-items:center;display:flex;margin-bottom:16px}.error-icon{font-size:24px;margin-right:12px}.error-content p{color:#d32f2f;flex:1 1;font-weight:500;margin:0}.retry-button{background-color:#d32f2f;border:none;border-radius:4px;color:#fff;cursor:pointer;font-weight:500;padding:8px 16px;transition:background-color .2s}.retry-button:hover{background-color:#b71c1c}.error-help{border-top:1px solid #ffcdd2;color:#666;padding-top:16px}.error-help p{font-weight:500;margin-top:0}.error-help ol{margin:8px 0 0 20px;padding:0}.current-reading-panel{grid-gap:24px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:32px}.reading-box{background-color:#fff;border-radius:10px;box-shadow:0 2px 8px #0000000d;padding:24px;position:relative;text-align:center}.reading-box h3{color:#555;font-size:1.1rem;margin-bottom:16px;margin-top:0}.reading-value{color:#232a34;font-size:2.5rem;font-weight:700;margin-bottom:8px}.value.threshold{color:#ff9800;font-weight:600}.threshold-warning{align-items:center;background-color:#ff98001a;border-radius:4px;color:#ff9800;display:flex;font-size:.85rem;font-weight:500;gap:8px;margin-top:10px;padding:8px 12px}.warning-icon{font-size:1.1rem}.meter-info-panel{grid-gap:24px;align-items:center;background-color:#fff;border-radius:10px;box-shadow:0 2px 8px #0000000d;display:grid;grid-template-columns:auto 1fr auto;margin-bottom:32px;padding:24px}.meter-image img{width:100px}.meter-details{padding-right:24px}.meter-details h2{color:#232a34;margin-bottom:16px;margin-top:0}.info-table{border-collapse:collapse;width:100%}.info-table td{border-bottom:1px solid #f0f0f0;padding:8px 0}.info-table td:first-child{color:#555;font-weight:500;width:200px}.valve-status{align-items:center;border-left:1px solid #f0f0f0;display:flex;flex-direction:column;font-weight:500;gap:8px;padding-left:24px}.valve-indicator{border-radius:50%;height:40px;position:relative;width:40px}.valve-indicator.open{background-color:#4caf50}.valve-indicator.closed{background-color:#f44336}.valve-indicator:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');background-repeat:no-repeat;background-size:contain;content:"";height:20px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:20px}.stats-container{grid-gap:24px;display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:32px}.stat-box{background-color:#fff;border-radius:10px;box-shadow:0 2px 8px #0000000d;padding:24px;text-align:center}.stat-box h3{color:#555;font-size:1rem;margin-bottom:8px;margin-top:0}.stat-value{color:#232a34;font-size:1.8rem;font-weight:600}.charts-container{background-color:#fff;border-radius:10px;box-shadow:0 2px 8px #0000000d;margin-bottom:32px;padding:24px}.chart-controls{display:flex;justify-content:flex-end;margin-bottom:16px}.time-period-buttons{display:flex;gap:8px}.time-button{background-color:#f5f5f5;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;padding:8px 16px;transition:background-color .2s}.time-button:hover{background-color:#e0e0e0}.time-button.active{background-color:#00bcd4;color:#fff}.chart-section{margin-bottom:32px}.chart-section h3{color:#232a34;font-size:1.1rem}.custom-tooltip{background-color:#fff;border:1px solid #f0f0f0;box-shadow:0 2px 8px #00000026;padding:12px}.custom-tooltip .label{color:#232a34;font-weight:600;margin-bottom:8px}.loading-container{color:#555;font-size:1.2rem}.loading-spinner{border:4px solid #00bcd433}@keyframes pulse{0%{box-shadow:0 0 0 0 #4caf5066}70%{box-shadow:0 0 0 10px #4caf5000}to{box-shadow:0 0 0 0 #4caf5000}}@keyframes spinning{to{transform:rotate(1turn)}}@media (max-width:900px){.meter-info-panel{grid-template-columns:1fr}.meter-image{text-align:center}.valve-status{border-left:none;border-top:1px solid #f0f0f0;padding-left:0;padding-top:16px}.stats-container{grid-template-columns:1fr}.time-filter{align-items:flex-start;flex-direction:column}}@media (max-width:768px){.watermeter-header{align-items:flex-start;flex-direction:column}.data-source-indicator{margin-top:16px}.charts-container{padding:16px}.chart-controls,.dashboard-actions{align-items:flex-start;flex-direction:column}.dashboard-actions{gap:16px}.auto-refresh-controls{align-items:flex-start;flex-direction:column}.current-reading-panel{grid-template-columns:1fr}}.add-device-button{background-color:#00bcd4;border:none;border-radius:6px;color:#fff;cursor:pointer;font-weight:600;padding:8px 14px;transition:background-color .2s}.add-device-button:hover{background-color:#0097a7}.filter-controls{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:24px}.device-filter,.time-filter{align-items:center;display:flex;gap:10px}.device-filter label,.time-filter label{font-weight:500;white-space:nowrap}.device-filter select,.time-filter select{border:1px solid #ddd;border-radius:6px;min-width:180px;padding:8px 12px}.device-table-container{margin-bottom:24px;overflow-x:auto}.device-table{background-color:#fff;border-collapse:collapse;border-radius:10px;box-shadow:0 2px 8px #0000000a;width:100%}.device-table th{border-bottom:2px solid #eee;color:#444;font-weight:600;padding:12px 16px;text-align:left}.device-table td{border-bottom:1px solid #eee;padding:12px 16px}.status-on{color:green;font-weight:500}.status-off{color:red;font-weight:500}.flow-status-indicator{gap:8px}.flow-icon{border-radius:50%;height:12px;width:12px}.flow-icon.flowing{animation:pulse 2s infinite;background-color:#2196f3;box-shadow:0 0 8px #2196f380}.flow-icon.not-flowing{background-color:#aaa}.flow-active{color:#2196f3;font-weight:500}.flow-inactive{color:#777}.action-button{background-color:#f5f5f5;font-size:.9rem;padding:6px 10px}.action-button:hover{background-color:#e0e0e0}.watermeter-charts-row{display:flex;gap:32px;margin:32px 0}.watermeter-chart-block{background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000000a;flex:1 1;min-width:320px;padding:24px 18px 18px}.watermeter-chart-block h3{color:#232a34;font-size:1.1rem;margin-bottom:16px;margin-top:0}.meter-details-section{margin-bottom:24px}.action-button{background-color:#00bcd4;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.8rem;padding:6px 12px;transition:background-color .2s}.action-button:hover{background-color:#0097a7}.action-button.view-details{background-color:#673ab7}.action-button.view-details:hover{background-color:#512da8}.action-button.toggle-flow{background-color:#ff9800}.action-button.toggle-flow:hover{background-color:#f57c00}.dashboard-content{grid-gap:24px;display:grid;grid-template-columns:1fr 300px}.main-content{width:100%}.status-panel{background-color:#fff;border-radius:10px;box-shadow:0 2px 8px #0000000d;height:fit-content;position:sticky;top:24px}.status-panel-header{border-bottom:1px solid #f0f0f0;padding:16px}.status-panel-header h3{color:#232a34;font-size:1.1rem;margin:0}.status-events-list{max-height:600px;overflow-y:auto;padding:8px 16px}.status-event{grid-gap:12px;align-items:center;border-bottom:1px solid #f5f5f5;display:grid;grid-template-columns:auto auto 1fr;padding:12px 0}.status-event:last-child{border-bottom:none}.event-time{color:#666;font-size:.85rem;white-space:nowrap}.event-icon{align-items:center;display:flex;font-size:1.4rem;justify-content:center}.event-message{color:#333;font-size:.95rem}.status-event.data_received .event-icon{color:#2196f3}.status-event.valve_status .event-icon{color:#4caf50}.status-event.alert .event-icon{color:#ff9800}.status-event.error .event-icon{color:#f44336}.no-events{color:#666;font-style:italic;padding:24px 0;text-align:center}.status-panel-toggle{background-color:#f5f5f5;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;padding:8px 16px;transition:background-color .2s}.status-panel-toggle:hover{background-color:#e0e0e0}.status-panel-toggle.active{background-color:#673ab7;color:#fff}@media (max-width:1024px){.dashboard-content{grid-template-columns:1fr}.status-panel{margin-bottom:32px;position:static}}.water-meter-dashboard{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:24px}.dashboard-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:24px;padding-bottom:16px}.dashboard-header h1{color:#333;font-size:28px;margin:0}.add-water-meter-button{align-items:center;background-color:#00bcd4;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;padding:10px 16px}.add-water-meter-button:hover{background-color:#0097a7}.control-panel{display:flex;justify-content:space-between;margin-bottom:20px}.device-selector,.time-range-selector{align-items:center;display:flex;gap:10px}.device-selector label,.time-range-selector label{color:#555;font-weight:500}.device-selector select,.time-range-selector select{background-color:#f8f8f8;border:1px solid #ddd;border-radius:4px;font-size:14px;min-width:150px;padding:8px 12px}.water-meters-table{margin-bottom:30px;overflow-x:auto}.water-meters-table table{background-color:#fff;border-collapse:collapse;border-radius:8px;border-spacing:0;box-shadow:0 2px 8px #0000001a;overflow:hidden;width:100%}.water-meters-table th{background-color:#f5f5f5;font-weight:600;text-align:left}.water-meters-table td,.water-meters-table th{border-bottom:1px solid #e0e0e0;color:#333;padding:12px 16px}.water-meters-table tr:last-child td{border-bottom:none}.water-meters-table tr:hover{background-color:#f9f9f9}.status-badge{border-radius:12px;display:inline-block;font-size:12px;font-weight:600;padding:4px 12px;text-transform:uppercase}.status-badge.on{background-color:#4caf5026;color:#4caf50}.status-badge.off{background-color:#f4433626;color:#f44336}.flow-status-indicator{align-items:center;display:flex;font-size:14px;gap:5px}.flow-status-indicator.flowing{color:#2196f3}.flow-status-indicator.not-flowing{color:#9e9e9e}.action-buttons{display:flex;gap:8px}.toggle-flow-button,.view-details-button{border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;padding:6px 12px}.toggle-flow-button{background-color:#ff9800;color:#fff}.toggle-flow-button:hover{background-color:#f57c00}.view-details-button{background-color:#673ab7;color:#fff}.view-details-button:hover{background-color:#5e35b1}.charts-container{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr 1fr;margin-bottom:30px}.chart-section{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:20px}.chart-section h3{color:#333;font-size:18px;font-weight:600;margin-bottom:16px;margin-top:0}.data-source-footer{display:flex;justify-content:flex-end;margin-top:20px}.export-report-button{align-items:center;background-color:initial;border:1px solid #ccc;border-radius:4px;color:#555;cursor:pointer;display:flex;font-size:14px;gap:8px;padding:8px 16px}.export-report-button:hover{background-color:#f5f5f5}.loading-container{align-items:center;display:flex;flex-direction:column;height:300px;justify-content:center}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #f3f3f3;border-radius:50%;border-top-color:#00bcd4;height:40px;margin-bottom:16px;width:40px}.error-container{background-color:#ffebee;border-radius:8px;margin-bottom:24px;padding:24px;text-align:center}.error-container h3{color:#d32f2f;margin-top:0}.error-container button{background-color:#d32f2f;border:none;border-radius:4px;color:#fff;cursor:pointer;margin-top:16px;padding:8px 16px}.error-container button:hover{background-color:#c62828}@media (max-width:768px){.charts-container{grid-template-columns:1fr}.control-panel{align-items:flex-start;flex-direction:column;gap:16px}}.device-info-panel{align-items:center;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;display:flex;margin-bottom:24px;padding:20px}.meter-image{flex:0 0 120px;margin-right:24px}.meter-image img{border-radius:4px;height:auto;max-width:100%}.device-details{flex:1 1}.device-details h3{color:#333;font-size:18px;font-weight:600;margin-bottom:16px;margin-top:0}.info-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.info-item{display:flex;flex-direction:column}.info-item .label{color:#666;font-size:14px;margin-bottom:4px}.info-item .value{color:#333;font-size:16px;font-weight:500}.value.consumption{color:#00bcd4;font-weight:600}.value.valve-status-open{color:#4caf50}.value.valve-status-closed{color:#f44336}.consumption-summary{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(3,1fr);margin-bottom:24px}@media (max-width:768px){.device-info-panel{align-items:flex-start;flex-direction:column}.meter-image{margin-bottom:16px;margin-right:0}.consumption-summary,.info-grid{grid-template-columns:1fr}}.chart-info{align-items:center;color:#666;display:flex;font-size:.85rem;justify-content:space-between;margin-bottom:10px}.chart-info-text{font-style:italic}.chart-info-rate{color:#4caf50;font-weight:600}.custom-tooltip{background-color:#fffffff2;border:1px solid #ccc;border-radius:6px;box-shadow:0 3px 14px #00000026;padding:10px 14px}.custom-tooltip p{font-size:.9rem;margin:4px 0}.tooltip-date{border-bottom:1px solid #eee;color:#333;font-weight:600;margin-bottom:8px!important;padding-bottom:5px}.tooltip-usage{color:#00bcd4;font-weight:500}.tooltip-rainfall{color:#9c27b0;font-weight:500}.tooltip-cost{color:#4caf50;font-weight:600}.summary-cost{color:#4caf50;font-size:.85rem;margin-top:4px}.data-source-info{display:flex;flex-direction:column;gap:4px}.data-indicator{align-items:center;color:#4caf50;display:flex;font-size:.85rem}.last-update-time{color:#666;font-size:.8rem}.electricitymeter-page{margin:0 auto;max-width:1200px;width:100%}.electricitymeter-charts-row{display:flex;gap:32px;margin:32px 0}.electricitymeter-chart-block{background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000000a;flex:1 1;min-width:320px;padding:24px 18px 18px}.circuit-status-block{display:flex;justify-content:flex-end;margin-top:24px}.circuit-btn{border:none;border-radius:20px;box-shadow:0 2px 8px #0000000a;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;padding:10px 28px;transition:background .2s}.circuit-btn,.circuit-btn.open{background:#00bcd4}.circuit-btn.closed{background:#e53935}@media (max-width:900px){.electricitymeter-charts-row{flex-direction:column;gap:18px}}@media (max-width:700px){.electricitymeter-charts-row{flex-direction:column;gap:12px}.electricitymeter-chart-block{min-width:0;padding:12px 4px}}.alerthistory-page{margin:0 auto;max-width:1200px;width:100%}.alerthistory-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:24px}.alert-export{display:flex;gap:12px}.export-button{background-color:#f5f5f5;border:none;border-radius:6px;color:#444;font-weight:500;gap:6px;transition:background-color .2s}.export-button:hover{background-color:#e0e0e0}.alerthistory-charts-row{display:flex;gap:32px;margin-bottom:32px}.alerthistory-chart-block{background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000000a;flex:1 1;min-width:320px;padding:24px 18px 18px}.alerthistory-chart-block h3{color:#232a34;font-size:1.1rem;margin-bottom:16px;margin-top:0;text-align:center}.alerthistory-filters{margin-bottom:24px}.filter-group{margin-bottom:16px}.filter-group label{color:#444;font-weight:500;margin-right:12px}.filter-group select{border:1px solid #ddd;border-radius:6px;min-width:180px;padding:8px 12px}.filter-row{display:flex;flex-wrap:wrap;gap:24px}.search-input{border:1px solid #ddd;border-radius:6px;font-size:1rem;padding:10px 16px;width:100%}.alerthistory-table-container{overflow-x:auto}.alerthistory-table-block{background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000000a;margin-bottom:24px;padding:24px 18px 18px}.alerthistory-table-block table{border-collapse:collapse;width:100%}.alerthistory-table-block th{border-bottom:2px solid #eee;color:#444;font-weight:600;padding:12px 16px;text-align:left}.alerthistory-table-block td{border-bottom:1px solid #eee;padding:12px 16px;vertical-align:top}.risk-badge{border-radius:12px;color:#fff;display:inline-block;font-size:.9rem;font-weight:600;min-width:80px;padding:2px 14px;text-align:center}.alert-time{color:#666;font-size:.85rem}.device-type-indicator{border-radius:50%;display:inline-block;height:12px;margin-left:8px;width:12px}.device-type-indicator.water{background-color:#00bcd4}.device-type-indicator.electricity{background-color:#ff9800}.no-alerts-message{color:#666;font-style:italic;padding:24px!important;text-align:center}@media (max-width:992px){.alerthistory-charts-row{flex-direction:column;gap:18px}.filter-row{flex-direction:column;gap:12px}.filter-group select{width:100%}}@media (max-width:768px){.alerthistory-header{align-items:flex-start}.alerthistory-charts-row,.alerthistory-header{flex-direction:column;gap:12px}.alerthistory-chart-block{min-width:0;padding:12px 8px}.alerthistory-table-block{padding:16px 8px}.alerthistory-table-block td,.alerthistory-table-block th{font-size:.9rem;padding:8px}}.billing-page{margin:0 auto;max-width:1200px;padding:20px;width:100%}.billing-header{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-bottom:24px}.billing-header h1{color:#333;font-size:28px;margin:0}.time-range-selector{align-items:center;display:flex;gap:12px}.time-range-selector label{color:#444;font-weight:500;white-space:nowrap}.time-range-selector select{background-color:#fff;border:1px solid #ddd;border-radius:6px;min-width:150px;padding:8px 12px}.billing-charts-row{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr 1fr;margin-bottom:30px}.billing-chart-block{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:20px}.billing-chart-block h3{color:#333;font-size:18px;font-weight:600;margin-bottom:18px;margin-top:0;text-align:center}.billing-summary{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(3,1fr);margin-bottom:30px}.summary-item{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:20px;text-align:center}.summary-item h3{color:#333;font-size:16px;font-weight:500;margin-bottom:12px;margin-top:0}.summary-value{color:#00bcd4;font-size:24px;font-weight:600}.billing-table-container{margin-bottom:32px}.billing-table-container h3{color:#333;font-size:18px;font-weight:600;margin-bottom:16px}.billing-table-block{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow-x:auto;padding:20px}.billing-table-block table{border-collapse:collapse;border-spacing:0;width:100%}.billing-table-block th{background-color:#f5f5f5;font-weight:600;text-align:left}.billing-table-block td,.billing-table-block th{border-bottom:1px solid #e0e0e0;color:#333;padding:12px 16px}.billing-table-block tr:last-child td{border-bottom:none}.total-row{background-color:#f9f9f9}.total-row td{border-top:1px solid #e0e0e0;font-weight:600}.export-section{display:flex;justify-content:flex-end;margin-bottom:20px;margin-top:20px}.export-button{align-items:center;background-color:initial;border:1px solid #ccc;border-radius:4px;color:#555;cursor:pointer;display:flex;font-size:14px;gap:8px;padding:8px 16px}.export-button:hover{background-color:#f5f5f5}.export-icon{font-size:16px}@media (max-width:900px){.billing-charts-row{gap:24px;grid-template-columns:1fr}.billing-summary{gap:16px;grid-template-columns:1fr}}@media (max-width:768px){.billing-header{align-items:flex-start;flex-direction:column}.time-range-selector{width:100%}.time-range-selector select{flex:1 1}.billing-chart-block,.billing-table-block{padding:16px}}.contactus-page{margin:0 auto;max-width:1200px;width:100%}.contactus-content-row{display:flex;gap:48px;margin-top:24px}.contactus-details{display:flex;flex:1 1;flex-direction:column;font-size:1rem;gap:24px;justify-content:flex-start}.contact-intro{color:#444;font-size:1.1rem;line-height:1.6;margin-bottom:20px}.contact-cards{display:flex;flex-direction:column;gap:24px;margin-bottom:16px}.contact-card{background-color:#f5f5f5;border-radius:12px;box-shadow:0 2px 8px #0000000f;padding:20px}.contact-card h3{color:#232a34;font-size:1.1rem;margin-bottom:16px;margin-top:0}.contact-card p{color:#666;font-size:.9rem;margin:12px 0 0}.contact-address{margin-top:10px}.contact-address h3{color:#232a34;font-size:1.1rem;margin-bottom:12px;margin-top:0}.contact-address p{color:#444;line-height:1.5;margin:8px 0}.contactus-icon-row{align-items:center;display:flex;gap:16px;margin-bottom:12px}.contactus-icon{background:#00bcd4;border-radius:50%;box-shadow:0 2px 4px #0000001a;display:inline-block;height:32px;margin-right:8px;width:32px}.contactus-icon.email:before{content:"\2709"}.contactus-icon.email:before,.contactus-icon.phone:before{color:#fff;display:block;font-size:1.2rem;line-height:32px;text-align:center}.contactus-icon.phone:before{content:"\260E"}.contactus-form-container{flex:1 1}.contactus-form{background:#fff;border-radius:18px;box-shadow:0 4px 16px #00000014;display:flex;flex-direction:column;gap:18px;padding:32px 24px}.contactus-form h2{color:#232a34;font-size:1.3rem;margin-bottom:16px;margin-top:0;text-align:center}.contactus-form-row{display:flex;gap:12px}.contactus-form input,.contactus-form textarea{border:1px solid #ddd;border-radius:8px;font-size:1rem;margin-bottom:8px;padding:12px 16px;width:100%}.contactus-form textarea{min-height:120px;resize:vertical}.contact-preference{margin-top:8px}.contact-preference p{font-weight:500;margin:0 0 8px}.radio-options{display:flex;gap:24px}.radio-options label{align-items:center;cursor:pointer;display:flex;gap:8px}.contactus-form button{align-self:center;background:#00bcd4;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;margin-top:16px;padding:12px 32px;transition:background .2s}.contactus-form button:hover{background:#0097a7}.form-success-message{background:#e8f5e9;border-radius:18px;box-shadow:0 4px 16px #00000014;flex-direction:column;height:100%;padding:32px 24px;text-align:center}.form-success-message,.success-icon{align-items:center;display:flex;justify-content:center}.success-icon{background:#4caf50;border-radius:50%;color:#fff;font-size:32px;height:64px;margin-bottom:24px;width:64px}.form-success-message h3{color:#2e7d32;font-size:1.5rem;margin:0 0 12px}.form-success-message p{color:#388e3c;font-size:1.1rem;margin:0}@media (max-width:992px){.contactus-content-row{flex-direction:column;gap:32px}.contact-cards{flex-direction:row;flex-wrap:wrap}.contact-card{flex:1 1;min-width:250px}}@media (max-width:768px){.contactus-content-row{gap:24px}.contact-cards{flex-direction:column}.contactus-form{padding:24px 16px}.contactus-form-row{flex-direction:column;gap:0}}.valve-status-bar{align-items:center;background:#e0f7fa;border-radius:18px;box-shadow:0 2px 8px #00bcd414;display:flex;font-size:1.15rem;font-weight:600;gap:12px;margin:0 0 24px;padding:10px 24px;width:fit-content}.valve-icon{font-size:1.6rem}.valve-status-text.open{color:#009688}.valve-status-text.closed{color:#e53935}.auth-page{align-items:center;display:flex;justify-content:center;min-height:80vh}.auth-form-container{background:#fff;border-radius:18px;box-shadow:0 2px 8px #00000014;max-width:480px;min-width:320px;padding:40px 32px}.auth-form,.auth-form-container{display:flex;flex-direction:column;gap:18px;width:100%}.auth-form-row{display:flex;gap:12px}.auth-form input{border:1px solid #e0e0e0;border-radius:12px;font-size:1rem;padding:10px 14px;width:100%}.auth-form button{align-self:center;background:#00bcd4;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;margin-top:8px;padding:10px 28px;transition:background .2s}.auth-form button:hover{background:#0097a7}.auth-buttons{display:flex;justify-content:space-between;margin-top:10px;width:100%}.back-button{background:#f0f0f0!important;color:#333!important}.back-button:hover{background:#e0e0e0!important}.auth-link-row{display:flex;font-size:.98rem;gap:8px;justify-content:center}.auth-link-row a{color:#00bcd4;font-weight:600;text-decoration:none}.auth-link-row a:hover{text-decoration:underline}.registration-steps{margin-bottom:20px}.registration-steps,.step{align-items:center;display:flex;justify-content:center}.step{background-color:#f0f0f0;border-radius:50%;color:#666;font-weight:700;height:30px;width:30px}.step.active{background-color:#00bcd4;color:#fff}.step-line{background-color:#e0e0e0;height:2px;width:50px}.form-group{margin:10px 0}.form-group label{display:block;font-weight:500;margin-bottom:8px}.radio-group{display:flex;gap:20px}.radio-option{align-items:center;display:flex;gap:6px}.verification-code-input{display:flex;gap:8px;justify-content:space-between;margin:20px 0}.verification-code-input input{border:1px solid #e0e0e0;border-radius:8px;font-size:1.2rem;height:40px;text-align:center;width:40px}.verification-message{color:#555;margin:0;text-align:center}.resend-link{font-size:.9rem;margin:0;text-align:center}.text-button{background:none!important;color:#00bcd4!important;font-size:.9rem!important;margin:0!important;padding:0!important;text-decoration:underline}.auth-error{background:#fdd;border-radius:8px;color:#f44336;font-size:.95rem;margin-bottom:10px;padding:10px;text-align:center}@media (max-width:700px){.auth-form-container{border-radius:12px;max-width:100%;min-width:0;padding:24px 16px}.auth-form-row{flex-direction:column;gap:12px}.verification-code-input input{height:36px;width:36px}}.app-layout{display:flex;position:relative;width:100%}.app-layout,.main-content{background:#f7f9fb;min-height:100vh}.main-content{margin-left:240px;padding:30px;transition:all .3s ease;width:calc(100% - 240px)}body.mobile-view .main-content{margin-left:0!important;margin-top:60px!important;padding:20px 16px!important;width:100%!important}@media (max-width:768px){.main-content{margin-left:0!important;margin-top:60px!important;padding:20px 16px!important;width:100%!important}}@media (min-width:769px) and (max-width:1024px){.main-content{margin-left:220px;padding:24px 20px;width:calc(100% - 220px)}}@media (min-width:1400px){.main-content{margin-left:260px;padding:40px;width:calc(100% - 260px)}}@media print{.main-content{margin-left:0;padding:0;width:100%}}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f7f9fb;color:#232a34;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;margin:0;padding:0}*{box-sizing:border-box}a{color:#00bcd4;text-decoration:none;transition:color .2s ease}a:hover{color:#008ba3}h1,h2,h3,h4,h5,h6{color:#232a34;font-weight:600;line-height:1.2;margin-top:0}p{margin:0 0 1rem}.button,button{background:#00bcd4;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;font-weight:500;padding:10px 16px;transition:background .2s ease}.button:hover,button:hover{background:#008ba3}table{background:#fff;border-collapse:collapse;border-radius:4px;box-shadow:0 1px 3px #0000000d;margin-bottom:24px;overflow:hidden;width:100%}td,th{border:1px solid #e0e0e0;padding:12px 16px;text-align:left}th{background:#f0f4f8;font-weight:600}@media (max-width:768px){table{display:block;overflow-x:auto;width:100%}td,th{padding:10px 12px;white-space:nowrap}body,td,th{font-size:.95rem}h1{font-size:1.8rem}h2{font-size:1.5rem}h3{font-size:1.2rem}}@media (min-width:1400px){.container{margin:0 auto;max-width:1320px}}.loading{align-items:center;color:#666;display:flex;font-size:1.1rem;justify-content:center;min-height:200px}.loading:after{animation:spin 1s linear infinite;border:3px solid #ddd;border-radius:50%;border-top-color:#00bcd4;content:"";height:24px;margin-left:12px;width:24px}@keyframes spin{to{transform:rotate(1turn)}}
/*# sourceMappingURL=main.7c412884.css.map*/