:root{color-scheme:dark;--navy:#080f1d;--blue:#3cd8df;--line:#223248;--surface:#101c2d;--text:#e8f1fc;--muted:#a0b2c8;font-family:'Segoe UI',Arial,sans-serif;color:var(--text);background:#080f1d;font-size:16px} body{background:radial-gradient(ellipse at 90% 0%,#14314488,transparent 40%),#080f1d;min-height:100vh;line-height:1.45} button,input,select{transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}button{background:#35d2d5;color:#06232b;border:1px solid #4ce4de;border-radius:10px;padding:12px 18px;font-weight:650;box-shadow:0 5px 18px #00b8c512}button:hover{filter:none;background:#63e8e8;transform:translateY(-1px)}button:active{transform:none}button:disabled{transform:none;box-shadow:none;opacity:.55}input,select{background:#0b1525;border:1px solid #314259;border-radius:9px;color:#edf5ff;padding:12px 14px;min-height:46px}input::placeholder{color:#8396b0}input:hover,select:hover{border-color:#526b87}input:focus,select:focus{border-color:#37d6dc;box-shadow:0 0 0 3px #35d2d512;outline:none}button:focus-visible{outline:2px solid #80f2ef;outline-offset:4px}label{font-size:14px;color:#c0d0e4;font-weight:550;gap:9px}h1{font-size:32px;font-weight:650;letter-spacing:-.7px}h2{font-size:20px;font-weight:600;letter-spacing:-.3px}.eyebrow{color:#55d7db;letter-spacing:1.7px;font-size:12px}.muted{color:var(--muted);line-height:1.65}.secondary{background:#152438;color:#dceaf9;border:1px solid #35475f;box-shadow:none}.secondary:hover{background:#1d344b;border-color:#51cbd0;color:#ecffff} aside{width:224px;background:linear-gradient(170deg,#0e1b2b,#080f1d 70%);border-right:1px solid #26364a;padding:28px 16px;z-index:10}.brand{margin-bottom:38px;gap:14px}.brand-logo{background:#f6fbfe;padding:10px;border:1px solid #c1e1df;border-radius:10px;width:100%;box-shadow:0 5px 22px #0003}.brand strong{color:#a4bbc9;font-size:13px;letter-spacing:2.2px;text-transform:uppercase;font-weight:500}.nav-label{color:#8599b1;font-size:12px;letter-spacing:1.6px;margin-left:14px}.nav{padding:14px 12px;border:1px solid transparent;border-radius:9px;color:#a8bbd1;margin:4px 0;box-shadow:none;font-size:14px;text-align:left;font-weight:500}.nav:hover{background:#14273b;color:#def7ff;transform:none}.nav.active{background:linear-gradient(100deg,#183c4c,#142639);border-color:#2b646e;color:#75eee9;box-shadow:inset 3px 0 0 #46dedb}.aside-bottom{border-top:1px solid #26364a;padding:22px 12px 0;margin-top:auto;color:#dcebf9}.ghost{color:#92a9c2;box-shadow:none;border:0;font-size:14px}.ghost:hover{background:transparent;color:#5fe4e3} main{margin-left:224px;width:calc(100% - 224px);padding:30px 32px 46px;max-width:1900px}header{padding-bottom:22px;border-bottom:1px solid #22354b;margin-bottom:24px}header h1{margin-top:6px}.filters{background:#0f1b2ccc;border:1px solid #2a3c53;border-radius:12px;padding:18px 20px;gap:18px;margin-bottom:22px}.filters label:first-child{min-width:240px}.filter-note{color:#91a6bf;font-size:14px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px}.metric{background:linear-gradient(130deg,#182a3e,#101b2d);border:1px solid #2c415a;border-top:1px solid #2c415a;border-radius:12px;position:relative;padding:20px 20px 18px;overflow:hidden;box-shadow:0 8px 20px #00000012}.metric:before{content:'';position:absolute;left:0;top:22px;width:3px;height:30px;background:#43d8e0;border-radius:0 4px 4px 0}.metric:nth-child(3n+2):before{background:#9bd954}.metric:nth-child(3n):before{background:#849cff}.metric-title{color:#bfd0e5;font-size:14px}.metric-value{color:#eef7ff;font-size:30px;font-weight:650;letter-spacing:-.8px;margin:12px 0 10px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.metric-value small{color:#9eb5cd;font-size:14px;letter-spacing:0;font-weight:500;margin-left:4px}.metric-sub{color:#91acc5;font-size:14px} .chart-card,.table-card,.form-card{background:linear-gradient(140deg,#111f31,#0d1829);border:1px solid #293b53;border-radius:12px;padding:24px;margin-bottom:22px;box-shadow:0 14px 36px #00000012}.chart-card{border-top:2px solid #378592}.section-top{gap:20px;margin-bottom:22px}.chart-controls{background:#0a1524;border:1px solid #283950;border-radius:10px;padding:5px;gap:6px}.chart-controls select{border-color:transparent;background:transparent;min-height:38px;padding:8px 10px;max-width:100%;font-size:14px}.chart-controls select:focus{border-color:#4ccbd2}#chart{padding-top:12px;min-height:258px}#chart text{fill:#98b0cb;font-size:12px}#chart rect{filter:drop-shadow(0 4px 8px #2bd3d325)}.table-scroll{border:1px solid #293a51;border-radius:9px;scrollbar-color:#456179 #0b1627;scrollbar-width:thin}table{font-variant-numeric:tabular-nums;color:#c9d9eb}th{background:#18293d;color:#bfd0e5;font-size:14px;font-weight:550;padding:16px 16px;border-bottom:1px solid #375069;white-space:normal;min-width:128px}th:first-child{min-width:105px}td{padding:16px;border-bottom:1px solid #23344b}tbody tr:nth-child(even){background:#11203488}tbody tr:hover{background:#183649}tbody tr:focus-visible{outline:2px solid #45d8dc;outline-offset:-2px}th:first-child,td:first-child{position:sticky;left:0;background:#122237;font-weight:600;z-index:1}tfoot,tfoot td{background:#17313f;color:#7be8e6}#record-count{background:#172a3c;border:1px solid #345066;color:#bbd9e4;border-radius:7px;padding:6px 10px;font-size:14px}.table-card .muted{font-size:14px}.entry-layout{gap:22px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.field-grid{gap:20px}.conversion{border:1px solid #286376;background:#143849;color:#aee9e9;border-radius:9px}.conversion strong{color:#72f1e7}.summary-row{border-bottom:1px solid #293c52;color:#b9cce0;padding:18px 0}.summary-row strong{color:#e0f1ff;font-weight:600;text-align:right}.summary-row small{color:#77c8d1;font-size:13px}fieldset{border-color:#30455f;border-radius:10px;padding:20px}legend{color:#b1c5db;font-size:14px}.resource-options{gap:12px}.resource-choice{border-color:#344a63;background:#142337;padding:12px 15px;border-radius:9px;font-size:14px}.resource-choice:has(input:checked){border-color:#3dafb9;background:#153746;color:#9cf3ef}.resource-choice:hover{border-color:#56a6b8}.resource-choice input{accent-color:#43d8dc;min-height:0;box-shadow:none}.partial-note{color:#a3b6cc}#notice:not(:empty){background:#113d37;border:1px solid #287469;color:#9aebd6;padding:14px 18px;border-radius:9px}#notice.error{background:#402535;border-color:#8d4961;color:#ffc0cf}.install-error,#auth-error{color:#ffadbe}.empty{color:#a0b6cd} .auth{background:radial-gradient(ellipse at 25% 20%,#1a5c6680,transparent 45%),radial-gradient(ellipse at 90% 80%,#1a285780,transparent 45%),#080f1d}.auth-card{background:#112034;border:1px solid #34506b;border-radius:18px;box-shadow:0 30px 90px #0006;padding:36px;width:min(470px,100%)}.auth-logo{background:#f8fcff;border:1px solid #daf1f1;border-radius:9px;padding:14px;margin-bottom:30px}.auth-card h1{font-size:28px;color:#eff7ff}.auth-card p{color:#b0c4da}.auth-card .eyebrow{color:#51d5dc}.auth-card small{color:#98afc7;font-size:13px}.auth-card a{color:#78e8e4}.auth-card button{min-height:48px} @media(min-width:1500px){.metrics{grid-template-columns:repeat(6,minmax(0,1fr))}.metric-value{font-size:26px}.metric{padding:18px 16px}}@media(max-width:1100px){.section-top{flex-direction:column;align-items:flex-start}.entry-layout{grid-template-columns:1fr}.chart-controls{width:100%;flex-wrap:wrap}}@media(max-width:900px){aside{width:196px}main{margin-left:196px;width:calc(100% - 196px);padding:26px 20px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.filters label:first-child{min-width:180px}.metric-value{font-size:27px}}@media(max-width:700px){body{background:#080f1d}aside{position:relative;width:100%;padding:16px;gap:7px;border-bottom:1px solid #2a3c53;flex-direction:row;border-right:0}.brand{flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin:0 0 8px;gap:20px}.brand-logo{width:178px;max-width:60%;padding:8px}.brand strong{font-size:12px;letter-spacing:1.4px;text-align:right}.nav{padding:10px 11px;font-size:14px;margin:0}.aside-bottom{border:0;margin-left:auto;padding:8px;flex-direction:row}.nav-label{display:none}main{margin:0;width:100%;padding:24px 16px 36px}header{flex-direction:row;align-items:center;flex-wrap:wrap;gap:16px}h1{font-size:26px}header h1{font-size:26px}header>button{padding:11px 14px;font-size:14px}.filters{padding:16px;flex-wrap:wrap;gap:14px}.filters label:first-child{flex:1;min-width:160px}.metrics{gap:10px}.metric{padding:17px 14px}.metric-value{font-size:25px}.metric-sub{font-size:14px}.chart-card,.table-card,.form-card{padding:18px}.chart-controls{gap:2px;padding:4px}.chart-controls select{font-size:14px}.field-grid{gap:16px}.auth-card{padding:28px}.resource-choice{padding:11px 12px}.resource-options{gap:10px}fieldset{padding:16px}.section-top{gap:16px}.summary-row{padding:16px 0}} @media(max-width:400px){.field-grid{grid-template-columns:1fr}.metric-value{font-size:22px}.metric-value small{display:block;margin:4px 0 0}.brand strong{font-size:12px}.filters input{width:90px}} @media(prefers-reduced-motion:reduce){button,input,select{transition:none}button:hover{transform:none}} /* Açık tema */ :root{color-scheme:light;--navy:#10354b;--line:#dbe5ee;--surface:#ffffff;--text:#17364a;--muted:#60768a;color:var(--text);background:#fff} body{background:#fff;color:var(--text)}aside{background:linear-gradient(170deg,#143c52,#0a2034);border-color:#24485e}main{background:#fff}h1,h2{color:#18394e}.eyebrow{color:#137c89}header{border-color:#e1e9ef}.filters{background:#f7fafc;border-color:#dbe5ee}.filter-note,.muted{color:#60768a}label{color:#38546b}input,select{background:#fff;border-color:#cedce7;color:#18394e}input::placeholder{color:#758a9d}input:hover,select:hover{border-color:#8da9bc}input:focus,select:focus{border-color:#168d98;box-shadow:0 0 0 3px #168d9812}.secondary{background:#fff;border-color:#ccdae5;color:#23495e}.secondary:hover{background:#eef9fa;border-color:#269ea6;color:#164b56}.metric{background:linear-gradient(135deg,#fff,#f5f9fc);border-color:#d8e5ee;box-shadow:0 6px 20px #173b5010}.metric-title{color:#526e83}.metric-value{color:#173c53}.metric-value small,.metric-sub{color:#627e94}.chart-card,.table-card,.form-card{background:#fff;border-color:#dbe5ee;box-shadow:0 8px 28px #163d5010}.chart-card{border-top-color:#2ba1ac}.chart-controls{background:#f3f7fa;border-color:#dde7ef}.chart-controls select{background:transparent;color:#284d64}#chart text{fill:#607b90}.table-scroll{border-color:#dbe5ee;scrollbar-color:#a6bac9 #f2f6f9}table{color:#34556c}th{background:#edf4f8;color:#42657e;border-color:#d6e3ed}td{border-color:#e6edf3}tbody tr:nth-child(even){background:#f8fbfd}tbody tr:hover{background:#eaf7fa}th:first-child,td:first-child{background:#f1f7fa;color:#244f67}tfoot,tfoot td{background:#e5f5f5;color:#186b70}#record-count{background:#edf6fa;border-color:#d0e5ed;color:#427185}.conversion{background:#edfafa;border-color:#bce3e5;color:#286a73}.conversion strong{color:#137781}.summary-row{border-color:#e0e9ef;color:#567087}.summary-row strong{color:#214b63}.summary-row small{color:#197e89}fieldset{border-color:#d9e4ed}legend{color:#526f83}.resource-choice{background:#f6f9fc;border-color:#d7e3ec;color:#45637b}.resource-choice:has(input:checked){background:#eafafa;border-color:#58b7be;color:#16727c}.partial-note,.empty{color:#617f93}#notice:not(:empty){background:#eaf8f1;border-color:#b8ddcd;color:#28694f}#notice.error{background:#fff0f2;border-color:#ebbac5;color:#a43e56}.install-error,#auth-error{color:#ac3650}.auth{background:#fff}.auth-card{background:#fff;border-color:#d7e5ef;box-shadow:0 24px 65px #173d5115}.auth-card h1{color:#173c53}.auth-card p{color:#59758c}.auth-card .eyebrow{color:#137c89}.auth-card small{color:#6b8499}.auth-card a{color:#167e89}.nav-label{color:#9eb7c9}.brand strong{color:#b7d0de}.aside-bottom{color:#dcebf9;border-color:#31556b} @media(max-width:700px){body{background:#fff}aside{border-color:#31556b}} /* Tesis veri takip arayüzü */ .button-icon{width:20px;height:20px;flex-shrink:0;display:inline-block;vertical-align:middle}button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;min-height:44px;background:linear-gradient(135deg,#14a5ac,#11818f);border-color:#1597a1;color:#fff;box-shadow:0 4px 12px #167b8c1c}button:hover{background:linear-gradient(135deg,#119ba4,#0c7181)}.nav{justify-content:flex-start;gap:11px;background:transparent;min-height:46px;border-radius:12px}.nav .button-icon{width:19px;height:19px}.nav.active{background:linear-gradient(100deg,#235166,#163648);border-color:#397087;color:#89f5eb;box-shadow:none}.ghost{background:transparent;justify-content:flex-start;box-shadow:none}.brand{margin-bottom:26px}.brand strong{font-size:14px;letter-spacing:.5px;text-transform:none;line-height:1.5;color:#d1e5ed;font-weight:600}#export{background:linear-gradient(135deg,#e8f8ef,#dff3e8);border-color:#bddccc;color:#22764a;box-shadow:0 4px 12px #24744a0b}#export:hover{background:#d7efdf;border-color:#7cb697}#export .button-icon{color:#248452}header{padding-bottom:18px;margin-bottom:20px}header h1{margin:0}.compact-selection{gap:10px}.compact-selection .section-top{margin-bottom:0}.compact-selection h2{font-size:18px}.compact-selection .eyebrow{display:none}.compact-selection fieldset{padding:10px 12px}.compact-selection legend{font-size:12px}.compact-selection .resource-options{gap:8px}.resource-choice{padding:8px 11px;min-height:38px;border-radius:9px;font-size:13px;gap:7px}.resource-choice input{width:16px;height:16px}.compact-selection .muted{margin:0;font-size:12px}.selection-hint{flex-basis:100%;margin:0;color:#438093;font-size:12px;line-height:1.4}.compact-selection button{font-size:13px;padding:10px 14px;min-height:40px;background:linear-gradient(135deg,#16899d,#176e8b);border-color:#197b93;color:#fff}.metric{background:color-mix(in srgb,var(--card-color) 11%,white);border-color:color-mix(in srgb,var(--card-color) 23%,white);box-shadow:0 5px 18px #153f4f09;padding:18px;border-radius:14px}.metric:before{display:none}.metric-title{color:color-mix(in srgb,var(--card-color) 65%,#183b50);font-weight:600}.metric-value{color:color-mix(in srgb,var(--card-color) 45%,#16384b)}.metric-sub,.metric-value small{color:color-mix(in srgb,var(--card-color) 40%,#567088)}#chart{min-height:290px}#chart svg{height:290px}.chart-legend{display:flex;gap:12px 22px;flex-wrap:wrap;padding:14px 0 4px}.legend-item{display:flex;gap:7px;align-items:center;font-size:12px;color:#49687d}.legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.chart-controls{padding:4px}.chart-card{border-radius:14px}.form-card:has(.compact-selection){padding:16px 20px}.summary-row{padding:14px 0}#record-form>button,#ges-form>button{justify-self:start}.secondary{display:inline-flex;align-items:center;justify-content:center}#notice{scroll-margin-top:20px}@media(max-width:700px){.compact-selection .section-top{flex-direction:row;align-items:center;gap:10px}.compact-selection button{font-size:12px;padding:9px}.brand strong{font-size:13px;max-width:145px}.form-card:has(.compact-selection){padding:14px}.chart-legend{gap:10px}.metric{padding:15px}header h1{font-size:25px}}@media(prefers-reduced-motion:reduce){button{transition:none}} .record-badge{background:#edf6fa;border:1px solid #d0e5ed;color:#427185;border-radius:7px;padding:6px 10px;font-size:14px}#unit-rows tr{cursor:default}#units .section-top h2{margin-top:5px}#units table td{font-variant-numeric:tabular-nums} .metrics{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;padding-bottom:8px;scrollbar-width:thin}.metrics .metric{flex:1 0 165px;min-width:165px}.filters #year{min-width:112px}.metrics .metric-value{font-size:24px} #overview .table-scroll table{table-layout:fixed;width:100%;white-space:normal;font-size:12px}#overview .table-scroll th,#overview .table-scroll td{min-width:0;padding:12px 5px;overflow-wrap:anywhere}#overview .table-scroll th:first-child,#overview .table-scroll td:first-child{width:70px}#overview .table-scroll th{font-size:12px;line-height:1.5}@media(max-width:700px){#overview .table-scroll table{min-width:680px}} dialog{width:min(480px,90vw);max-height:85vh;overflow:auto;border:1px solid #d4e3eb;border-radius:18px;padding:24px;box-shadow:0 24px 80px #10354b40}dialog::backdrop{background:#0a233a66;backdrop-filter:blur(3px)}#meter-name-fields{display:grid;gap:14px}.meter-settings{display:flex;gap:16px;align-items:end;flex-wrap:wrap}.meter-switch{flex-direction:row;align-items:center;padding:12px 0}.meter-switch input{min-height:0;width:18px;height:18px}#meter-reading-fields fieldset{display:grid;gap:14px}#meter-reading-fields input[readonly]{background:#edf4f8}#meter-count{width:120px} .opening-edit{display:flex;gap:8px;align-items:center}.opening-edit input{flex:1;width:0}.opening-pencil{flex-shrink:0;width:44px;height:46px;padding:9px;background:#e9f5f8;color:#14768a;border-color:#c4dfe7;box-shadow:none}.opening-pencil:hover{background:#d9edf2;color:#0b5f73}.meter-override-note{color:#a36a22;font-size:12px;line-height:1.5} .reading-pair{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;align-items:start}.date-caption{display:flex;gap:6px;align-items:center;min-height:20px}.date-caption .button-icon{width:17px;height:17px;color:#298395}.reading-date-label input{width:100%;min-width:0}.reading-date-label input::-webkit-calendar-picker-indicator{cursor:pointer}@media(max-width:600px){.reading-pair{grid-template-columns:1fr}} .header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}#issue-dialog{width:480px;max-width:calc(100vw - 32px);max-height:85vh;border:1px solid #d8e6eb;border-radius:18px;padding:24px;box-shadow:0 24px 80px #123b5133;overflow:auto}#issue-dialog::backdrop{background:#102f4666}#issue-form label{display:grid;gap:7px;margin:14px 0}#issue-form textarea{font:inherit;padding:12px;border:1px solid #cbdde7;border-radius:10px;resize:vertical;width:100%;box-sizing:border-box}#issue-feedback{color:#087c77}.issue-item{padding:15px 0;border-top:1px solid #d8e6eb}.issue-item small{display:block;margin-top:6px;color:#647b8c}.issue-item p{white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:600px){main header{flex-wrap:wrap;gap:12px}#issue-dialog{padding:18px}} /* Branded navigation and contact card */ #workspace aside{background:linear-gradient(165deg,#153f51 0%,#102e42 55%,#0a2132 100%);padding:22px 16px;overflow-y:auto;gap:7px;border-right:1px solid #284b5e}.brand{flex-direction:column;align-items:center;gap:9px;margin-bottom:18px;padding:0 0 17px;border-bottom:1px solid #ffffff12}.brand-logo{width:100%;max-width:205px}.brand strong{font-size:14px;font-weight:700;letter-spacing:0;text-align:center;color:#edfaff}.brand-system{font-size:11px;color:#93b8c9;text-align:center;letter-spacing:.3px}aside .nav{flex-shrink:0;width:100%;margin:0;background:linear-gradient(110deg,#ffffff0d,#ffffff07);border:1px solid #ffffff13;border-radius:12px;padding:11px 12px;min-height:45px;color:#cbe0ea;box-shadow:0 3px 8px #00000008;transition:background .2s,border-color .2s,transform .2s}aside .nav .button-icon{padding:4px;width:27px;height:27px;border-radius:8px;background:#ffffff0b;color:#9bc5d6}aside .nav:hover{background:#ffffff15;border-color:#ffffff2a;transform:translateX(2px);filter:none}aside .nav.active{background:linear-gradient(115deg,#168c98,#16728c);border-color:#3da7b0;color:#fff;box-shadow:0 6px 18px #00172333}aside .nav.active .button-icon{background:#ffffff20;color:#d9fff9}.aside-bottom{margin-top:auto;padding:18px 0 0;gap:12px;border-top:0}.sidebar-contact{display:grid;gap:10px;padding:14px 10px;border:1px solid #ffffff14;border-radius:13px;background:#ffffff06;margin-top:8px}.sidebar-contact a{display:flex;align-items:center;gap:9px;color:#aacbd9;font-size:11px;text-decoration:none;white-space:nowrap}.sidebar-contact a:hover{color:#80e8e1}.sidebar-contact a>span,.sidebar-contact svg{width:17px;height:17px;flex-shrink:0;display:grid;place-items:center;color:#57bcc3;font-size:15px}#identity{padding:0 10px;color:#b5d0dd;font-size:12px}aside #logout{background:#ffffff09;border:1px solid #ffffff15;border-radius:11px;padding:11px 12px;color:#c5dce8;width:100%;min-height:42px}aside #logout:hover{background:#ffffff14}@media(max-width:700px){#workspace aside{gap:6px;padding:14px}.brand{margin-bottom:8px}.sidebar-contact{margin:0;gap:8px}.aside-bottom{padding-top:8px}} .firm-delete-card{border-color:#f2d5d9}.danger-button{background:linear-gradient(135deg,#d6485a,#b93347);border-color:#bd394c;color:white}.danger-button:hover{background:#ab2e41}#delete-firm-dialog{width:480px;max-width:calc(100vw - 32px);border:1px solid #e9ced4;border-radius:18px;padding:24px;max-height:85vh;overflow:auto}#delete-firm-dialog::backdrop{background:#102f4666}#delete-description{color:#705363;line-height:1.6}#delete-feedback{color:#b93347} .heading-firm{font-size:.72em;font-weight:600;color:#59778b;letter-spacing:0;overflow-wrap:anywhere}header h1{overflow-wrap:anywhere} #overview .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;overflow:visible;width:100%;padding-bottom:0}#overview .metrics .metric{width:auto;min-width:0;flex:none;padding:16px;overflow-wrap:anywhere}#overview .metrics .metric-title{min-height:36px}#overview .metrics .metric-value{font-size:24px}@media(max-width:450px){#overview .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#overview .metrics .metric{padding:12px}#overview .metrics .metric-value{font-size:21px}} #overview #chart{width:100%;min-width:0;display:block}#overview #chart svg{display:block;width:100%;max-width:none;height:320px} #overview .metrics{gap:10px}#overview .metrics .metric{padding:12px 13px;border-radius:12px}#overview .metrics .metric-title{font-size:12px;min-height:0;line-height:1.4}#overview .metrics .metric-value{font-size:21px;margin:10px 0 5px;line-height:1.2}#overview .metrics .metric-value small{font-size:11px}#overview .metrics .metric-sub{font-size:11px;line-height:1.4} .auth{background:linear-gradient(120deg,#103e4b88,#16483738),url('environment.svg') center/cover no-repeat;min-height:100vh;padding:30px 18px}.auth-card{background:#ffffffef;backdrop-filter:blur(12px);border:1px solid #ffffffb3;box-shadow:0 24px 90px #103e4b45;padding:30px;width:min(480px,100%)}.auth-resources{display:flex;gap:6px;flex-wrap:wrap;padding:16px 0;border-top:1px solid #dde9e5}.auth-resources span{font-size:11px;padding:5px 8px;background:#edf6f2;border:1px solid #d9e9e1;border-radius:7px;color:#47766a}.auth-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;border-top:1px solid #dde9e5;padding-top:16px;text-align:center}.auth-contact strong{flex-basis:100%;font-size:13px;color:#265950;margin-bottom:3px}.auth-contact a{font-size:12px;color:#577e79;text-decoration:none}.auth-contact a:hover{color:#078b8f}@media(max-width:500px){.auth-card{padding:24px}.auth-contact{gap:10px}} /* Keep the mobile brand and sidebar contacts on single lines. */ @media(max-width:700px){ #workspace aside .brand{width:100%;flex-basis:100%;min-width:0} #workspace aside .brand strong{width:100%;white-space:nowrap;font-size:clamp(12px,3.5vw,16px);line-height:1.4} #workspace aside .aside-bottom{width:100%;min-width:0;margin-left:0;flex-wrap:wrap;gap:10px} #workspace aside .sidebar-contact{width:100%;min-width:0;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:4px;padding:12px 6px} #workspace aside .sidebar-contact a{min-width:0;gap:3px;font-size:clamp(7.5px,2.35vw,11px);white-space:nowrap} #workspace aside .sidebar-contact a>span,#workspace aside .sidebar-contact svg{width:11px;height:11px;font-size:11px} #workspace aside #logout{width:auto;margin-left:auto} } /* Constrain water forms, including iOS native date controls. */ #meter-reading-form,#meter-reading-fields,#meter-reading-fields fieldset{min-width:0;max-width:100%} #meter-reading-form label,#meter-reading-form .reading-pair,#meter-reading-form .opening-edit{min-width:0} #meter-reading-form input,#meter-reading-form select{min-width:0;max-width:100%;width:100%;box-sizing:border-box} @media(max-width:700px){ #meters{min-width:0;max-width:100%} #meters .form-card{padding:14px;min-width:0} #meter-reading-fields{grid-template-columns:minmax(0,1fr);gap:14px;margin:14px 0} #meter-reading-fields fieldset{width:100%;margin:0;padding:12px} #meter-reading-fields legend{font-size:13px;max-width:100%;overflow-wrap:anywhere} #meter-reading-form{grid-template-columns:minmax(0,1fr);gap:14px} #meter-reading-form label{font-size:13px;gap:6px} #meter-reading-form .reading-pair{grid-template-columns:minmax(0,1fr);gap:10px} #meter-reading-form input,#meter-reading-form select{font-size:16px;padding:9px 10px;min-height:42px} #meter-reading-form input[type=date]{display:block;appearance:none;-webkit-appearance:none;inline-size:100%;min-inline-size:0} #meter-reading-form input[type=date]::-webkit-date-and-time-value{text-align:left;min-width:0} #meter-reading-form .opening-edit{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:6px} #meter-reading-form .opening-edit button{width:40px;min-width:0;padding:8px} #meter-reading-form .muted{font-size:12px} } @media(max-width:700px){ #workspace aside .brand{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;text-align:center;gap:9px} #workspace aside .brand-logo{display:block;margin-inline:auto;width:205px;max-width:100%} #workspace aside .brand strong,#workspace aside .brand-system{display:block;width:max-content;max-width:100%;justify-self:center;margin:0;padding:0;text-align:center;transform:none;letter-spacing:0} } /* Corporate emissions and carbon footprint photography. */ .auth{background:linear-gradient(90deg,#081d2a52,#0b28301a,#081d2a52),url('carbon-corporate.png') center/cover no-repeat;background-color:#102d38} .auth-card{background:#fffffff5;border-color:#ffffff80;border-radius:16px;box-shadow:0 24px 80px #00121e66;backdrop-filter:blur(8px)} @media(max-width:700px){.auth{background-position:42% center}.auth-card{background:#fffffff7}} .firm-search-trigger{width:100%;text-align:left;min-height:46px;font-size:14px;font-weight:500}.firm-search-dialog{width:480px;max-width:calc(100vw - 28px);max-height:80vh;border:1px solid #d5e2eb;border-radius:16px;padding:20px;box-shadow:0 24px 80px #102f4640}.firm-search-dialog::backdrop{background:#102f4655}.firm-search-dialog label{margin-bottom:14px}.firm-search-dialog input{width:100%;font-size:16px}.firm-search-results{display:grid;gap:5px;max-height:48vh;overflow-y:auto}.firm-search-option{background:#f4f8fb;color:#23495e;text-align:left;font-size:14px;font-weight:500;overflow-wrap:anywhere}.firm-search-option[aria-pressed=true]{background:#e1f4f3;color:#087c84}.firm-search-option:focus-visible{outline-offset:-3px} /* Frosted glass login card against the corporate background. */ .auth .auth-card{background:rgba(13,38,50,.48);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);box-shadow:0 24px 80px #00121e66,inset 0 1px 0 #ffffff35;color:#edf6fa} .auth-card h1,.auth-card label{color:#f3fbff}.auth-card .eyebrow{color:#7ae2e4}.auth-card #auth-help{color:#c9dce6}.auth-card input{background:#ffffffde;border-color:#ffffff70;color:#18394e}.auth-card .auth-resources,.auth-card .auth-contact{border-color:#ffffff30}.auth-card .auth-resources span{background:#ffffff12;border-color:#ffffff2e;color:#d4e9eb}.auth-card .auth-contact strong{color:#effcfa}.auth-card .auth-contact a,.auth-card #install-link a{color:#c8e5e5}.auth-card .auth-contact a:hover{color:#80f0e6}.auth-card #auth-error{color:#ffd1cd} .firm-search-wrap{position:relative;width:100%;min-width:0}.firm-search-panel{position:absolute;top:calc(100% + 6px);left:0;width:100%;min-width:0;background:#fff;border:1px solid #cedee7;border-radius:12px;padding:10px;z-index:40;box-shadow:0 14px 36px #133d5026}.firm-search-panel input{display:block;width:100%;min-width:0;font-size:16px;margin-bottom:9px}.firm-search-panel .firm-search-results{max-height:240px}.firm-search-panel .muted{margin:8px;font-size:13px}.firm-search-trigger{white-space:normal;overflow-wrap:anywhere} .auth .auth-logo,#workspace aside .brand-logo{background:transparent;border:0;box-shadow:none;border-radius:0} .auth .auth-card{background:rgba(9,30,42,.18);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-color:rgba(255,255,255,.28);box-shadow:0 18px 60px #00121e40,inset 0 1px 0 #ffffff20}.auth-card h1,.auth-card label,.auth-card #auth-help,.auth-card .auth-contact{text-shadow:0 1px 3px #00121eb3} .auth .auth-card{background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} /* Signature entry action: luminous cyan, precise outline and directional cue. */ .auth #auth-button{position:relative;isolation:isolate;overflow:hidden;min-height:60px;padding:17px 64px 17px 26px;border-radius:18px 6px 18px 6px;border:1px solid #87fff094;background:linear-gradient(115deg,#075b69 0%,#0d9097 48%,#086778 100%);color:#f2fffc;font-size:16px;font-weight:750;letter-spacing:.5px;box-shadow:0 10px 28px #00c6b82b,inset 0 1px 0 #c0ffef66,inset 0 -1px 0 #003f5c88;transition:transform .22s,box-shadow .22s,border-color .22s;filter:none} .auth #auth-button::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,#ffffff26 45%,transparent 70%);transform:translateX(-115%);transition:transform .65s} .auth #auth-button::after{content:"↗";position:absolute;right:14px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;border:1px solid #c4fff066;border-radius:11px 4px 11px 4px;background:#d2fff015;color:#dcfff6;font-size:24px;font-weight:400;transition:background .22s,transform .22s} .auth #auth-button:hover{transform:translateY(-2px);border-color:#adfff2;box-shadow:0 14px 36px #00d5bd40,inset 0 1px 0 #e0fffaa3} .auth #auth-button:hover::before{transform:translateX(115%)} .auth #auth-button:hover::after{background:#d2fff02b;transform:translateY(-50%) rotate(5deg)} .auth #auth-button:active{transform:translateY(0);box-shadow:0 4px 14px #00c6b826,inset 0 2px 5px #002c4655} .auth #auth-button:focus-visible{outline:3px solid #b0fff0;outline-offset:5px} .auth #auth-button:disabled{transform:none;opacity:.6} @media(prefers-reduced-motion:reduce){.auth #auth-button,.auth #auth-button::before,.auth #auth-button::after{transition:none}.auth #auth-button:hover{transform:none}} /* Unified luminous action language throughout the portal. */ body button{position:relative;isolation:isolate;overflow:hidden;border-radius:18px 6px 18px 6px;border:1px solid #70e6dc99;background:linear-gradient(115deg,#075b69,#0d9097 48%,#086778);color:#f2fffc;box-shadow:0 6px 18px #008d8620,inset 0 1px 0 #c0ffef66;transition:transform .22s,box-shadow .22s,border-color .22s;filter:none} body button::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#ffffff26 45%,transparent 70%);transform:translateX(-115%);transition:transform .65s} body button:hover{transform:translateY(-2px);filter:none;box-shadow:0 10px 25px #008d8633,inset 0 1px 0 #e0fffaa3;border-color:#61cfc7} body button:hover::before{transform:translateX(115%)} body button:active{transform:translateY(0)} body button:focus-visible{outline:3px solid #50bcb5;outline-offset:3px} body button:disabled{transform:none;opacity:.55;box-shadow:none} body button.secondary{background:linear-gradient(115deg,#e8f6f6,#fbffff 48%,#dceeee);color:#195468;border-color:#b1d7dc} body button.danger-button{background:linear-gradient(115deg,#922d46,#d6485a 48%,#ac3148);color:#fff;border-color:#f495a8;box-shadow:0 6px 18px #b9334726,inset 0 1px 0 #ffd0d466} body #export{background:linear-gradient(115deg,#087650,#139763 48%,#09644b);border-color:#71d8ad;color:#f0fff7} #workspace aside button.nav,#workspace aside #logout{border-radius:18px 6px 18px 6px;background:linear-gradient(115deg,#214858cc,#193c4f 48%,#102d40);border:1px solid #76c9d338;box-shadow:0 4px 12px #00172322,inset 0 1px 0 #c0ffef14;color:#d7eef2} #workspace aside button.nav.active{background:linear-gradient(115deg,#075b69,#0d9097 48%,#086778);border-color:#79e8dd99;color:#fff;box-shadow:0 6px 18px #00c6b82b,inset 0 1px 0 #c0ffef66} #workspace aside button.nav:hover,#workspace aside #logout:hover{transform:translateY(-2px);border-color:#7ad8d6} body .firm-search-trigger{border-radius:14px 5px 14px 5px} body .firm-search-option{border-radius:12px 4px 12px 4px;background:linear-gradient(115deg,#eff8f9,#faffff);border-color:#d6e9ec;color:#23495e;box-shadow:inset 0 1px 0 #ffffff99} body .firm-search-option[aria-pressed=true]{background:linear-gradient(115deg,#086b76,#10969b);border-color:#54cbbf;color:#fff} body .opening-edit button{border-radius:12px 4px 12px 4px} @media(prefers-reduced-motion:reduce){body button,body button::before{transition:none}body button:hover,#workspace aside button.nav:hover,#workspace aside #logout:hover{transform:none}} .auth #login input{border-radius:18px 6px 18px 6px;background:#fff;color:#18394e;border:1px solid #b5dfdf;min-height:52px;padding:14px 16px;box-shadow:inset 0 1px 0 #fff,0 5px 16px #00121e1a} .auth #login input:focus{background:#fff;border-color:#6de2d5;box-shadow:0 0 0 3px #6de2d52b} .auth #login input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:#18394e;caret-color:#18394e} .auth-card .eyebrow{color:#00bdd5;text-shadow:0 1px 3px #00121eb3} .auth-card #auth-title{color:#92d224;text-shadow:0 2px 5px #00121e99} .auth-card #auth-help{color:#71dce6;text-shadow:0 1px 3px #00121eb3} .login-field-error{font-size:13px;font-weight:500;line-height:1.5;color:#ffd4cc;text-shadow:0 1px 3px #00121e}.login-field-error:empty{display:none}.auth #login input[aria-invalid=true]{border-color:#ff857b;box-shadow:0 0 0 3px #ff857b30} .auth-card>.eyebrow{text-align:center;width:100%;font-size:clamp(14px,3.6vw,16px);letter-spacing:1.7px;line-height:1.5;margin:0 0 18px} /* Compact centered login heading group. */ .auth .auth-logo{display:block;margin:0 auto 12px;padding:0} .auth-card>.eyebrow{text-align:center;margin:0 0 8px} .auth-card #auth-help{text-align:center;margin:0 0 10px;line-height:1.45} .auth-card #auth-title{text-align:center;margin:0;line-height:1.25} .auth-card #login{margin:20px 0;gap:16px} /* Balanced resource tiles fill the width of the login area. */ .auth-card .auth-resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;padding:16px 0;margin:0;justify-content:stretch} .auth-card .auth-resources span{display:flex;align-items:center;justify-content:center;min-width:0;min-height:38px;padding:7px 6px;border-radius:12px 4px 12px 4px;border:1px solid #69c9d238;background:linear-gradient(125deg,#52c6ce14,#173e4d33);box-shadow:inset 0 1px 0 #d0fffa14;color:#ddf4f3;font-size:10px;line-height:1.35;letter-spacing:.1px;text-align:center;overflow-wrap:anywhere;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)} .auth-card .auth-resources span:nth-child(3n+1){border-top-color:#8bd12b70} .auth-card .auth-resources span:nth-child(3n+2){border-top-color:#00bad570} @media(max-width:360px){.auth-card .auth-resources{gap:6px}.auth-card .auth-resources span{font-size:9px;padding:6px 4px}} /* Corporate contact signature. */ .auth-card .auth-contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px;width:100%;margin-top:14px;padding:15px 10px;border:1px solid #71ced329;border-top-color:#6ed7d75c;border-radius:16px 5px 16px 5px;background:linear-gradient(130deg,#1b536026,#091f293d);box-shadow:inset 0 1px 0 #d4fffa14;text-shadow:none} .auth-card .auth-contact strong{grid-column:1/-1;margin:0 0 2px;color:#d7f4eb;font-size:14px;font-weight:650;letter-spacing:.25px;text-align:center} .auth-card .auth-contact a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;padding:6px 0;color:#cce5e9;font-size:clamp(8px,2.3vw,10px);white-space:nowrap;border-radius:9px;text-decoration:none;transition:background .2s,color .2s} .auth-card .auth-contact a::before{display:grid;place-items:center;width:25px;height:25px;border-radius:8px 3px 8px 3px;border:1px solid #70d7d640;background:#16a7b516;color:#65dae0;font-size:15px;font-weight:600;line-height:1} .auth-card .auth-contact a[href^="https"]::before{content:"↗"} .auth-card .auth-contact a[href^="mailto"]::before{content:"@"} .auth-card .auth-contact a[href^="tel"]::before{content:"☎";color:#ff575d;border-color:#ed696c66;background:#d8323820} .auth-card .auth-contact a:hover{color:#aff5e3;background:#8beedb0c} .auth-card .auth-contact a:focus-visible{outline:2px solid #75e0d4;outline-offset:3px} /* Compact login layout for shorter screens. */ .auth{padding:14px 16px} .auth .auth-card{padding:14px 24px} .auth .auth-logo{margin-bottom:8px;max-width:360px} .auth-card>.eyebrow{font-size:14px;margin-bottom:5px} .auth-card #auth-help{font-size:13px;margin-bottom:6px;line-height:1.35} .auth-card #auth-title{font-size:23px;line-height:1.2} .auth-card #login{margin:14px 0;gap:11px} .auth-card #login label{gap:5px;font-size:13px} .auth #login input{min-height:44px;padding:10px 14px} .auth #auth-button{min-height:50px;padding-top:12px;padding-bottom:12px;font-size:15px} .auth-card .auth-resources{padding:10px 0;gap:6px} .auth-card .auth-resources span{min-height:30px;padding:5px 4px} .auth-card .auth-contact{margin-top:8px;padding:10px 8px;gap:6px} .auth-card .auth-contact strong{font-size:13px;margin:0} .auth-card .auth-contact a{padding:3px 0;gap:4px} .auth-card .auth-contact a::before{width:22px;height:22px;font-size:13px} #auth-error:empty{display:none} @media(max-width:500px){.auth .auth-card{padding:10px 12px}.auth-card #auth-title{font-size:21px}} @media(max-height:760px) and (min-width:701px){.auth .auth-logo{max-width:300px}.auth .auth-card{padding:8px 24px}.auth-card #login{margin:10px 0;gap:9px}.auth-card .auth-resources span{min-height:27px}} body #export.export-empty{cursor:help;opacity:.55;transform:none;box-shadow:none}body #export.export-empty:hover{transform:none} #overview #chart{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:#8bafb9 #f2f7fa}#overview #chart svg{height:auto;min-height:290px;max-height:none;overflow:visible}#chart .chart-month-panel{filter:none}#chart .chart-data-bar{filter:none;transition:opacity .15s}#chart .chart-data-bar:hover,#chart .chart-data-bar:focus{stroke:#18394e;stroke-width:1.5;outline:none}#chart-legend{gap:8px 14px;padding-top:14px}#chart-legend .legend-item{padding:6px 8px;background:#f4f8fb;border:1px solid #e2edf2;border-radius:8px} #meter-reading-notice:empty{display:none}#meter-reading-notice:not(:empty){padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.5}#meter-reading-notice.error{background:#fff0f2;border:1px solid #f3b5c2;color:#a52e47}#meter-reading-notice.success{background:#eaf8f2;border:1px solid #b4dfcf;color:#18785c} /* Place water reading captions to the right of their controls. */ #meter-reading-fields .reading-index-label,#meter-reading-fields .reading-date-label{display:grid;grid-template-columns:minmax(0,1fr) 110px;align-items:center;gap:8px} #meter-reading-fields .index-caption,#meter-reading-fields .date-caption{grid-column:2;grid-row:1;font-size:12px;line-height:1.35} #meter-reading-fields .reading-index-label>input,#meter-reading-fields .reading-index-label>.opening-edit,#meter-reading-fields .reading-date-label>input{grid-column:1;grid-row:1} #meter-reading-fields .meter-override-note{grid-column:1/-1;font-size:11px} #meter-reading-fields .reading-pair{gap:10px;margin-bottom:10px} #meter-reading-fields fieldset{padding:14px} #meter-reading-fields fieldset>.muted{margin:6px 0 0;font-size:12px} @media(max-width:1100px){#meter-reading-fields .reading-pair{grid-template-columns:minmax(0,1fr)}} @media(max-width:700px){#meter-reading-fields .reading-index-label,#meter-reading-fields .reading-date-label{grid-template-columns:minmax(0,1fr) 100px;gap:7px}#meter-reading-fields fieldset{padding:12px}#meter-reading-fields .reading-pair{gap:8px;margin-bottom:8px}} /* Compact single-row monthly summary. */ #month-summary .summary-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 0;font-size:12px;line-height:1.4} #month-summary .summary-row>span{min-width:0} #month-summary .summary-row strong{display:flex;align-items:center;justify-content:flex-end;gap:12px;white-space:nowrap;font-size:12px;font-weight:600} #month-summary .summary-row strong small{display:inline-block;margin:0;padding-left:10px;border-left:1px solid #d8e7ed;font-size:11px;line-height:1.4} @media(max-width:400px){#month-summary .summary-row{font-size:11px;gap:6px;padding:8px 0}#month-summary .summary-row strong{gap:6px;font-size:11px}#month-summary .summary-row strong small{font-size:10px;padding-left:6px}} .filters{align-items:center} .filters>label{flex-direction:row;align-items:center;gap:10px;white-space:nowrap} .filters>label:first-child{min-width:0} .filters>label:first-child>.firm-search-wrap{width:240px;max-width:100%;flex:1;min-width:0} .filters>label>select{min-width:112px} .filters .filter-note{padding-bottom:0} @media(max-width:700px){.filters>label:first-child{min-width:0;flex:1 1 100%}.filters>label:first-child>.firm-search-wrap{width:auto}.filters>label{gap:8px}.filters>label>select{min-width:100px}} /* Water field captions precede their inputs on the left. */ #meter-reading-fields .reading-index-label,#meter-reading-fields .reading-date-label{grid-template-columns:110px minmax(0,1fr)} #meter-reading-fields .index-caption,#meter-reading-fields .date-caption{grid-column:1;grid-row:1;text-align:left} #meter-reading-fields .reading-index-label>input,#meter-reading-fields .reading-index-label>.opening-edit,#meter-reading-fields .reading-date-label>input{grid-column:2;grid-row:1} @media(max-width:700px){#meter-reading-fields .reading-index-label,#meter-reading-fields .reading-date-label{grid-template-columns:100px minmax(0,1fr)}} .monthly-entry-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}.monthly-entry-heading .eyebrow{font-size:12px;font-weight:700;letter-spacing:1.1px;color:#137c89;line-height:1.5;margin:0} .filters{flex-wrap:wrap} .filters>label{flex-shrink:0} .filters>label:first-child>.firm-search-wrap{flex:0 0 240px;width:240px} .water-filter-settings{margin-left:auto;border-left:1px solid #d6e5ec;padding:0 0 0 18px;flex:1 1 360px;min-width:0;max-width:680px} .water-filter-settings .section-top{margin-bottom:8px} .water-filter-settings h2{font-size:14px;margin:0 0 4px} .water-filter-settings .section-top .muted{font-size:11px;line-height:1.4;margin:0} .water-filter-settings .meter-settings{align-items:center;gap:10px} .water-filter-settings .meter-settings label{flex-direction:row;align-items:center;min-width:0;gap:8px;font-size:12px} .water-filter-settings #meter-count{width:70px;min-width:70px;padding:8px} .water-filter-settings #name-meters{font-size:12px;padding:9px 12px;min-height:36px} .water-filter-settings #meter-status{font-size:11px;margin:5px 0 0} @media(max-width:700px){.filters>label:first-child>.firm-search-wrap{flex:1 1 auto;width:auto}.water-filter-settings{flex-basis:100%;max-width:none;margin-left:0;border-left:0;border-top:1px solid #d6e5ec;padding:12px 0 0}} header>div:first-child{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0} .header-year-selector{flex-direction:row;align-items:center;gap:7px;font-size:13px;flex-shrink:0} .header-year-selector select{width:100px;min-width:0;padding:9px 10px} .firm-user-filters>label,.firm-user-filters>.filter-note{display:none} .firm-user-filters .water-filter-settings{margin-left:0;padding-left:0;border-left:0;max-width:none} @media(max-width:700px){.header-year-selector select{width:92px}.firm-user-filters .water-filter-settings{border-top:0;padding-top:0}} .resource-section-heading{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}.resource-section-heading span{font-size:12px;font-weight:500;color:#607b90;letter-spacing:0} /* Compact page heading, matching the company name size. */ main header{margin-bottom:14px;padding-bottom:12px;gap:12px} main header #page-title{font-size:22px;line-height:1.3;letter-spacing:-.2px;margin:0} main header #page-title .heading-firm{font-size:1em;font-weight:600} main .filters{padding:12px 16px;margin-bottom:16px;gap:14px} main header .header-actions button{min-height:40px;padding:9px 14px;font-size:13px} @media(max-width:700px){main header #page-title{font-size:20px}main header{margin-bottom:12px;padding-bottom:10px}main .filters{padding:10px 12px}} /* Three compact monthly entry fields per row. */ #record-form .field-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;margin:14px 0} #record-form .field-grid label{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:center;gap:6px;min-width:0;font-size:11px;line-height:1.35} #record-form .record-field-caption{min-width:0;overflow-wrap:anywhere} #record-form .field-grid input{width:100%;min-width:0;padding:9px 7px;font-size:13px;min-height:40px} #record-form>label{flex-direction:row;align-items:center;gap:10px} #record-form>label select{flex:1;min-width:0} @media(max-width:1100px){#record-form .field-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:700px){#record-form .field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#record-form .field-grid input{font-size:16px}} @media(max-width:420px){#record-form .field-grid{grid-template-columns:minmax(0,1fr)}#record-form .field-grid label{grid-template-columns:120px minmax(0,1fr);font-size:12px}} /* Give monthly entry more room and keep the preview compact on the right. */ #entry>.entry-layout{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:16px} #entry>.entry-layout>.form-card{min-width:0} #entry>.entry-layout>.form-card:last-child{padding:18px 14px} #entry #month-summary .summary-row{gap:6px;font-size:11px;padding:8px 0} #entry #month-summary .summary-row strong{font-size:11px;gap:6px} #entry #month-summary .summary-row strong small{padding-left:6px;font-size:10px} @media(max-width:1100px){#entry>.entry-layout{grid-template-columns:minmax(0,1fr)}} /* Compact framed monthly fields. */ #record-form .field-grid{gap:10px} #record-form .field-grid label{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:4px;padding:9px 8px;border:1px solid #d5e5ec;border-radius:12px 4px 12px 4px;background:linear-gradient(125deg,#f3f9fa,#fff);box-shadow:inset 0 1px 0 #fff} #record-form .record-field-caption{color:#385b70;font-weight:600} #record-form .field-grid input{padding:8px 6px;min-height:36px;border-color:#cddfe6;background:#fff} #record-form .field-grid label:focus-within{border-color:#48b6b7;box-shadow:0 0 0 2px #36a9ad10} @media(max-width:420px){#record-form .field-grid label{grid-template-columns:110px minmax(0,1fr);gap:5px;padding:8px}} body button.reading-date-info{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;width:24px;height:24px;min-height:0;margin-left:5px;padding:3px;border-radius:6px;border:1px solid #cce4e9;background:#edf7f8;color:#218791;box-shadow:none;transform:none} .reading-date-info svg{width:16px;height:16px}.reading-date-tooltip{position:fixed;z-index:1000;max-width:calc(100vw - 16px);padding:9px 12px;border-radius:9px;background:#153e51;color:#fff;box-shadow:0 5px 18px #0e304b30;font-size:12px;line-height:1.4;pointer-events:none} #meter-table-card th{min-width:95px;padding:12px 8px;font-size:12px}#meter-table-card td{padding:10px 8px;font-size:12px;white-space:nowrap} /* Fit month and reading controls to their actual content. */ #meter-reading-form>label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px} #meter-reading-form #meter-month{width:145px;max-width:100%;flex:none;min-width:0} #meter-reading-fields .reading-pair{display:flex;align-items:start;justify-content:flex-start;flex-wrap:wrap;gap:14px} #meter-reading-fields .reading-index-label{grid-template-columns:105px auto;gap:7px;flex:none} #meter-reading-fields .reading-date-label{grid-template-columns:105px auto;gap:7px;flex:none} #meter-reading-fields .reading-index-label>input{width:92px;max-width:100%;padding:9px 8px} #meter-reading-fields .opening-edit{display:flex;align-items:center;gap:5px;min-width:0} #meter-reading-fields .opening-edit input{width:92px;max-width:100%;flex:none;padding:9px 8px} #meter-reading-fields .opening-edit button{width:34px;min-width:34px;padding:6px;min-height:36px} #meter-reading-fields .reading-date-label>input{width:154px;max-width:100%;min-inline-size:0;padding:9px 8px} @media(max-width:700px){#meter-reading-fields .reading-pair{gap:10px}#meter-reading-fields .reading-index-label,#meter-reading-fields .reading-date-label{grid-template-columns:100px auto}#meter-reading-fields .reading-date-label>input{width:154px}#meter-reading-form #meter-month{width:135px}} /* Three meters across, with compact controls stacked within each card. */ #meter-reading-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #meter-reading-fields fieldset{min-width:0;padding:12px} #meter-reading-fields .reading-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:12px} #meter-reading-fields .reading-index-label,#meter-reading-fields .reading-date-label{grid-template-columns:100px minmax(0,1fr);width:100%;gap:6px} #meter-reading-fields .reading-index-label>input,#meter-reading-fields .opening-edit input{width:92px;max-width:100%} #meter-reading-fields .reading-date-label>input{width:154px;max-width:100%} #meter-reading-fields .opening-edit{width:100%;min-width:0} #meter-reading-fields .opening-edit input{flex:0 1 92px;min-width:0} #meter-reading-fields .opening-edit button{flex-shrink:0} @media(max-width:1100px){#meter-reading-fields{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){#meter-reading-fields{grid-template-columns:minmax(0,1fr)}} /* Keep each index and its reading date on a single compact row. */ #meter-reading-fields .reading-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:7px;align-items:center;margin-bottom:10px} #meter-reading-fields .reading-index-label{grid-template-columns:56px minmax(0,1fr);gap:4px} #meter-reading-fields .reading-date-label{grid-template-columns:54px minmax(0,1fr);gap:4px} #meter-reading-fields .index-caption,#meter-reading-fields .date-caption{font-size:10px;line-height:1.25} #meter-reading-fields .date-caption{gap:3px} #meter-reading-fields .date-caption svg{width:12px;height:12px;flex-shrink:0} #meter-reading-fields .reading-index-label>input,#meter-reading-fields .opening-edit input{width:100%;min-width:0;font-size:11px;padding:7px 4px;min-height:34px} #meter-reading-fields .opening-edit{gap:3px} #meter-reading-fields .opening-edit input{flex:1 1 auto} #meter-reading-fields .opening-edit button{width:25px;min-width:25px;min-height:32px;padding:4px} #meter-reading-fields .opening-edit button svg{width:16px;height:16px} #meter-reading-fields .reading-date-label>input{width:100%;min-width:0;font-size:11px;padding:7px 4px;min-height:34px} @media(max-width:700px){#meter-reading-fields .reading-pair{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:6px}#meter-reading-fields .reading-index-label{grid-template-columns:52px minmax(0,1fr)}#meter-reading-fields .reading-date-label{grid-template-columns:48px minmax(0,1fr)}#meter-reading-fields .index-caption,#meter-reading-fields .date-caption{font-size:9px}#meter-reading-fields .reading-index-label>input,#meter-reading-fields .opening-edit input,#meter-reading-fields .reading-date-label>input{font-size:12px}} /* Single-line date captions with a shorter date input. */ #meter-reading-fields .reading-pair{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)} #meter-reading-fields .reading-date-label{grid-template-columns:max-content minmax(0,1fr);gap:5px} #meter-reading-fields .date-caption{white-space:nowrap;font-size:9px;line-height:1.3} #meter-reading-fields .date-caption svg{width:11px;height:11px} #meter-reading-fields .reading-date-label>input{width:112px;max-width:100%;padding:7px 2px;font-size:10px} @media(max-width:700px){#meter-reading-fields .reading-pair{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}#meter-reading-fields .reading-date-label{grid-template-columns:max-content minmax(0,1fr)}#meter-reading-fields .date-caption{font-size:9px}#meter-reading-fields .reading-date-label>input{width:112px;font-size:11px}} #meter-reading-fields .reading-index-label{grid-template-columns:max-content minmax(0,1fr);gap:5px} #meter-reading-fields .index-caption{white-space:nowrap;font-size:9px;line-height:1.3} #meter-reading-fields .reading-index-label>input,#meter-reading-fields .opening-edit input{width:66px;max-width:100%;padding:7px 3px;font-size:11px} #meter-reading-fields .opening-edit{width:auto;justify-content:flex-start} #meter-reading-fields .opening-edit input{flex:0 1 66px} @media(max-width:700px){#meter-reading-fields .reading-index-label{grid-template-columns:max-content minmax(0,1fr)}#meter-reading-fields .reading-index-label>input,#meter-reading-fields .opening-edit input{width:66px;font-size:12px}} /* Four water meter cards across on wide screens. */ #meter-reading-fields{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} #meter-reading-fields fieldset{padding:10px 8px} @media(max-width:1400px){#meter-reading-fields{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:1100px){#meter-reading-fields{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){#meter-reading-fields{grid-template-columns:minmax(0,1fr)}} /* Five water meter cards across on wide screens. */ #meter-reading-fields{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} @media(max-width:1600px){#meter-reading-fields{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:1400px){#meter-reading-fields{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:1100px){#meter-reading-fields{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){#meter-reading-fields{grid-template-columns:minmax(0,1fr)}} .water-reading-heading{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:12px}.water-reading-heading h2{margin:0;font-size:18px}.water-reading-heading label{flex-direction:row;align-items:center;gap:8px;font-size:13px}.water-reading-heading #meter-month{width:135px;min-width:0;padding:8px 10px} .water-reading-heading{gap:10px 16px} .water-reading-heading .water-meter-count-label{font-size:12px} .water-reading-heading #meter-count{width:65px;min-width:0;padding:8px} .water-reading-heading #name-meters{font-size:12px;padding:9px 12px;min-height:36px} @media(max-width:700px){.water-reading-heading{gap:10px}.water-reading-heading .water-meter-count-label{flex-wrap:wrap;font-size:11px}} /* Reduce vertical gaps around calculated consumption and saving. */ #meter-reading-fields .reading-pair{margin-bottom:5px;gap:5px} #meter-reading-fields fieldset{padding-top:8px;padding-bottom:8px} #meter-reading-fields fieldset>.muted{margin:2px 0 0;line-height:1.3;font-size:11px} #meter-reading-fields{margin:6px 0 0;row-gap:8px} #meter-reading-form{gap:8px} #meter-reading-form>button[type=submit]{margin-top:0;min-height:38px;padding:9px 14px} .water-reading-heading{margin-bottom:8px} .period-selection-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .period-selection-row>label{flex-direction:row;align-items:center;gap:8px;font-size:13px} .period-selection-row select{width:135px;min-width:0;padding:8px 10px} .period-selection-row #year,.water-reading-heading #year{width:100px;min-width:0;padding:8px 10px} .selection-hint.selection-error{color:#b92c45;font-weight:600} #record-form>button[type=submit]{display:flex;align-items:center;justify-content:center;width:100%;max-width:none;min-height:46px;justify-self:stretch} /* Five monthly entry fields per row on wide screens. */ #record-form .field-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} #record-form .field-grid label{padding:8px 6px;gap:4px;font-size:10px} #record-form .field-grid input{padding:8px 4px;font-size:12px} @media(max-width:1500px){#record-form .field-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:1200px){#record-form .field-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:700px){#record-form .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#record-form .field-grid input{font-size:16px}} @media(max-width:420px){#record-form .field-grid{grid-template-columns:minmax(0,1fr)}#record-form .field-grid label{font-size:12px}} body #export .button-icon,body #export:hover .button-icon{color:#f0fff7;opacity:1;stroke:currentColor;flex-shrink:0} #ges-form .ges-inline-field{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:10px;font-size:13px} #ges-form .ges-inline-field input{width:100%;min-width:0} @media(max-width:700px){#ges-form .ges-inline-field{grid-template-columns:125px minmax(0,1fr);gap:7px;font-size:12px}} .ges-share-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:14px 16px;border:1px solid #bee2d6;border-radius:14px 5px 14px 5px;background:linear-gradient(115deg,#eef9f3,#edf8fa);color:#245b57;font-size:14px}.ges-share-card strong{margin-left:auto;font-size:25px;color:#10816d}.ges-share-card small{flex-basis:100%;font-size:11px;color:#627f7c} #overview #chart{position:relative}body button.line-chart-legend{background:#f4f8fb;color:#35576c;border:1px solid #dce8ed;border-left:4px solid var(--series-color);border-radius:8px;padding:7px 9px;box-shadow:none;font-size:11px;text-align:left}body button.line-chart-legend[aria-pressed=true]{background:#e7f3f5;border-color:var(--series-color)}.chart-value-tooltip{position:absolute;z-index:2;max-width:320px;padding:9px 12px;border-radius:10px;background:#12394e;color:#fff;font-size:12px;line-height:1.5;pointer-events:none;box-shadow:0 5px 18px #102f4633} /* Fit the GES save action to its form on every screen size. */ #ges-form>button[type=submit]{display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-width:0;box-sizing:border-box;justify-self:stretch;white-space:normal} /* Keep each period label and its selector together in a compact box. */ body label.period-choice{display:inline-flex;flex-direction:row;align-items:center;gap:8px;padding:5px 6px 5px 10px;border:1px solid #cbdfe7;border-radius:10px;background:#f3f8fb;color:#20485c;font-size:13px;line-height:1.3;flex:0 0 auto;max-width:100%;box-sizing:border-box} body label.period-choice select{margin:0;min-height:34px;box-shadow:none;background:#fff;border-color:#d7e6ed} @media(max-width:700px){body label.period-choice{font-size:12px;padding:4px 5px 4px 8px;gap:6px}} /* Move the water period selectors together, so they cannot split across rows. */ .water-period-selection{flex:0 1 auto;min-width:0} @media(max-width:700px){ .period-selection-row{flex-wrap:nowrap;gap:6px;max-width:100%;min-width:0} .period-selection-row>label.period-choice{flex:0 1 auto;min-width:0;white-space:nowrap} .period-selection-row>label.period-choice select{min-width:0;max-width:100%;padding:7px 6px} .period-selection-row #year{width:78px;min-width:0} .period-selection-row #month,.period-selection-row #meter-month,.period-selection-row #ges-month{width:110px;min-width:0} .water-reading-heading>.water-period-selection{flex-basis:auto} } .filters:has(.firm-search-panel:not([hidden])){position:relative;z-index:50;overflow:visible} .firm-search-wrap:has(.firm-search-panel:not([hidden])){z-index:60} @media(max-width:700px){.firm-search-panel .firm-search-option{min-height:44px;touch-action:manipulation}.firm-search-panel .firm-search-results{max-height:40vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.firm-search-trigger{touch-action:manipulation}} @media(max-width:700px){ main.overview-layout header>div:first-child{flex-wrap:nowrap;gap:8px;width:100%;min-width:0} main.overview-layout header #page-title{flex:1 1 auto;min-width:0;font-size:18px;overflow-wrap:anywhere} main.overview-layout header .header-year-selector{flex:0 0 auto;white-space:nowrap} main.overview-layout header .header-year-selector #year{width:76px;padding:7px 6px} main.overview-layout .filters{gap:8px} main.overview-layout .filters>label:first-child{flex:1 1 0;min-width:0;white-space:normal} main.overview-layout .filters>label:first-child>.firm-search-wrap{flex:1 1 auto;width:auto;min-width:0} main.overview-layout .filters>.period-choice{flex:0 0 auto} main.overview-layout .filters #year{width:76px;min-width:0;padding:7px 6px} main.overview-layout .filters>.filter-note{flex-basis:100%} } /* Share amount and unit-consumption columns across all selected-month rows. */ #entry #month-summary{display:grid;grid-template-columns:minmax(0,1fr) max-content max-content;column-gap:8px} #entry #month-summary .summary-row{grid-column:1/-1;grid-template-columns:subgrid;column-gap:8px} #entry #month-summary .summary-row strong{display:contents} #entry #month-summary .summary-amount{grid-column:2;text-align:right;white-space:nowrap;font-weight:600;color:#214b63} #entry #month-summary .summary-row strong small{grid-column:3;align-self:center;margin:0;padding-left:8px;border-left:1px solid #d8e7ed;white-space:nowrap;text-align:right} #entry #month-summary>.muted{grid-column:1/-1} @media(max-width:400px){#entry #month-summary,#entry #month-summary .summary-row{column-gap:5px}#entry #month-summary .summary-row strong small{padding-left:5px}} .waste-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.waste-group{min-width:0;padding:12px;border-color:#c7e3dc;background:#f8fcfb}.waste-group legend{font-size:16px;font-weight:600;color:#26735d}.waste-hazardous{border-color:#efd3ca;background:#fffaf8}.waste-hazardous legend{color:#9c4c35}.waste-field{display:grid;grid-template-columns:minmax(0,1fr) 105px 22px;gap:7px;align-items:center;margin:0;padding:9px 0;border-bottom:1px solid #e1e9ed;font-size:12px}.waste-field:last-child{border-bottom:0}.waste-field input{width:100%;min-width:0;min-height:38px;padding:8px 10px}.waste-unit{color:#708697;font-size:11px}#waste-form>button[type=submit]{width:100%;justify-self:stretch;margin-top:10px}.waste-code-note{font-size:11px;margin-bottom:0}#waste-notice:empty{display:none}#waste-notice:not(:empty){padding:10px;border-radius:8px;background:#eaf8f1;color:#28694f}#waste-notice.error,#waste-type-notice{color:#a43e56}#waste-notice.error{background:#fff0f2}@media(max-width:850px){.waste-groups{grid-template-columns:minmax(0,1fr)}}@media(max-width:400px){.waste-field{grid-template-columns:minmax(0,1fr) 82px 18px;font-size:11px}} .waste-field{grid-template-columns:minmax(0,1fr) 30px 105px 22px}.waste-field .waste-delete-button{width:28px;min-height:28px;height:28px;padding:0;border-radius:7px;border-color:#e8bdc4;color:#a43e56;background:#fff0f2;box-shadow:none;font-size:19px}.waste-field .waste-delete-button:hover{background:#ffe0e5}@media(max-width:400px){.waste-field{grid-template-columns:minmax(0,1fr) 28px 75px 18px;gap:5px}} .waste-field{grid-template-columns:minmax(0,1fr) 30px 30px 105px 22px}.waste-field .waste-edit-button{width:28px;min-height:28px;height:28px;padding:0;border-radius:7px;border-color:#b9dfe5;color:#157c8a;background:#ecf8fa;box-shadow:none;font-size:18px}.waste-field .waste-edit-button:hover{background:#daf0f4}@media(max-width:400px){.waste-field{grid-template-columns:minmax(0,1fr) 28px 28px 70px 18px;gap:4px}} .waste-heading-icon{display:inline-block;width:22px;height:22px;margin-left:6px;vertical-align:middle;flex-shrink:0} .waste-code{white-space:nowrap} @media(max-width:700px){.waste-field{grid-template-columns:minmax(0,1fr) 25px 25px 62px 16px;gap:4px;font-size:11px}.waste-field input{padding:7px 5px;font-size:12px}.waste-field .waste-edit-button,.waste-field .waste-delete-button{width:24px;min-height:28px;height:28px}.waste-field .waste-unit{font-size:10px}} @media(max-width:360px){.waste-field{grid-template-columns:minmax(0,1fr) 24px 24px 52px 14px;gap:3px}.waste-group{padding:9px}} /* Keep navigation labels on a single row with their icons. */ body aside .nav{white-space:nowrap;gap:7px;padding-left:9px;padding-right:7px;min-width:0;font-size:12px} body aside .nav>span{white-space:nowrap;min-width:0} body aside .nav .button-icon{width:18px;height:18px;flex:0 0 18px} @media(max-width:700px){body aside .nav{font-size:11px;gap:6px}} .waste-field .waste-recipient-field{grid-column:1/-1;display:grid;grid-template-columns:105px minmax(0,1fr);align-items:center;gap:8px;margin:3px 0 0;font-size:11px;color:#60768a}.waste-field .waste-recipient-field input{width:100%;min-width:0;min-height:34px;font-size:12px;padding:6px 9px}.waste-recipient-summary{display:block;margin-top:4px;color:#60768a;font-size:11px;white-space:normal;overflow-wrap:anywhere}@media(max-width:400px){.waste-field .waste-recipient-field{grid-template-columns:94px minmax(0,1fr);gap:5px;font-size:10px}} /* Keep each waste amount and destination on the same row. */ .waste-field{grid-template-columns:minmax(120px,1fr) 28px 28px 70px 18px minmax(145px,1.1fr);gap:5px} .waste-field .waste-recipient-field{grid-column:6;grid-row:1;display:flex;align-items:center;gap:5px;margin:0;min-width:0} .waste-field .waste-recipient-field>span{display:none} .waste-field .waste-recipient-field input{min-width:0;min-height:38px;width:100%} @media(max-width:1150px){.waste-groups{grid-template-columns:minmax(0,1fr)}} @media(max-width:700px){.waste-group{overflow-x:auto}.waste-field{grid-template-columns:minmax(115px,1fr) 24px 24px 56px 16px minmax(135px,1fr);min-width:405px;gap:4px}.waste-field .waste-recipient-field{grid-template-columns:none;font-size:10px}.waste-field .waste-recipient-field input{font-size:12px;padding:6px}} .firm-account-actions{min-width:0}.firm-account-actions>.form-card:last-child{margin-bottom:0} /* Balance company creation against the two account-management cards. */ #firms>.entry-layout{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:16px} #firms>.entry-layout>.form-card{margin-bottom:0;min-width:0} #firms .firm-account-actions{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px} #firms .firm-account-actions>.form-card{margin:0;padding:18px} #firms .firm-account-actions h2{margin:0 0 12px} #firms .firm-account-actions form{gap:10px} #firms .firm-delete-card .muted{margin:0 0 10px;font-size:12px;line-height:1.4} #reset-password-result:empty{display:none} @media(max-width:1100px){#firms>.entry-layout{grid-template-columns:minmax(0,1fr)}#firms .firm-account-actions{grid-template-rows:auto auto}} #firm-form legend{display:flex;align-items:center;flex-wrap:wrap;gap:10px} #meter-settings-dialog{width:480px;max-width:calc(100vw - 24px);padding:20px;border:1px solid #cbdfe7;border-radius:16px}#meter-settings-dialog::backdrop{background:#102f4655}.meter-settings-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.meter-settings-controls #meter-count{width:65px;min-width:0;padding:7px}.meter-settings-controls #name-meters{font-size:12px;padding:8px 12px;min-height:36px} .water-resource-controls{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;max-width:100%}.water-resource-controls #open-meter-settings{flex-shrink:0;white-space:nowrap} .meter-settings-controls #management-meter-count{width:65px;min-width:0;padding:7px}.meter-settings-controls #management-name-meters{font-size:12px;padding:8px 12px;min-height:36px} .waste-type-choice{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 12px}.waste-type-choice>label{display:flex;flex-direction:row;align-items:center;gap:7px;padding:8px 10px;border:1px solid #d6e5ec;border-radius:9px;font-size:13px;cursor:pointer}.waste-type-choice input[type=radio]{width:17px;height:17px;min-height:0;margin:0;padding:0;accent-color:#118b94}.waste-type-choice>label:has(input:checked){background:#e8f8f7;border-color:#5cb7bc} /* Match the adjacent consumption choices without a checkbox. */ body #open-meter-settings{border-radius:9px;min-height:38px;padding:8px 11px;font-size:13px;gap:7px;font-weight:550;background:#eaf8f9;color:#195468;border:1px solid #67b8bd;box-shadow:none}body #open-meter-settings:hover{background:#daf2f4;border-color:#399da6;transform:none;box-shadow:none}body #open-meter-settings::before{display:none}#open-meter-settings .button-icon{width:18px;height:18px} /* The year dropdown needs no second surrounding box. */ body label.period-choice:has(> #year){padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;gap:0} /* Match year selectors to the company selector. */ body #year{border-radius:14px 5px 14px 5px;background:linear-gradient(115deg,#e8f6f6,#fbffff 48%,#dceeee);color:#195468;border:1px solid #b1d7dc;min-height:46px;font-size:14px;font-weight:500;box-shadow:0 6px 18px #008d8620,inset 0 1px 0 #c0ffef66}body #year:hover{border-color:#61cfc7;box-shadow:0 10px 25px #008d8633,inset 0 1px 0 #e0fffaa3}body #year:focus-visible{outline:3px solid #50bcb5;outline-offset:3px} /* Company and year use the same dropdown component and dimensions. */ body .year-search-wrap{width:240px;max-width:100%;flex-shrink:1}body .filters>label:first-child>.firm-search-wrap{width:240px;max-width:100%}body .year-search-wrap .firm-search-trigger{min-height:46px;padding:12px 18px}body label.period-choice:has(> #year){min-width:0} @media(max-width:700px){body .year-search-wrap{width:140px}body .filters>label:first-child>.firm-search-wrap{width:140px}body main.overview-layout .filters>label:first-child,body main.overview-layout .filters>label.period-choice{flex:1 1 0;min-width:0}body main.overview-layout .filters>label>.firm-search-wrap{width:100%}} body label.period-choice:has(> select[id$="month"]){padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;gap:0} /* Keep year and month dropdowns equal and side by side at every screen size. */ body .period-selection-row{display:flex;flex-wrap:nowrap;gap:8px;width:100%;max-width:488px;min-width:0}body .period-selection-row>label.period-choice{flex:1 1 0;min-width:0}body .period-selection-row>label>.year-search-wrap{width:100%;min-width:0;max-width:100%}body .period-selection-row .firm-search-trigger{width:100%;min-height:46px}body .water-reading-heading>.water-period-selection{flex:0 1 488px;min-width:0} @media(max-width:700px){body .water-reading-heading>.water-period-selection{flex:1 1 100%;width:100%;max-width:488px}} .account-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}.account-filter input{width:min(440px,100%);min-width:0;font-size:16px;border-radius:14px 5px 14px 5px}.account-filter span{color:#59758c;font-size:13px}.account-filter-empty td{text-align:center;padding:20px} /* Align index and date controls, including rows with an override note. */ #meter-reading-fields .reading-pair{align-items:start}#meter-reading-fields .reading-index-label,#meter-reading-fields .reading-date-label{grid-template-rows:34px;align-items:center;margin:0}#meter-reading-fields .reading-index-label{grid-template-columns:52px minmax(0,1fr)}#meter-reading-fields .reading-date-label{grid-template-columns:84px minmax(0,1fr)}#meter-reading-fields .index-caption,#meter-reading-fields .date-caption{grid-row:1}#meter-reading-fields .reading-index-label>input,#meter-reading-fields .opening-edit,#meter-reading-fields .reading-date-label>input{grid-row:1;align-self:center}#meter-reading-fields .reading-index-label>input,#meter-reading-fields .opening-edit input,#meter-reading-fields .reading-date-label>input{height:34px;min-height:34px;box-sizing:border-box;margin:0}#meter-reading-fields .opening-edit{align-items:center;height:34px}#meter-reading-fields .meter-override-note{grid-row:2;grid-column:1/-1} /* GES share: explanation on the left and percentage on the right. */ .ges-share-card{display:grid;grid-template-columns:minmax(0,1fr) max-content;grid-template-rows:auto auto;column-gap:18px;row-gap:5px;align-items:center}.ges-share-card>span{grid-column:1;grid-row:1}.ges-share-card>small{grid-column:1;grid-row:2;line-height:1.4}.ges-share-card>strong{grid-column:2;grid-row:1 / 3;align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;padding-left:18px;border-left:1px solid #8dbeb5;white-space:nowrap} @media(max-width:500px){.ges-share-card{column-gap:12px;padding:12px;font-size:12px}.ges-share-card>strong{padding-left:12px;font-size:22px}} /* Stable waste category badges with the icon before the title. */ .waste-group legend{padding:0;max-width:100%}.waste-heading-box{display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;min-height:40px;padding:9px 13px;border:1px solid #a9d6c6;border-radius:12px;background:#edf8f2;white-space:nowrap;line-height:1.2}.waste-heading-box .waste-heading-icon{width:21px;height:21px;margin:0;flex:0 0 21px}.waste-hazardous .waste-heading-box{border-color:#e3baab;background:#fff1eb}.waste-heading-box>span{display:block} /* Stack waste code above its name to keep the entry rows compact. */ .waste-caption{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;line-height:1.25}.waste-caption .waste-code{font-weight:650;font-size:12px;color:#315a6b}.waste-caption .waste-name{font-size:11px;overflow-wrap:anywhere}.waste-field{grid-template-columns:minmax(95px,.8fr) 28px 28px 70px 18px minmax(145px,1.2fr)} @media(max-width:700px){.waste-field{grid-template-columns:minmax(90px,.8fr) 24px 24px 56px 16px minmax(125px,1fr);min-width:365px}.waste-caption .waste-code{font-size:11px}.waste-caption .waste-name{font-size:10px}} /* One consistent modern heading style across all sections. */ body main header #page-title{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:20px;line-height:1.3;letter-spacing:0}body #page-title .page-section-title{display:inline-flex;align-items:center;min-height:40px;padding:8px 13px;border:1px solid #b8dfe1;border-left:3px solid #139da8;border-radius:12px 5px 12px 5px;background:linear-gradient(115deg,#eaf7f7,#f9fcfd);color:#14566a;font-size:20px;font-weight:650;line-height:1.2;letter-spacing:-.2px}body #page-title .heading-firm{font-size:20px;line-height:1.3;font-weight:550;color:#59778b} @media(max-width:700px){body main header #page-title{font-size:17px;gap:8px}body #page-title .page-section-title,body #page-title .heading-firm{font-size:17px}body #page-title .page-section-title{min-height:36px;padding:7px 10px}} body #page-title .page-section-title{gap:9px;flex-wrap:wrap;max-width:100%}body #page-title .page-section-title .heading-firm{font-size:inherit;font-weight:550;min-width:0;overflow-wrap:anywhere} /* Give the section/company heading its own distinct violet palette. */ body #page-title .page-section-title{background:linear-gradient(115deg,#eef8df,#e7f9fc);border-color:#a9d8b4;border-left-color:#89c928;color:#07869b;box-shadow:0 3px 12px #169c8c12}body #page-title .page-section-title .heading-firm{color:#538a20} body #report-issue.issue-icon-only{width:46px;height:46px;min-height:46px;padding:12px;flex-shrink:0}body .issue-item .issue-delete{font-size:12px;min-height:34px;padding:7px 11px;color:#a43e56;border-color:#e5b7c1;background:#fff1f3;justify-self:end} /* Right-align the page actions on mobile, including wrapped header rows. */ @media(max-width:700px){body main>header>.header-actions{margin-left:auto;justify-content:flex-end;flex-wrap:nowrap;gap:8px;max-width:100%}body main>header>.header-actions>button{flex-shrink:0}body main>header>.header-actions #export{white-space:nowrap}} /* Mobile header: title on the left, compact actions on the right. */ @media(max-width:700px){body main>header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:8px}body main>header>div:first-child,body main.overview-layout>header>div:first-child{flex:1 1 auto;width:auto;min-width:0}body main>header>.header-actions{flex:0 0 auto;margin-left:auto;gap:6px}body main>header #export>span{display:none}body main>header #export,body main>header #report-issue{width:40px;height:40px;min-height:40px;padding:9px}body main>header #report-issue-label{display:none}body main>header #page-title{gap:0}body main>header #page-title .page-section-title{font-size:15px;padding:7px 9px;gap:4px 7px}body main>header #page-title .heading-firm{font-size:15px}} /* Consistent contact icons and baselines on desktop and mobile. */ body .sidebar-contact a{display:flex;align-items:center;line-height:1.3;gap:8px}body .sidebar-contact svg.contact-icon{display:block;width:18px;height:18px;flex:0 0 18px;color:#72ccd1;align-self:center} @media(max-width:700px){body #workspace aside .sidebar-contact{align-items:center}body #workspace aside .sidebar-contact a{align-items:center;gap:4px;line-height:1.3}body #workspace aside .sidebar-contact svg.contact-icon{width:13px;height:13px;flex:0 0 13px}} /* Red globe and envelope icons in the login contact signature. */ .auth-card .auth-contact a:has(.auth-contact-icon)::before{display:none}.auth-card .auth-contact-icon{display:grid;place-items:center;box-sizing:border-box;width:22px;height:22px;flex:0 0 22px;border-radius:8px 3px 8px 3px;border:1px solid #ed696c66;background:#d8323820;color:#ff575d}.auth-card .auth-contact-icon svg{display:block;width:16px;height:16px} /* Show the company separately from the section heading, without parentheses. */ body #page-title>.heading-firm{display:inline-flex;align-items:center;min-height:40px;padding:8px 13px;border:1px solid #c5dda7;border-radius:12px 5px 12px 5px;background:#f2f9e9;color:#538a20;font-size:20px;font-weight:550;line-height:1.2;max-width:100%;overflow-wrap:anywhere} @media(max-width:700px){body #page-title>.heading-firm{min-height:36px;padding:7px 9px;font-size:15px}body main>header #page-title{gap:6px}} /* Account identity above the sidebar logout action. */ .sidebar-identity{display:flex;align-items:center;gap:9px;min-width:0;padding:10px 12px;border:1px solid #80cec52b;border-left:3px solid #8aca38;border-radius:12px 5px 12px 5px;background:linear-gradient(115deg,#66c7bd17,#ffffff06);box-shadow:inset 0 1px 0 #ffffff09}.sidebar-identity>svg{display:block;width:21px;height:21px;flex:0 0 21px;color:#8fdcca}.sidebar-identity #identity{padding:0;font-size:13px;font-weight:650;color:#e2f8f0;letter-spacing:.15px;overflow-wrap:anywhere;line-height:1.35} @media(max-width:700px){.sidebar-identity{max-width:100%;padding:9px 11px}.sidebar-identity #identity{font-size:12px}} /* Wider standalone section titles without a company badge. */ body #page-title .page-section-title{padding-left:22px;padding-right:22px;min-width:240px} @media(max-width:700px){body main>header #page-title .page-section-title{width:100%;min-width:0;padding-left:15px;padding-right:15px}} /* Fill the available header width while keeping actions on the right. */ body main>header{display:flex;align-items:center;gap:10px}body main>header>div:first-child{flex:1 1 auto;min-width:0;width:auto}body main>header #page-title{width:100%;min-width:0}body main>header #page-title .page-section-title{width:100%;min-width:0;box-sizing:border-box}body main>header>.header-actions{flex:0 0 auto;margin-left:auto} .catalog-delete-section{margin-top:22px;padding-top:18px;border-top:1px solid #d9e6ec}.catalog-delete-section h2{margin-bottom:12px}#catalog-delete{display:flex;align-items:flex-end;gap:10px;flex-wrap:nowrap}#catalog-delete>label{flex:1;min-width:0}#catalog-delete select{width:100%}#catalog-delete>button{flex:0 0 auto;min-height:46px} #catalog-delete-dialog{width:460px;max-width:calc(100vw - 28px);border:1px solid #d7e5ec;border-radius:18px;padding:22px;box-shadow:0 24px 70px #123b5133}#catalog-delete-dialog::backdrop{background:#102f4666}#catalog-delete-feedback{color:#a43e56}#catalog-delete-feedback:empty{display:none} /* Give monthly amount inputs more room within their existing cards. */ #record-form .field-grid label{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}#record-form .field-grid input{padding-left:8px;padding-right:8px} @media(max-width:420px){#record-form .field-grid label{grid-template-columns:100px minmax(0,1fr)}} /* New-company field captions sit beside their inputs. */ #firm-form>label.firm-inline-field{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:10px}#firm-form>label.firm-inline-field input{width:100%;min-width:0}#firm-form>label.firm-inline-field>span{line-height:1.3} @media(max-width:500px){#firm-form>label.firm-inline-field{grid-template-columns:90px minmax(0,1fr);gap:8px;font-size:12px}} /* Compact new-company card with closer fields and resource choices. */ #firms>.entry-layout>.form-card:first-child{padding:18px}#firms>.entry-layout>.form-card:first-child>h2{margin:0 0 10px}#firms>.entry-layout>.form-card:first-child>.muted{margin:0 0 12px;font-size:12px;line-height:1.45}#firm-form{gap:12px}#firm-form fieldset{padding:12px;margin-bottom:2px}#firm-form .resource-options{gap:8px}#firm-form .resource-choice{padding:7px 9px;min-height:36px;font-size:12px}#firm-form>label.firm-inline-field input{min-height:40px;padding:9px 12px}#firm-form>button[type=submit]{min-height:44px;padding:10px 14px} /* Password renewal action sits to the left of the new password field. */ .reset-password-row{display:flex;align-items:flex-end;gap:10px;min-width:0}.reset-password-row>button{flex:0 0 auto;min-height:46px}.reset-password-row>label{flex:1 1 auto;min-width:0}.reset-password-row input{width:100%;min-height:46px} @media(max-width:500px){.reset-password-row{gap:7px}.reset-password-row>button{padding:9px;font-size:12px;gap:5px}.reset-password-row>button .button-icon{width:17px;height:17px}} .firm-delete-heading-note{font-size:12px;font-weight:400;color:#6a7f8e;letter-spacing:0;line-height:1.4} /* Keep the new password caption on the left of its input. */ .reset-password-row>label.reset-password-field{display:grid;grid-template-columns:85px minmax(0,1fr);align-items:center;gap:10px}.reset-password-field>span{white-space:nowrap;line-height:1.3} @media(max-width:500px){.reset-password-row>label.reset-password-field{grid-template-columns:70px minmax(0,1fr);gap:7px;font-size:12px}} .reset-firm-selection{display:flex;align-items:center;gap:8px;min-width:0}.reset-firm-selection>label{flex:1;min-width:0}.reset-firm-selection>button{width:46px;height:46px;padding:11px;flex:0 0 46px}#firm-name-dialog{width:440px;max-width:calc(100vw - 28px);border:1px solid #d7e5ec;border-radius:18px;padding:22px}#firm-name-dialog::backdrop{background:#102f4666}#firm-name-feedback{color:#a43e56}#firm-name-feedback:empty{display:none} /* Larger, readable water indexes and complete reading dates. */ #meter-reading-fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,450px),1fr));gap:14px} #meter-reading-fields fieldset{padding:14px 12px} #meter-reading-fields legend{font-size:15px;font-weight:600} #meter-reading-fields .reading-pair{grid-template-columns:minmax(155px,1fr) minmax(245px,1.4fr);gap:12px;margin-bottom:12px} #meter-reading-fields .reading-index-label{grid-template-columns:64px minmax(0,1fr);gap:7px;grid-template-rows:42px} #meter-reading-fields .reading-date-label{grid-template-columns:100px minmax(0,1fr);gap:7px;grid-template-rows:42px} #meter-reading-fields .index-caption,#meter-reading-fields .date-caption{font-size:12px;line-height:1.3} #meter-reading-fields .date-caption svg{width:14px;height:14px} #meter-reading-fields .reading-index-label>input,#meter-reading-fields .opening-edit input{width:90px;max-width:100%;height:42px;min-height:42px;padding:9px 7px;font-size:14px} #meter-reading-fields .opening-edit{height:42px;gap:5px} #meter-reading-fields .opening-edit input{flex:0 1 90px} #meter-reading-fields .opening-edit button{height:38px;min-height:38px;width:28px;min-width:28px} #meter-reading-fields .reading-date-label>input{width:145px;max-width:100%;height:42px;min-height:42px;padding:8px 5px;font-size:13px} #meter-reading-fields fieldset>.muted{font-size:12px;margin-top:6px} @media(max-width:600px){#meter-reading-fields .reading-pair{grid-template-columns:minmax(0,1fr);gap:8px}#meter-reading-fields .reading-index-label,#meter-reading-fields .reading-date-label{grid-template-columns:120px minmax(0,1fr)}#meter-reading-fields .reading-index-label>input,#meter-reading-fields .opening-edit input{width:110px;font-size:16px}#meter-reading-fields .opening-edit input{flex-basis:110px}#meter-reading-fields .reading-date-label>input{width:165px;font-size:16px}#meter-reading-fields .index-caption,#meter-reading-fields .date-caption{font-size:13px}} /* Four water-meter cards across desktop, with readable controls inside each card. */ #meter-reading-fields{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} #meter-reading-fields fieldset{min-width:0;padding:12px 10px} #meter-reading-fields .reading-pair{grid-template-columns:minmax(0,1fr);gap:7px;margin-bottom:12px} #meter-reading-fields .reading-index-label,#meter-reading-fields .reading-date-label{grid-template-columns:112px minmax(0,1fr);gap:7px} #meter-reading-fields .reading-index-label>input,#meter-reading-fields .opening-edit input{width:100px;max-width:100%;font-size:14px} #meter-reading-fields .opening-edit input{flex:0 1 100px} #meter-reading-fields .reading-date-label>input{width:145px;max-width:100%;font-size:13px} @media(max-width:1250px){#meter-reading-fields{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:1050px){#meter-reading-fields{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){#meter-reading-fields{grid-template-columns:minmax(0,1fr)}#meter-reading-fields .reading-index-label>input,#meter-reading-fields .opening-edit input{font-size:16px}#meter-reading-fields .reading-date-label>input{width:165px;font-size:16px}} @media(max-width:700px){body #workspace aside .aside-bottom .sidebar-identity{flex:1 1 100%;width:100%;order:1}body #workspace aside .aside-bottom .sidebar-identity #identity{display:block}body #workspace aside .aside-bottom #logout{order:2}body #workspace aside .aside-bottom .sidebar-contact{order:0}} /* Mobile account name and logout share one row. */ @media(max-width:700px){body #workspace aside .aside-bottom .sidebar-identity{flex:1 1 0;width:auto;min-width:0;order:1}body #workspace aside .aside-bottom #logout{flex:0 0 auto;width:auto;margin-left:auto;order:2;white-space:nowrap}body #workspace aside .aside-bottom .sidebar-contact{flex:1 1 100%;width:100%;order:0}} /* Compact consumption choices: two text lines and a single choice row. */ #firm-resource-options{flex-wrap:nowrap;gap:6px;overflow-x:auto;padding-bottom:4px;align-items:stretch}#firm-resource-options>.resource-choice{flex:1 0 120px;min-width:120px;padding:7px 8px;gap:6px;font-size:11px}#firm-resource-options .resource-choice-caption{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.25}#firm-resource-options .resource-choice-name{white-space:nowrap}#firm-resource-options .resource-choice-caption small{display:block;font-size:10px;font-weight:400}#firm-resource-options>.selection-hint{display:none}#firm-resource-options>.selection-hint.selection-error{display:block;flex:0 0 220px;align-self:center} /* Responsive consumption choices wrap naturally instead of requiring a single row. */ #firm-resource-options{flex-wrap:wrap;overflow-x:visible;gap:8px;padding-bottom:0}#firm-resource-options>.resource-choice{flex:1 1 145px;min-width:0;max-width:100%}#firm-resource-options .resource-choice-name{white-space:normal;overflow-wrap:anywhere}#firm-resource-options>.selection-hint{display:block;flex:1 1 100%;min-width:0}#firm-resource-options>.selection-hint.selection-error{flex:1 1 100%}.compact-selection .resource-section-heading{white-space:normal;overflow-wrap:anywhere}.compact-selection .resource-section-heading>span{white-space:normal} @media(max-width:500px){#firm-resource-options>.resource-choice{flex-basis:125px;font-size:12px}} .waste-caption{position:relative;padding-left:24px;min-height:32px;justify-content:center}.waste-caption .waste-drag-handle{position:absolute;left:0;top:50%;transform:translateY(-50%);width:22px;min-height:32px;height:32px;padding:0;border:0;background:transparent;color:#658f99;box-shadow:none;cursor:grab;touch-action:none;user-select:none}.waste-drag-handle:active{cursor:grabbing}.waste-field.waste-dragging{background:#dff5f5;outline:1px dashed #168d99;border-radius:6px} .waste-field.waste-dragging{opacity:.35;overflow-anchor:none}.waste-drag-ghost{position:fixed!important;z-index:10000;pointer-events:none!important;opacity:.95;background:#e7f8f7;border:1px solid #168d99;border-radius:8px;box-shadow:0 8px 24px #123d4933;margin:0!important;min-width:0!important;box-sizing:border-box;transform:none}.waste-is-dragging,.waste-is-dragging *{cursor:grabbing!important;user-select:none!important}.waste-is-dragging #waste-form{overflow-anchor:none}.waste-caption .waste-drag-handle{width:26px;min-height:40px;height:40px}.waste-caption{padding-left:28px} #waste .section-top>.period-selection-row{max-width:none;flex:1;flex-wrap:wrap}#waste .period-selection-row>.period-choice{flex:0 1 240px}#waste-receipt-download{flex:0 0 auto;min-height:46px;white-space:nowrap;align-self:center} @media(max-width:700px){#waste .period-selection-row>.period-choice{flex:1 1 115px}#waste-receipt-download{font-size:12px;padding:9px 12px;min-height:42px}} #firm-missing-entries{flex:1 1 420px;min-width:0;border-left:3px solid #dc942f;padding:8px 12px;color:#84541d;background:#fff8e9;border-radius:6px;font-size:12px;line-height:1.6}#firm-missing-entries>strong{display:block;font-size:13px;margin-bottom:3px}#firm-missing-entries p{margin:2px 0;overflow-wrap:anywhere}@media(max-width:700px){#firm-missing-entries{flex-basis:100%;font-size:11px;padding:8px 10px}} main>#firm-missing-entries{margin:0 0 16px;width:100%;box-sizing:border-box} /* Keep section title and actions in row one, independently of the year selector. */ body main>header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px} body main>header>div:first-child,body main.overview-layout>header>div:first-child{display:contents} body main>header #page-title{grid-column:1;grid-row:1;align-self:center;margin:0} body main>header>.header-actions{grid-column:2;grid-row:1;align-self:center;margin:0;display:flex;align-items:center} body main>header .header-year-selector{grid-column:1/-1;grid-row:2;justify-self:start;width:240px;max-width:100%;margin:0} @media(max-width:700px){body main>header{grid-template-columns:minmax(0,1fr) auto;gap:8px}body main>header .header-year-selector{width:140px}} /* Portal tarihleri: filtrelerden önce, iki satırlık bağımsız kart şeridi. */ .portal-firm-cards{margin:0 0 14px;padding:0;background:transparent;border:0} .portal-firm-cards:empty,.portal-firm-cards[hidden]{display:none} .ekopa-loading{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#102e4240;backdrop-filter:blur(2px);pointer-events:none} .ekopa-loading[hidden]{display:none} .ekopa-loading-mark{width:112px;height:112px;padding:16px;box-sizing:border-box;border:1px solid #70d6df80;border-radius:24px 8px 24px 8px;background:#f8fffff5;box-shadow:0 12px 45px #002e4850} .ekopa-loading-mark svg{display:block;width:100%;height:100%} .ekopa-loading-line{animation:ekopa-line-pulse 1.35s ease-in-out infinite;opacity:.12} .ekopa-loading-line:nth-child(2){animation-delay:.2s}.ekopa-loading-line:nth-child(3){animation-delay:.4s} @keyframes ekopa-line-pulse{0%,70%,100%{opacity:.12}25%,45%{opacity:1}} @media(prefers-reduced-motion:reduce){.ekopa-loading-line{animation:none;opacity:1}.ekopa-loading{backdrop-filter:none}} body main>header.has-portal-cards #portal-firm-cards{grid-column:1/-1;grid-row:2;margin:0} body main>header.has-portal-cards .header-year-selector{grid-row:3} .portal-facility+.portal-facility{margin-top:10px}.portal-facility-label{font-size:13px;margin:0 0 8px;color:#195468} .portal-deadline-grid{display:flex;flex-wrap:wrap;gap:6px}.portal-deadline-grid>.portal-deadline{flex:1 1 120px} .portal-deadline{min-width:0;padding:9px 10px;border:1px solid #76c9d338;border-radius:18px 6px 18px 6px;background:linear-gradient(115deg,#214858cc,#193c4f 48%,#102d40);box-shadow:0 4px 12px #00172322,inset 0 1px 0 #c0ffef14;color:#d7eef2} .portal-deadline h3{font-size:11px;line-height:1.3;margin:0 0 5px;color:#b5dce5;overflow-wrap:anywhere} .portal-deadline-date{font-size:14px;font-weight:700;line-height:1.25;color:#f2fffc} .portal-deadline-days{display:inline-block;margin-top:5px;padding:2px 5px;border-radius:4px;font-size:10px;font-weight:700;background:#ffffff16;color:#b6f1e8} .portal-deadline-soon .portal-deadline-days{background:#d92d40;color:#fff}.portal-deadline-expired .portal-deadline-days{background:#ffebed;color:#b14351} .portal-deadline-empty .portal-deadline-date{font-size:12px;font-weight:500;color:#c0d7df} .portal-deadline-note,.portal-general-note p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.4;margin:6px 0 0;padding:5px 6px;background:#fff3c9;color:#76602c;border-radius:4px} .portal-general-note{background:linear-gradient(115deg,#075b69,#0d9097 48%,#086778);border-color:#79e8dd99}.portal-general-note h3{color:#d7fff7} .portal-general-note p{margin:0;padding:0;background:transparent;color:#f2fffc} .portal-info-message{font-size:12px;margin:0;color:#7d633d} @media(max-width:1000px){.portal-deadline{padding:7px}.portal-deadline-grid{gap:5px}.portal-deadline h3{font-size:10px}.portal-deadline-date{font-size:12px}} @media(max-width:650px){.portal-deadline-grid>.portal-deadline{flex:1 1 calc(50% - 6px);box-sizing:border-box}.portal-deadline{padding:9px}.portal-deadline h3{font-size:11px}.portal-deadline-date{font-size:14px}} .sidebar-contact[hidden]{display:none!important} /* Permit/status cards share the firm selector's light gradient and corner treatment. */ .portal-deadline{background:linear-gradient(115deg,#e8f6f6,#fbffff 48%,#dceeee);border:1px solid #b1d7dc;border-radius:14px 5px 14px 5px;box-shadow:0 6px 18px #008d8620,inset 0 1px 0 #c0ffef66;color:#195468} .portal-deadline h3{color:#195468} .portal-deadline-date{color:#164b56} .portal-deadline-empty .portal-deadline-date{color:#537785} .portal-deadline-days{background:#d4e9ec;color:#195468} .portal-general-note h3,.portal-general-note p{color:#195468} /* Missing-entry summary matches the firm selector and permit cards. */ #firm-missing-entries{background:linear-gradient(115deg,#e8f6f6,#fbffff 48%,#dceeee);border:1px solid #b1d7dc;border-radius:14px 5px 14px 5px;box-shadow:0 6px 18px #008d8620,inset 0 1px 0 #c0ffef66;color:#195468} #firm-missing-entries>strong,#firm-missing-entries b{color:#195468} /* Word document download uses a Word-blue gradient. */ body #waste-receipt-download{background:linear-gradient(115deg,#174a98 0%,#2b7cd3 48%,#185abd 100%);border-color:#79adeb;color:#fff;box-shadow:0 6px 18px #185abd26,inset 0 1px 0 #c8e2ff66} body #waste-receipt-download:hover{background:linear-gradient(115deg,#123e83 0%,#236cc0 48%,#144d9f 100%);border-color:#5a98df;color:#fff} /* Larger sidebar symbols: keep the drawing area visible inside its badge. */ body #workspace aside .nav{gap:8px} body #workspace aside .nav .button-icon{width:30px;height:30px;min-width:30px;flex:0 0 30px;padding:3px;border-radius:8px;color:#d5f4f8;background:#ffffff12;stroke-width:2;opacity:1} body #workspace aside .nav.active .button-icon{color:#fff;background:#ffffff24} body #workspace aside .nav:hover .button-icon{color:#fff;background:#ffffff20} /* Company dropdowns show ten rows where viewport space allows. */ body .firm-company-panel .firm-search-results{max-height:485px;grid-auto-rows:minmax(44px,auto);align-content:start;gap:5px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable} body .firm-company-panel .firm-search-option{min-height:44px;flex-shrink:0}