@charset "UTF-8";*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f4f7fb;color:#172033}a{color:#0f766e;text-decoration:none}button,input,select,textarea{font:inherit}.btn{border:0;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700}.btn-primary{background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff}.btn-secondary{background:#e2e8f0;color:#0f172a}.btn-danger{background:#ef4444;color:#fff}.btn:disabled{opacity:.6;cursor:not-allowed}.form-field{display:grid;gap:6px;margin-bottom:16px}.form-field label{font-weight:700;font-size:13px;color:#334155}.form-field input,.form-field select,.form-field textarea{border:1px solid #cbd5e1;border-radius:12px;padding:12px 14px;background:#fff;outline:none}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:#14b8a6;box-shadow:0 0 0 4px #14b8a61f}.validation{font-size:12px;color:#dc2626}.alert{padding:12px 14px;border-radius:12px;margin-bottom:16px;border:1px solid transparent}.alert-success{background:#ecfdf5;color:#047857;border-color:#a7f3d0}.alert-error{background:#fef2f2;color:#b91c1c;border-color:#fecaca}.alert-info{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}.card{background:#ffffffeb;border:1px solid #e2e8f0;border-radius:20px;box-shadow:0 18px 50px #0f172a14}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:12px;border-bottom:1px solid #e2e8f0}.table th{color:#475569;font-size:13px}.badge{display:inline-flex;align-items:center;border-radius:999px;background:#ecfeff;color:#0f766e;border:1px solid #a5f3fc;padding:4px 9px;font-weight:800;font-size:12px;text-transform:capitalize}.table small{color:#64748b}.password-wrap input{padding-right:50px}.location-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}.map-picker{height:360px;border-radius:16px;overflow:hidden;border:1px solid #cbd5e1;background:#e2e8f0}.badge.redeemed{background:#dcfce7;color:#166534;border-color:#bbf7d0}.badge.unredeemed{background:#fff7ed;color:#9a3412;border-color:#fed7aa}.form-field label .req,.req{color:#dc2626;font-weight:900}.form-field input.ng-invalid.ng-touched,.form-field select.ng-invalid.ng-touched,.form-field textarea.ng-invalid.ng-touched,input.invalid,select.invalid,textarea.invalid{border-color:#dc2626!important;box-shadow:0 0 0 3px #dc26261f!important;outline:none}.field-help{color:#64748b;font-size:12px;margin-top:5px}.validation,.field-error{color:#b91c1c;font-size:12px;margin-top:6px;font-weight:700}.alert-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8}.password-wrap input{padding-right:58px}.eye-btn{position:absolute;right:8px;border:0;background:transparent;cursor:pointer;padding:8px;color:#334155;width:auto!important;margin:0!important}:root{--iw-navy:#08306b;--iw-blue:#0b78d1;--iw-sky:#0ea5e9;--iw-teal:#14b8a6;--iw-aqua:#22d3ee;--iw-green:#22c55e;--iw-orange:#f97316;--iw-red:#ef4444;--iw-ink:#0f172a;--iw-muted:#64748b;--iw-line:#dbeafe;--iw-card:rgba(255,255,255,.9);--iw-shadow:0 24px 70px rgba(8,48,107,.14)}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 8% 5%,rgba(34,211,238,.28),transparent 26%),radial-gradient(circle at 92% 12%,rgba(14,165,233,.18),transparent 28%),linear-gradient(180deg,#eefbff,#f7fbff 45%,#f8fafc)!important;color:var(--iw-ink);min-height:100vh}body:before{content:"";position:fixed;inset:auto 0 0;height:210px;pointer-events:none;z-index:-1;background:url(/assets/isoline-ui/waves.svg) center bottom/100% 100% no-repeat;opacity:.9}body:after{content:"";position:fixed;right:4vw;top:12vh;width:10px;height:10px;border-radius:999px;background:#0ea5e973;box-shadow:26px 44px #14b8a659,-54px 102px #22d3ee59,-14px 178px #0ea5e940;animation:iwBubbleFloat 6.5s ease-in-out infinite;pointer-events:none;z-index:-1}@keyframes iwBubbleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-18px)}}@keyframes iwFadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes iwWaterShimmer{0%{transform:translate(-110%)}to{transform:translate(120%)}}@keyframes iwDropPulse{0%,to{transform:scale(1);box-shadow:0 16px 36px #0ea5e938}50%{transform:scale(1.04);box-shadow:0 20px 44px #14b8a647}}.shell{background:transparent!important}.shell aside{position:sticky;top:0;height:100vh;overflow:auto;background:radial-gradient(circle at 15% 10%,rgba(34,211,238,.32),transparent 25%),linear-gradient(160deg,#06265a,#07437d 48%,#0695a5)!important;color:#fff!important;border-right:1px solid rgba(255,255,255,.16);box-shadow:18px 0 50px #08306b29}.shell aside:after{content:"";display:block;height:70px;margin-top:18px;background:url(/assets/isoline-ui/waves.svg) center/cover no-repeat;opacity:.55;border-radius:22px}.brand{padding:14px;margin-bottom:20px!important;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:#ffffff1c;backdrop-filter:blur(12px)}.logo{background:url(/assets/isoline-ui/drop-logo.svg) center/86% no-repeat,linear-gradient(135deg,#fff,#e0faff)!important;color:transparent!important;border-radius:18px!important;box-shadow:0 16px 35px #0000002e;animation:iwDropPulse 4s ease-in-out infinite}.brand strong{font-size:16px;letter-spacing:.2px}.brand span{color:#cffafe!important}nav a{position:relative;display:flex!important;align-items:center;gap:10px;color:#e0f2fe!important;border:1px solid transparent;transition:transform .18s ease,background .18s ease,border-color .18s ease}nav a:before{content:"\1f4a7";width:28px;height:28px;display:grid;place-items:center;border-radius:10px;background:#ffffff21;font-size:14px}nav a:nth-child(1):before{content:"\1f3e0"}nav a:nth-child(2):before{content:"\1f464"}nav a:nth-child(3):before{content:"\1f4cd"}nav a:nth-child(4):before{content:"\1f4b0"}nav a:nth-child(5):before{content:"\1f465"}nav a:nth-child(6):before{content:"\23f1\fe0f"}nav a:nth-child(7):before{content:"\1f6e0\fe0f"}nav a:nth-child(8):before{content:"\1f4f2"}nav a:nth-child(9):before{content:"\1f3ab"}nav a:nth-child(10):before{content:"\1f381"}nav a:nth-child(11):before{content:"\1f4ac"}nav a:nth-child(12):before{content:"\1f50d"}nav a:nth-child(13):before{content:"\1f4ca"}nav a:nth-child(14):before{content:"\1f4dc"}nav a:nth-child(15):before{content:"\1f6e1\fe0f"}nav a:nth-child(16):before{content:"\1f468\200d\1f4bc"}nav a:nth-child(17):before{content:"\2699\fe0f"}nav a:hover,nav a.active{background:#ffffff26!important;border-color:#ffffff38;transform:translate(4px)}.shell main{padding:30px!important;min-width:0}.shell header{position:relative;overflow:hidden;background:linear-gradient(135deg,#fffffff2,#ecfdffe0),radial-gradient(circle at 95% 15%,rgba(14,165,233,.2),transparent 22%);border:1px solid rgba(14,165,233,.18);border-radius:28px;padding:22px 24px;box-shadow:var(--iw-shadow)}.shell header:after{content:"";position:absolute;right:-20px;bottom:-42px;width:310px;height:110px;background:url(/assets/isoline-ui/water-meter.svg) center/contain no-repeat;opacity:.16}.shell header h1{color:var(--iw-navy);font-size:clamp(24px,3vw,38px);letter-spacing:-.04em}.shell header p{max-width:900px;color:var(--iw-muted)!important}.user{position:relative;z-index:1}.user a,.user span{display:inline-flex;align-items:center;gap:8px;background:#f0fdfa;color:#075985!important;border:1px solid #bae6fd;padding:10px 14px;border-radius:999px;font-weight:900!important}.user a:before,.user span:before{content:"\1f464"}.card{position:relative;overflow:hidden;background:var(--iw-card)!important;border:1px solid rgba(14,165,233,.18)!important;border-radius:28px!important;box-shadow:var(--iw-shadow)!important;animation:iwFadeUp .35s ease both}.card:before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;transform:skew(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);pointer-events:none;opacity:0}.card:hover:before{opacity:1;animation:iwWaterShimmer 1.2s ease}.card h2,.card h3,h2,h3{color:var(--iw-navy);letter-spacing:-.02em}.panel{padding:26px!important}.table{border-collapse:separate!important;border-spacing:0 10px!important}.table th{border:0!important;color:#075985!important;text-transform:uppercase;letter-spacing:.06em;font-size:11px!important}.table td{border-top:1px solid #e0f2fe!important;border-bottom:1px solid #e0f2fe!important;background:#ffffffc7}.table td:first-child{border-left:1px solid #e0f2fe;border-radius:16px 0 0 16px}.table td:last-child{border-right:1px solid #e0f2fe;border-radius:0 16px 16px 0}.table tr:hover td{background:#ecfeff}.badge{background:linear-gradient(135deg,#ecfeff,#dbeafe)!important;color:#075985!important;border:1px solid #bae6fd!important;box-shadow:0 10px 18px #0ea5e91a}.metric{background:linear-gradient(135deg,#fffffff5,#f0fdfae0)!important;border:1px solid rgba(20,184,166,.22)!important}.metric span{color:#075985!important}.metric strong{color:var(--iw-navy);letter-spacing:-.04em}.metric.warn{border-left:0!important;box-shadow:inset 6px 0 #f97316,var(--iw-shadow)!important}.status-row{border-bottom:1px dashed #bae6fd!important}code{background:#e0f2fe!important;color:#075985}.btn{position:relative;overflow:hidden;border-radius:16px!important;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;box-shadow:0 12px 28px #08306b1f}.btn:hover{transform:translateY(-2px);filter:saturate(1.08)}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,#0b78d1,#14b8a6 55%,#22c55e)!important;color:#fff!important}.btn-primary:after{content:"";position:absolute;inset:0;transform:translate(-120%) skew(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent)}.btn-primary:hover:after{animation:iwWaterShimmer .85s ease}.btn-secondary{background:#e0f2fe!important;color:#075985!important}.btn-danger{background:linear-gradient(135deg,#ef4444,#f97316)!important}.form-field{position:relative}.form-field label{display:flex;align-items:center;gap:6px;color:#0f3f8f!important;font-weight:900!important}.form-field label:has(+input[required]):after,.form-field label:has(+select[required]):after,.form-field label:has(+textarea[required]):after{content:"*";color:var(--iw-red)}.form-field input,.form-field select,.form-field textarea,input,select,textarea{border:1.5px solid #bfdbfe!important;border-radius:16px!important;background:#fffffff2!important;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.form-field input:focus,.form-field select:focus,.form-field textarea:focus,input:focus,select:focus,textarea:focus{border-color:var(--iw-teal)!important;box-shadow:0 0 0 5px #14b8a626!important}.form-field input.ng-invalid.ng-touched,.form-field select.ng-invalid.ng-touched,.form-field textarea.ng-invalid.ng-touched,input.ng-invalid.ng-touched,select.ng-invalid.ng-touched,textarea.ng-invalid.ng-touched{border-color:var(--iw-red)!important;box-shadow:0 0 0 5px #ef444421!important;background:snow!important}.form-field:has(.ng-invalid.ng-touched) label{color:#b91c1c!important}.form-field:has(.ng-invalid.ng-touched):after{display:block;margin-top:7px;color:#b91c1c;font-size:12px;line-height:1.35;font-weight:800}.form-field:has(input[formControlName=usernameOrEmail].ng-invalid.ng-touched):after{content:"Enter your username or email address."}.form-field:has(input[formControlName=password].ng-invalid.ng-touched):after{content:"Enter your password. Use the eye button to view it before submitting."}.form-field:has(input[formControlName=code].ng-invalid.ng-touched):after{content:"Enter the 6-digit OTP code sent by SMS or shown in your authenticator app."}.form-field:has(input[formControlName=fullName].ng-invalid.ng-touched):after{content:"Enter the customer's full name as it should appear in records."}.form-field:has(input[formControlName=phone].ng-invalid.ng-touched):after{content:"Enter the phone number. Example: 0712345678 or 254712345678."}.form-field:has(select[formControlName=siteId].ng-invalid.ng-touched):after{content:"Choose the site/project where this customer or meter belongs."}.form-field:has(input[formControlName=meterNumber].ng-invalid.ng-touched):after{content:"Enter the exact meter number printed on the water meter."}.form-field:has(select[formControlName=meterId].ng-invalid.ng-touched):after{content:"Select an available unassigned meter from the list."}.form-field:has(select[formControlName=customerId].ng-invalid.ng-touched):after{content:"Choose the customer who owns or uses this meter."}.form-field:has(input[formControlName=pricePerUnit].ng-invalid.ng-touched):after{content:"Enter the tariff amount per cubic metre. Example: 100 for Ksh 100 per m\b3."}.form-field:has(input[formControlName=amount].ng-invalid.ng-touched):after{content:"Enter the amount paid in Kenya shillings."}.form-field:has(input[formControlName=units].ng-invalid.ng-touched):after{content:"Enter the water units in m\b3. Example: 0.500 for half a cubic metre."}.form-field:has(textarea[formControlName=reason].ng-invalid.ng-touched):after{content:"Explain clearly why this action is needed. This helps audit and approval."}.validation,.field-error{font-weight:900!important;color:#b91c1c!important}.alert{border-radius:18px!important;font-weight:750}.alert-success{background:#ecfdf5!important;border-color:#86efac!important;color:#166534!important}.alert-error{background:#fff1f2!important;border-color:#fecdd3!important;color:#be123c!important}.alert-info{background:#eff6ff!important;border-color:#bfdbfe!important;color:#1d4ed8!important}.modal,.dialog,.overlay .card{backdrop-filter:blur(12px)}.filter,.filters,.toolbar{background:#ffffffc7;border:1px solid rgba(14,165,233,.18);border-radius:22px;box-shadow:0 14px 35px #08306b14}.auth-page{background:radial-gradient(circle at 15% 18%,rgba(34,211,238,.3),transparent 28%),radial-gradient(circle at 88% 12%,rgba(34,197,94,.12),transparent 22%),linear-gradient(135deg,#effbff,#f8fafc)!important;position:relative;overflow:hidden}.auth-page:before{content:"";position:absolute;inset:auto 0 0;height:210px;background:url(/assets/isoline-ui/waves.svg) center bottom/cover no-repeat;opacity:.85}.auth-card{position:relative;z-index:1;border-radius:32px!important;border:1px solid rgba(14,165,233,.22)!important;box-shadow:0 32px 80px #08306b2e!important}.auth-card h1{color:var(--iw-navy);letter-spacing:-.04em}.pill,.water-pill{display:inline-flex;align-items:center;gap:7px;background:#ecfeff!important;color:#075985!important;border:1px solid #bae6fd;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900}.pill:before,.water-pill:before{content:"\1f4a7"}.password-wrap{position:relative;display:flex;align-items:center}.password-wrap input{width:100%;padding-right:58px!important}.eye-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:#e0f2fe;color:#075985;width:42px!important;height:38px;margin:0!important;border-radius:12px;cursor:pointer;box-shadow:none}@media (max-width: 980px){.shell aside{position:relative;height:auto}.shell main{padding:18px!important}.shell header{border-radius:22px}nav{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 640px){nav{grid-template-columns:1fr}.card,.shell header{border-radius:20px!important}.table{display:block;overflow-x:auto}}