body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}body{background:#f0f8ff;font-family:Inter,Roboto,Helvetica,Arial,sans-serif;height:100vh;overflow-x:hidden;overflow-y:auto}.container{display:flex;height:100%;width:100%}.app-loader{align-items:center;background:linear-gradient(135deg,#e0f2fe,#f0f9ff);color:#1f2937;display:flex;font-family:Inter,system-ui,sans-serif;height:100vh;justify-content:center;width:100vw}.loader-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffc;border:1px solid #06b6d41a;border-radius:16px;box-shadow:0 8px 32px #06b6d433;padding:40px 50px;text-align:center}.pulse-ring{animation:spin 1s linear infinite;border:3px solid #06b6d44d;border-radius:50%;border-top-color:#06b6d4;height:64px;margin:0 auto 20px;width:64px}.loader-card h3{color:#1f2937;font-size:20px;letter-spacing:.5px;margin:0}.loader-card p{color:#6b7280;font-size:13px;margin-top:6px;opacity:.8}.sidebar{background:linear-gradient(180deg,#1e3a8a,#1e40af);box-shadow:4px 0 15px #0000001a;color:#fff;display:flex;flex-direction:column;height:100vh;overflow-y:auto;position:-webkit-sticky;position:sticky;top:0;transition:width .3s ease;width:230px}.sidebar.collapsed{align-items:center;overflow:hidden;width:70px}.sidebar.collapsed .logout-btn .fa-sign-out-alt{font-size:20px;padding:10px}.sidebar-header{justify-content:space-between;justify-content:center;padding:6px}.sidebar-brand,.sidebar-header{align-items:center;display:flex}.sidebar-brand{gap:10px}.sidebar-product-logo{height:auto;width:40px}.product-name{color:#fff;font-size:1.1rem;font-weight:700}.sidebar-header .logo{align-items:center;display:flex;gap:10px}.logo-toggle-container{align-items:center;background:#ffffff1a;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:10px 15px;width:100%}.sidebar-logo{border-radius:8px;height:auto;max-width:120px;transition:opacity .3s ease;width:100%}.toggle-btn{background:#fff3;border:none;border-radius:6px;color:#fff;cursor:pointer;flex-shrink:0;font-size:16px;padding:8px;transition:all .3s}.toggle-btn:hover{background:#ffffff4d;transform:scale(1.1)}.sidebar.collapsed .sidebar-logo{display:none}.sidebar.collapsed .logo-toggle-container{justify-content:center;padding:10px}.sidebar-header h2{font-size:1.3rem;font-weight:600;white-space:nowrap}.sidebar.collapsed .sidebar-header #drop,.sidebar.collapsed .sidebar-header h2{display:none}.nav-links{flex-grow:1;list-style:none;padding:15px 0}.nav-links li{align-items:center;border-radius:10px;cursor:pointer;display:flex;gap:12px;margin:2px 10px;padding:16px 25px;transition:all .3s;white-space:nowrap}.nav-links li:hover{background:#ffffff26;transform:translateX(5px)}.nav-links li.active{background:#fff3;border-left:4px solid #60a5fa;box-shadow:0 4px 12px #0000001a}.nav-links i{font-size:16px;min-width:22px;text-align:center}.nav-text{font-weight:500;transition:opacity .3s}.sidebar.collapsed .nav-text{display:none}.user-section{background:#0000001a;border-top:1px solid #ffffff1a;padding:20px}.user-profile{align-items:center;border-radius:8px;cursor:pointer;display:flex;gap:12px;padding:12px;transition:background .2s}.user-profile:hover{background:#ffffff1a}.user-avatar{align-items:center;background:linear-gradient(45deg,#06b6d4,#0891b2);border-radius:50%;color:#fff;display:flex;font-size:16px;font-weight:700;height:40px;justify-content:center;min-width:40px;width:40px}.user-info{display:flex;flex-direction:column}.user-name{font-size:.95rem;font-weight:600}.user-role{color:#93c5fd;font-size:.8rem;opacity:.8}.sidebar.collapsed .user-info{display:none}.logout-btn{align-items:center;border-radius:8px;color:#ffa4a4;cursor:pointer;display:flex;font-size:medium;gap:10px;justify-content:center;margin-top:8px;padding:10px;text-align:center;transition:background .2s}.logout-btn .fa-sign-out-alt{padding-left:0}.logout-btn:hover{background:#ef444433}.content-area{display:flex;flex:1 1;flex-direction:column;width:calc(100% - 280px)}.sidebar.collapsed~.content-area{width:calc(100% - 60px)}.header{background-color:#fff;box-shadow:0 4px 20px #06b6d44d;height:50px;justify-content:space-between;padding:0 30px;position:-webkit-sticky;position:sticky;top:0;z-index:1000000}.header,.header-left h1{align-items:center;color:#1f2937;display:flex}.header-left h1{font-family:Inter,Roboto,sans-serif;font-size:28px;font-weight:600;gap:12px;line-height:1.4}.diagram-container i{color:#06b6d4}.header-center{flex:1 1;margin:0 30px;max-width:500px}.search-container{display:none;margin-left:120px;position:relative;width:70%}.search-box{background:#fffffff2;border:2px solid #00aff4;border-radius:30px;font-size:14px;outline:none;padding:10px;transition:all .3s;width:100%}.search-box:focus{background:#fff;box-shadow:0 0 0 3px #fff6}.search-icon{color:#6b7280;position:absolute;right:18px;top:50%;transform:translateY(-50%)}.header-right{align-items:center;display:flex;gap:20px;position:relative}.status-indicator{align-items:center;background:#ffffff26;border:2px solid #00aff4;border-radius:20px;display:flex;font-size:14px;gap:8px;padding:8px 15px}.status-dot{animation:pulse 2s infinite;border-radius:50%;height:8px;width:8px}.status-online{background:#10b981}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.main-content{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);box-sizing:border-box;flex:1 1;overflow-x:hidden;overflow-y:auto;padding:30px;width:100%}.content-card{justify-content:space-around}.report-section{border:1px solid #d1d5db;border-radius:8px;font-size:14px;margin:10px;padding:10px}.report-form button{background:linear-gradient(45deg,#06b6d4,#0891b2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;margin:10px;padding:10px 20px;transition:all .3s}.report-form button:hover:not(:disabled){box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.report-form button:disabled{cursor:not-allowed;opacity:.6}.content-hidden{display:none}.water-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px;margin-top:30px;max-width:100%;width:100%}.chart-controls{align-items:center;display:flex;flex-wrap:wrap;gap:15px;margin-bottom:20px}.chart-controls label{color:#1f2937;font-weight:500}.chart-controls input{border:1px solid #d1d5db;border-radius:8px;font-size:14px;outline:none;padding:10px;transition:border-color .2s}.chart-controls input:focus{border-color:#06b6d4;box-shadow:0 0 0 2px #06b6d433}.chart-controls button{background:linear-gradient(45deg,#06b6d4,#0891b2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:10px 20px;transition:all .3s}.chart-controls .reset-button{background:linear-gradient(45deg,#6b7280,#4b5563)}.chart-controls button:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.chart-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(2,1fr);margin-top:20px}.chart-container{background:#fff;border-left:4px solid #0000;border-radius:15px;box-shadow:0 4px 20px #00000014;box-sizing:border-box;max-width:100%;overflow:hidden;padding:20px;width:100%}.chart-title{align-items:center;color:#1f3730;display:flex;font-size:1.2rem;font-weight:600;gap:10px;margin-bottom:15px}.chart-container.water-level{border-left-color:#06b6d4}.chart-container.ph-level{border-left-color:#8b5cf6}.chart-container.temperature{border-left-color:#ef4444}.chart-container.tds{border-left-color:#6366f1}.chart-container.water-consumption{border-left-color:#3b82f6}.stat-card{align-items:center;background:#fff;border-left:4px solid #0000;border-radius:15px;box-shadow:0 4px 20px #00000014;display:flex;gap:20px;height:120px;margin-top:0;padding:0 10px;transition:all .3s;width:350px}.stat-card:hover{box-shadow:0 8px 30px #0000001f;transform:translateY(-3px)}.stat-card.water-level{border-left-color:#06b6d4}.stat-card.ph-level{border-left-color:#8b5cf6}.stat-card.temperature{border-left-color:#ef4444}.stat-card.tds{border-left-color:#6366f1}.stat-card.water-consumption{border-left-color:#3b82f6}.stat-card.cumulative-consumption{border-left-color:#2563eb}.stat-icon{align-items:center;border-radius:15px;color:#fff;display:flex;font-size:14px;height:30px;justify-content:center;width:30px}.stat-icon.water-level{background:linear-gradient(45deg,#06b6d4,#0891b2)}.stat-icon.ph-level{background:linear-gradient(45deg,#8b5cf6,#7c3aed)}.stat-icon.temperature{background:linear-gradient(45deg,#ef4444,#dc2626)}.stat-icon.tds{background:linear-gradient(45deg,#6366f1,#4f46e5)!important}.stat-icon.water-consumption{background:linear-gradient(45deg,#3b82f6,#2563eb)}.stat-icon.cumulative-consumption{background:linear-gradient(45deg,#2563eb,#1d4ed8)}.stat-info h3{color:#1f2937;font-size:2rem;font-weight:700;margin-bottom:5px}.stat-info p{color:#6b7280;font-size:14px;font-weight:500}.stat-status{border-radius:15px;font-size:14px;font-weight:600;margin-top:5px;padding:10px}.status-excellent{background:#d1fae5;color:#065f46}.status-good{background:#cffafe;color:#164e63}.status-warning{background:#fef3c7;color:#92400e}.status-critical,.status-overdue{background:#fee2e2;color:#991b1b}.status-pending{background:#fef3c7;color:#92400e}.status-completed{background:#d1fae5;color:#065f46}.status-table{border-collapse:collapse;margin-top:30px;width:100%}.status-table td,.status-table th{border-top:1px solid #e5e7eb;padding:12px;text-align:left}.status-table th{background:#f3f4f6;color:#1f2937;font-weight:600}.maintenance-table{border-collapse:collapse;margin-top:20px;width:100%}.maintenance-table td,.maintenance-table th{border-top:1px solid #e5e7eb;padding:12px;text-align:left}.maintenance-table th{background:#f3f4f6;color:#1f2937;font-weight:600}.maintenance-controls{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:20px}.maintenance-controls input,.maintenance-controls select{border:1px solid #d1d5db;border-radius:8px;font-size:14px;padding:10px}.report-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}.report-card{background:#fff;border-left:4px solid #0000;border-radius:15px;box-shadow:0 4px 20px #00000014;padding:20px}.report-card.water-level{border-left-color:#06b6d4}.report-card.ph-level{border-left-color:#8b5cf6}.report-card.temperature{border-left-color:#ef4444}.report-card.tds{border-left-color:#6366f1}.report-card.water-consumption{border-left-color:#3b82f6}.report-form{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:20px;margin-top:15px}.form-group{flex:1 1;min-width:200px}.form-label{color:#1f2937!important;display:block;font-weight:500;margin-bottom:5px}.form-input{border:1px solid #cbcdce!important;border-radius:8px;color:#1f2937!important;font-size:14px;margin:5px;padding:10px;width:100%}.action-button{border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;margin-right:5px;padding:10px 15px;transition:all .3s}.btn-primary{background:#06b6d4}.btn-success{background:#10b981}.btn-secondary{background:#6b7280}.btn-info{background:#3b82f6}.action-button:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.report-table{border-collapse:collapse;margin-top:20px;width:100%}.report-table td,.report-table th{border-top:1px solid #e5e7eb;padding:12px;text-align:left}.report-table th{background:#f3f4f6;color:#1f2937;font-weight:600}.notification-list{list-style:none;margin-top:20px}.notification-item{align-items:center;background:#f9fafb;border-radius:10px;box-shadow:0 2px 10px #0000000d;display:flex;gap:15px;margin-bottom:10px;padding:15px}.notification-icon{font-size:18px;height:40px;width:40px}.notification-content h4{color:#1f2937;font-size:1rem;margin-bottom:5px}.notification-content p{color:#6b7280;font-size:.9rem}.notification-bell{color:#00aff4;cursor:pointer;font-size:20px;position:relative;transition:transform .2s ease}.notification-bell:hover{transform:scale(1.1)}.notification-badge{align-items:center;background:#ef4444;border:1px solid #fff;border-radius:50%;color:#fff;display:flex;font-size:10px;font-weight:600;height:16px;justify-content:center;position:absolute;right:-5px;top:-5px;width:16px}.notification-dropdown{background:#96c7f0;border-radius:10px;box-shadow:0 4px 20px #00000026;display:none;overflow-y:auto;position:absolute;right:30px;top:50px;width:300px;z-index:10000}.notification-dropdown.show{display:block}.notification-dropdown-header{align-items:center;background:#f3f4f6;color:#1f2937;display:flex;font-weight:600;justify-content:space-between;padding:15px}.clear-notifications{color:#06b6d4;cursor:pointer;font-size:12px;transition:color .2s}.clear-notifications:hover{color:#fcfeff}.notification-dropdown-list{list-style:none;max-height:300px;overflow-y:auto}.notification-dropdown-item{align-items:center;border-bottom:1px solid #e5e7eb;cursor:pointer;display:flex;gap:10px;padding:15px;transition:background .2s}.notification-dropdown-item:hover{background:#f9fafb}.notification-dropdown-item.unread{background:#f0f9ff}.notification-dropdown-icon{align-items:center;border-radius:50%;color:#fff;display:flex;font-size:14px;height:30px;justify-content:center;width:30px}.notification-dropdown-icon.critical{background:#ef4444}.notification-dropdown-icon.warning{background:#f59e0b}.notification-dropdown-icon.info{background:#06b6d4}.notification-dropdown-content h4{color:#1f2937;font-size:14px;margin-bottom:5px}.notification-dropdown-content p{color:#6b7280;font-size:12px}.report-card.notification{border-left-color:#f59e0b}.stat-card.membrane{border-left-color:#10b981}.stat-icon.membrane{background:linear-gradient(45deg,#10b981,#059669)}.tips-container{grid-gap:20px;background:#f0f9ff;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));padding:20px}.tip-card{background:#fff;border:1px solid #06b6d41a;border-radius:15px;box-shadow:0 4px 20px #00000014;display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:20px;transition:all .3s}.tip-card:hover{box-shadow:0 8px 30px #0000001f;transform:translateY(-3px)}.tip-card h3{align-items:center;color:#1f2937;display:flex;font-size:1.2rem;gap:10px;margin-bottom:10px}.tip-card .tip-icon{color:#06b6d4;font-size:1.5rem}.tip-card p{color:#6b7280;flex-grow:1;font-size:.9rem;line-height:1.6;margin-bottom:15px}.know-more-btn{align-self:flex-start;background:linear-gradient(45deg,#06b6d4,#0891b2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:8px 15px;transition:all .3s;width:-webkit-fit-content;width:fit-content}.know-more-btn:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.content-card{background:#fff;border:1px solid #06b6d41a;border-radius:15px;box-shadow:0 4px 20px #00000014;box-sizing:border-box;flex-direction:column;max-width:100%;padding:20px;width:100%}.content-card,.content-card h2{display:flex;margin-bottom:20px}.content-card h2{align-items:center;color:#1f2937;font-size:1.5rem;gap:10px}.content-card h2 i{color:#06b6d4;font-size:1.2rem}.tip-details{margin-top:10px}.tip-details p{color:#6b7280;font-size:.9rem;line-height:1.6}.modal{align-items:center;background:#00000080;display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%}.modal-content{background:#fff;border-radius:15px;box-shadow:0 4px 20px #00000026;max-height:80vh;max-width:500px;overflow-y:auto;padding:20px;position:relative;width:90%}.close-modal{color:#1f2937;cursor:pointer;font-size:24px;position:absolute;right:15px;top:10px;transition:color .2s}.close-modal:hover{color:#06b6d4}#modal-content-area h4{color:#1f2937;font-size:1.2rem;margin-bottom:15px}#modal-content-area ul{list-style:none;padding:0}#modal-content-area li{color:#6b7280;font-size:.9rem;line-height:1.6;margin-bottom:10px}#modal-content-area li strong{color:#1f2937}.threshold-analysis-section{margin-top:20px}.threshold-container{border-radius:15px;box-shadow:0 4px 20px #0000000d;display:flex;gap:25px;margin-bottom:25px;max-width:100%;padding:30px;width:100%}.chart-card,.threshold-container{background:#fff;box-sizing:border-box}.chart-card{border-left:4px solid #10b981;border-radius:10px;box-shadow:0 2px 10px #0000000d;flex:1 1;padding:20px}.threshold-cards-container{box-sizing:border-box;display:flex;flex:1 1;flex-direction:column;gap:20px;min-width:300px}.stat-cards.threshold-low{border-left-color:#ef4444}.stat-icons.threshold-low{background:linear-gradient(45deg,#ef4444,#dc2626);border-radius:10px;font-size:x-large;padding:7px}.stat-cards.threshold-high{border-left-color:#f59e0b}.stat-icons.threshold-high{background:linear-gradient(45deg,#f59e0b,#d97706);border-radius:10px;font-size:x-large;padding:7px}.stat-infos .threshold-note{color:#6b7280;font-size:12;line-height:1.4;margin-top:5px}.stat-cards{align-items:center;background:#fff;border-left:4px solid #0000;border-radius:15px;box-shadow:0 4px 20px #00000014;box-sizing:border-box;display:flex;gap:20px;height:230px;max-width:100%;padding:20px;transition:all .3s;width:100%}.stat-cards:hover{box-shadow:0 8px 30px #0000001f;transform:translateY(-3px)}.diagram-container{background:#fff;border:1px solid #06b6d41a;border-radius:15px;box-shadow:0 4px 20px #00000014;box-sizing:border-box;margin-bottom:50px;margin-top:5px;max-width:100%;min-height:650px;overflow:hidden;padding:20px;position:relative;width:100%}.diagram-container .svg-container{aspect-ratio:4/2;box-sizing:border-box;color:#1f2937;height:90%;padding:50px;position:relative;width:90%}.diagram-container .svg-container img,.diagram-container .svg-container svg{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}.sidebar.collapsed~.content-area .main-content .content-card,.sidebar.collapsed~.content-area .main-content .threshold-container{max-width:100%;width:100%}.sidebar.collapsed~.content-area .main-content .diagram-container{margin-bottom:25px;min-height:600px}.diagram-header{align-items:center;color:#1f2937;display:flex;font-family:Inter,Roboto,sans-serif;font-size:24px;font-weight:600;gap:8px;line-height:1.4;margin-bottom:20px}.svg-container{aspect-ratio:4/2;background-color:#fffefe;height:100%;padding:50px;position:relative;width:100%}.svg-container img{object-fit:cover;right:20px;z-index:1}.svg-container img,.svg-container svg{height:100%;position:absolute;top:0;width:100%}.svg-container svg{display:block;left:0;z-index:2}.svg-container text{font-family:Inter,Roboto,Helvetica,Arial,sans-serif;font-size:14px;pointer-events:none}.svg-container text.label{fill:grey!important;font-weight:500}.svg-container text.value{fill:#676767!important;font-size:15px;font-weight:700}.svg-container rect.component{stroke:#06b6d4;stroke-width:2;transition:fill .3s}.svg-container rect.component:hover{fill:#e0f2fe;cursor:pointer}.svg-container rect#feed-motor{fill:#f71010}.svg-container rect#ro-motor{fill:#10b981}.notification-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.notification-header h2{align-items:center;color:#1f2937;display:flex;font-size:1.6rem;font-weight:600;gap:10px}.notification-header h2 i{color:#06b6d4}.notification-table{background:#fff;border-collapse:collapse;border-radius:10px;box-shadow:0 2px 10px #0000000d;overflow:hidden;width:100%}.notification-table td,.notification-table th{border-bottom:1px solid #e5e7eb;padding:12px 15px;text-align:left}.notification-table th{background:#f3f4f6;color:#1f2937;font-size:.9rem;font-weight:600;text-transform:uppercase}.notification-row{cursor:pointer;transition:all .3s ease}.notification-row.unread{background:#f0f9ff}.notification-row:hover{background:#f9fafb;box-shadow:0 2px 5px #0000001a;transform:translateY(-1px)}.notification-icon{align-items:center;border-radius:50%;color:#fff;display:flex;font-size:14px;height:30px;justify-content:center;width:30px}.notification-icon.critical{background:#ef4444}.notification-icon.warning{background:#f59e0b}.notification-icon.info{background:#06b6d4}.notification-row td{color:#1f2937;font-size:.9rem}.notification-row td:nth-child(3){color:#6b7280;font-size:.85rem}.clear-notification-btn{font-size:14px;padding:6px}.notification-empty,.notification-loading{color:#6b7280;font-size:.9rem;padding:20px;text-align:center}.notification-loading{animation:pulse 1.5s infinite}.notification-row{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tank-water{transition:height .5s ease,fill .5s ease;z-index:1}@media screen and (min-width:1200px){.water-stats{flex-wrap:nowrap}.stat-card{flex:1 1;width:auto}}@media screen and (max-width:1024px){.sidebar{align-items:center;width:70px}.sidebar.collapsed{width:60px}.nav-text,.sidebar-header #drop,.sidebar-header h2,.user-info{display:none}.nav-links li{justify-content:center;margin:2px 5px;padding:12px}.nav-links i{font-size:18px}.user-section{padding:10px}.user-profile{justify-content:center;padding:8px}.user-avatar{font-size:14px;height:35px;width:35px}.logout-btn{font-size:16px;padding:8px}.content-area{width:calc(100% - 70px)}.sidebar.collapsed~.content-area{width:calc(100% - 60px)}.header{padding:0 20px}.header-left h1{font-size:24px}.search-container{margin-left:0;width:100%}.search-box{font-size:13px;padding:8px}.main-content{padding:20px}.chart-container,.content-card,.diagram-container,.stat-cards,.threshold-container{max-width:100%;width:100%}.chart-grid,.report-grid{grid-template-columns:1fr}.stat-card{height:auto;padding:15px;width:100%}.threshold-container{flex-direction:column;padding:20px}.threshold-cards-container{min-width:100%}.diagram-container{min-height:400px}.diagram-container .svg-container{padding:20px;width:100%}.notification-dropdown{right:15px;width:250px}.sidebar-logo{max-width:100px;padding:8px}.toggle-btn{font-size:14px;padding:6px}.logo-toggle-container{padding:8px 10px}.water-stats{justify-content:center}}@media screen and (max-width:768px){body{font-size:14px}.sidebar{bottom:0;box-shadow:0 -2px 10px #0000001a;flex-direction:row;height:auto;justify-content:space-around;padding:10px 0;position:fixed;top:auto;z-index:1000}.sidebar,.sidebar.collapsed{width:100%}.sidebar-header,.user-section{display:none}.nav-links{display:flex;flex-direction:row;justify-content:space-around;padding:0;width:100%}.nav-links li{border-bottom:3px solid #0000;border-radius:0;flex:1 1;margin:0;padding:10px;text-align:center}.nav-links li.active{background:none;border-bottom:3px solid #60a5fa;border-left:none;box-shadow:none}.nav-links li:hover{background:#ffffff1a;transform:none}.nav-links i{font-size:20px}.logout-btn,.nav-text{display:none}.content-area{margin-bottom:60px;width:100%}.sidebar.collapsed~.content-area{width:100%}.header{height:60px;padding:0 15px}.header-left h1{font-size:20px}.search-container{margin-left:0;width:100%}.search-box{font-size:12px;padding:8px}.search-icon{font-size:14px;right:12px}.header-right{gap:10px}.status-indicator{font-size:12px;padding:6px 10px}.content-card,.main-content{padding:15px}.chart-controls{flex-direction:column;gap:10px}.chart-controls button,.chart-controls input{padding:8px;width:100%}.stat-card{flex-direction:column;height:auto;padding:10px;text-align:center}.stat-icon{font-size:18px;height:40px;width:40px}.stat-info h3{font-size:1.5rem}.diagram-container{min-height:300px}.diagram-container .svg-container{padding:15px}.svg-container text{font-size:12px}.notification-dropdown{right:5%;top:60px;width:90%}.notification-table td,.notification-table th{font-size:.85rem;padding:10px}.report-form{flex-direction:column}.form-group{min-width:100%}.modal-content{padding:15px;width:95%}.stat-cards,.threshold-container{padding:15px}.stat-cards{height:auto}.tips-container{grid-template-columns:1fr}.tip-card{padding:15px}.logo-toggle-container,.sidebar-logo{display:none}.water-stats{align-items:center;flex-direction:column}.water-stats>*{max-width:300px;width:100%}}@media screen and (max-width:480px){.sidebar{padding:8px 0}.nav-links li{padding:8px}.nav-links i{font-size:18px}.header{padding:0 10px}.header-left h1{font-size:18px}.search-box{font-size:11px;padding:6px}.status-indicator{font-size:11px;padding:5px 8px}.chart-container,.content-card,.main-content,.report-card,.tip-card{padding:10px}.chart-title,.content-card h2,.diagram-header{font-size:1.2rem}.stat-info h3{font-size:1.3rem}.stat-info p{font-size:12px}.notification-table td,.notification-table th{font-size:.8rem;padding:8px}.notification-dropdown{top:55px;width:95%}.diagram-container{min-height:250px}.svg-container text{font-size:10px}.svg-container text.value{font-size:11px}.form-input{font-size:12px;padding:8px}.action-button,.know-more-btn,.report-form button{font-size:12px;padding:8px 12px}.water-stats{gap:15px}.water-stats>*{max-width:100%}}@media screen and (max-width:360px){.header-left h1,.nav-links i{font-size:16px}.search-box{font-size:10px}.status-indicator{font-size:10px;padding:4px 6px}.status-dot{height:6px;width:6px}.content-card h2{font-size:1.1rem}.chart-title{font-size:1rem}.stat-info h3{font-size:1.2rem}.notification-table td,.notification-table th{font-size:.75rem;padding:6px}.notification-dropdown{top:50px;width:98%}.diagram-container{min-height:200px}.svg-container{padding:10px}.water-stats{gap:10px}.chart-controls,.maintenance-controls{gap:8px}.chart-controls button,.chart-controls input,.maintenance-controls input,.maintenance-controls select{font-size:12px;padding:6px}}@media screen and (max-height:500px) and (orientation:landscape){.sidebar{bottom:auto;height:100vh;position:-webkit-sticky;position:sticky;width:70px}.nav-links,.sidebar{flex-direction:column}.nav-links li{justify-content:flex-start;padding:12px 15px}.content-area{margin-bottom:0}.main-content{padding:10px}.diagram-container{min-height:400px}}@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-resolution:192dpi){.svg-container rect.component{stroke-width:1}.status-dot{height:10px;width:10px}}.login-page{align-items:center;background:#e0f2fe;box-sizing:border-box;display:flex;justify-content:center;min-height:100vh;padding:2rem}.login-container{background:#fff;border-radius:16px;box-shadow:0 10px 30px #0003;display:flex;height:650px;margin:auto;max-width:1100px;overflow:hidden;width:100%}.image-container{background-position:50%;background-repeat:no-repeat;background-size:contain;flex:1 1}.form-container{align-items:center;background:linear-gradient(180deg,#1e3a8a,#1e40af);color:#fff;display:flex;flex:1 1;flex-direction:column;justify-content:center;padding:3rem 4rem}.company-logo{margin-bottom:10px;width:140px}.product-header{align-items:center;display:flex;gap:12px;margin-bottom:1.6rem}.product-logo{height:auto;object-fit:contain;width:80px}.product-header h2{font-size:1.8rem;font-weight:700;margin:0}.form-container h2{font-size:1.8rem;font-weight:700;margin-bottom:6px}.subtitle{color:#bfdbfe;font-size:.9rem;margin-bottom:1.8rem}.form-wrapper{max-width:400px;width:100%}.form-group{margin-bottom:1.6rem}.form-group label{color:#bfdbfe;display:block;font-size:.95rem;font-weight:600;margin-bottom:.4rem}.form-group input{background:#ffffff1f;border:none;border-radius:6px;color:#fff;font-size:1rem;padding:.9rem;width:100%}.form-group input::placeholder{color:#bfdbfe;opacity:.7}.form-group input:focus{background:#ffffff2e;box-shadow:0 0 8px #60a5fa99;outline:none}.remember-me{align-items:center;display:flex;margin-bottom:1.5rem}.remember-me input{accent-color:#60a5fa;height:18px;margin-right:.5rem;width:18px}.remember-me label{color:#bfdbfe;font-size:.95rem}.login-button{align-items:center;background:#0a8f3c;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:600;height:44px;justify-content:center;width:100%}.login-button:disabled{cursor:not-allowed;opacity:.7}.btn-spinner{animation:spin .8s linear infinite;border:2px solid #fff6;border-radius:50%;border-top-color:#fff;height:18px;width:18px}.error-message{color:#fecaca;font-size:.9rem;margin-top:1rem;text-align:center}footer{color:#bfdbfe;font-size:.85rem;margin-top:2rem;opacity:.9}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:768px){.login-container{flex-direction:column;height:auto}.image-container{min-height:220px}.form-container{padding:2rem}.company-logo{width:120px}.product-logo{width:150px}}@media (max-width:480px){.form-container{padding:1.5rem}.company-logo{width:110px}.product-logo{width:135px}.login-button{height:42px}}
/*# sourceMappingURL=main.27c26fd7.css.map*/