/* ECO CONTROL v0.4 — restrained color, readable numerals, small contextual help. */
:root{--bg:#f4f6f8;--ink:#1e2d35;--muted:#657481;--line:#e2e8ec;--green:#187554;--green-dark:#10583e;--light:#e8f3ed;--sidebar:232px;--radius:12px;--shadow:0 12px 34px #1c333412}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;color:var(--ink)}
.tone-green{--tone:#187554;--tone-bg:#e5f3ea}.tone-blue{--tone:#386db0;--tone-bg:#eaf0fb}.tone-amber{--tone:#bc790e;--tone-bg:#fff1d7}.tone-teal{--tone:#187e88;--tone-bg:#e4f2f3}.tone-slate{--tone:#637181;--tone-bg:#ecf0f4}
.color-icon{display:inline-grid;place-items:center;flex-shrink:0;width:33px;height:33px;border-radius:10px;color:var(--tone);background:var(--tone-bg)}
.color-icon .icon{width:22px;height:22px;stroke-width:1.65}.duotone>path:first-child,.duotone>rect:first-child,.duotone>circle:first-child{fill:currentColor;fill-opacity:.17}
.sidebar{padding:28px 14px 19px;background:#fcfdfd;border-right:1px solid #e0e6e9}.brand{padding:0 11px 28px;gap:9px}.brand-word{font-size:14px;letter-spacing:1px;font-weight:780}.brand-mark{border:0;background:var(--green);color:#fff;border-radius:9px;width:32px;height:32px}.brand-mark .icon{width:20px;height:20px}
.nav-item{padding:9px 11px;gap:10px;font-size:12px;border-radius:9px;color:#4a5b67;min-height:50px;margin:2px 0}.nav-item .icon{width:21px;height:21px}.nav-item.active{background:#e9f0f5;color:#1e3449;font-weight:650;box-shadow:inset 3px 0 #386db0}.nav-item:hover{background:#f0f4f6}.nav-group{font-size:9px;color:#86939d;letter-spacing:1.4px;margin-top:20px;margin-bottom:8px}.sidebar-bottom{font-size:10px;color:#7b8993}
.topbar{height:68px;background:#fff;border-color:#e2e7eb}.workspace{padding-top:94px}.role .avatar{background:#eaf0f6;color:#365572}.logout-label{gap:6px;color:#667784;font-size:11px}.logout-label .icon{width:16px;height:16px}
.page-heading h1{font-size:25px;font-weight:680;letter-spacing:-.6px}.page-heading{margin-bottom:15px}.page-heading .heading-meta{margin-top:8px}.heading-meta .muted{color:#6c7c87}.demo-corner{background:#f6f8fa;border-color:#e3e9ed;color:#7c8a95}
.source-inline{display:flex;align-items:center;gap:7px;margin:0 0 16px;font-size:11px;color:#6f7e89}.source-inline>.icon{width:14px;height:14px}.source-inline .btn{font-size:10px;min-height:24px;padding:3px 7px;margin-left:1px}.source-inline .btn:hover{text-decoration:underline}
.metrics{gap:14px}.trend-card{padding:19px 19px 14px;border:1px solid #e1e7ec;border-radius:12px;background:#fff;box-shadow:0 2px 3px #19324002;min-width:0;position:relative;overflow:hidden}.trend-card::before{content:'';position:absolute;left:20px;top:0;width:27px;height:3px;border-radius:0 0 3px 3px;background:var(--tone)}
.trend-card .metric-top{display:flex;align-items:center;justify-content:space-between;color:#61717d;font-size:12px;margin:0 0 11px;gap:7px}.trend-card .color-icon{height:35px;width:35px;border-radius:11px}.trend-card .metric-value{font-size:29px;letter-spacing:-.9px;color:#1b2f3c;font-weight:680;line-height:1.2;white-space:nowrap}.trend-card .metric-value .unit{font-size:11px;font-weight:500;color:#7a8994;letter-spacing:0;margin-left:6px}.trend-meta{display:flex;align-items:center;gap:7px;min-height:28px;font-size:10px;color:#8a96a0}.trend-meta .delta{color:#526573;font-size:10px;font-weight:600;display:inline-flex;align-items:center;gap:2px}.delta .icon{width:12px;height:12px;transform:rotate(-40deg)}
.spark-wrap{position:relative;height:67px;margin:9px 0 7px}.spark-wrap>svg{width:100%;height:100%;overflow:visible}.spark-stroke{stroke:var(--tone);stroke-width:2.1;fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.spark-area{fill:var(--tone);opacity:.055;stroke:none}.spark-dot{fill:var(--tone);stroke:#fff;stroke-width:1.1}.spark-missing{fill:#d0d8df;stroke:none}.spark-baseline{stroke:#ecf0f4;stroke-width:.7;stroke-dasharray:2 3}.spark-hit{position:absolute;top:-2px;bottom:-3px;padding:0;border-radius:3px;background:transparent;min-width:0}.spark-hit:hover{background:#7e94a010}.spark-hit:focus-visible{outline:2px solid var(--tone);outline-offset:0}.spark-labels{display:flex;justify-content:space-between;gap:4px;font-size:9px;color:#8a98a3;text-transform:uppercase;letter-spacing:.3px}.spark-labels span:nth-child(2){text-transform:none;color:#a0abb4;font-size:9px}
.panel{border-color:#e1e7eb;border-radius:11px;box-shadow:none}.panel-head{padding:18px 22px}.panel-head h2{font-size:14px;font-weight:650}.report-table th{background:#f7f9fb;color:#72818d;font-size:10px;font-weight:600;border-bottom:1px solid #e0e7ec}.report-table td{font-size:12px;color:#314653;padding:13px 18px;border-bottom-color:#edf1f4}.report-table .vehicle-cell{font-size:12px;font-weight:630}.report-table .vehicle-cell small{font-size:9px;color:#8b99a3;font-weight:400;margin-top:5px}.report-table tfoot td{background:#eef4f3;border-top:1px solid #dbe6e3;color:#244d41;font-weight:650}.report-table tbody tr:hover td{background:#f5f8fa}.panel-note{color:#788692;font-size:10px}.badge{font-size:10px;border-radius:5px;padding:4px 7px}.badge.green{background:#eef5f0;color:#49745c}.badge.outline{color:#758590;background:#fff}.badge.red{color:var(--red)}
.manage{color:#8695a0;opacity:1!important;min-width:30px;min-height:30px;display:inline-grid;place-items:center;border-radius:7px}.manage .icon{width:14px;height:14px}.manage:hover{background:#eaf0fa;color:#3968a9}
.btn{border-radius:8px;font-size:12px;min-height:38px}.btn.primary{background:var(--green);border-color:var(--green);box-shadow:0 1px 2px #124a2112}.btn.primary:hover{background:var(--green-dark);border-color:var(--green-dark)}.btn.ghost:hover{background:#eef3f5}.field input,.field select,.date-trigger{border-color:#dbe3e8;border-radius:9px;color:#263e4e;background:#fcfdfe}.field input:focus,.field select:focus,.date-trigger:focus-visible{border-color:#5c9b83;box-shadow:0 0 0 3px #35875d0d}.field label,.field .label{color:#516575}.unit-input .unit{color:#85939f}.field .help{color:#84939e}.vehicle-banner{background:#eff6f1;border-color:#dfebe3;color:#35644c}.segmented{border-color:#dee6ea;background:#f5f8fa}.segmented label input:checked+span{background:#e6f1eb;border-color:#a9cbb9;color:#205e42}.field-header{border-color:#e5ebef}.field-content .section-intro h2{color:#253c4a}.field-footer{border-color:#e1e8ec}.field-view-bg{background:#f2f5f7}.demo-strip{background:#f2f5f7;color:#8b99a3;font-size:8px;letter-spacing:.85px}.field-header .title{letter-spacing:.75px}.embedded .phone-aside{color:#6b7f8e}.manual-badge{background:#e8f2fc;color:#426b9c}.manual-mode input{border-color:#a6bad4!important;background:#fbfdff!important}.return-to-list{color:#416d9b}
.field.is-error .date-trigger,.field.is-error .unit-input>input{border-color:#d46e65;background:#fff4f2}.field.is-warning .date-trigger{border-color:#d6a65a;background:#fffaf0}.field-message{font-size:11px}.field.is-error .field-message{color:#a6443b}
.eco-tooltip{position:fixed;z-index:450;width:max-content;max-width:250px;padding:10px 12px;background:#263d4b;color:#fff;border-radius:8px;box-shadow:0 5px 18px #18374724;font-size:11px;line-height:1.6;pointer-events:auto;text-align:left;font-weight:400}
.month-control{padding:0;border-radius:8px;background:#fff;min-height:38px}.month-control>button{display:flex;align-items:center;gap:9px;padding:9px 11px;font-size:12px;min-height:38px}.month-control>button>.icon{width:16px;height:16px;color:#6f838e}.month-control>button>.icon:last-child{width:12px;transform:rotate(90deg)}
.date-trigger{width:100%;min-height:46px;padding:12px 14px;border:1px solid #dbe3e8;display:flex;align-items:center;justify-content:space-between;font-size:14px;gap:8px;text-align:left;letter-spacing:.2px}.date-trigger .icon{width:18px;height:18px;color:#6e899b}.date-trigger[aria-invalid=true]{border-color:#d46e65;background:#fff4f2}
.eco-calendar{position:fixed;z-index:300;width:286px;padding:12px;background:#fff;border:1px solid #dfe7ec;border-radius:12px;box-shadow:0 12px 40px #1e3e4c26}.eco-calendar header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.eco-calendar header strong{font-size:13px;color:#2a4456}.eco-calendar header button{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;color:#738999}.eco-calendar header button:hover{background:#f0f4f7}.eco-calendar .icon{width:17px;height:17px}.date-week,.date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.date-week{font-size:10px;color:#8c9ba6;text-align:center;margin-bottom:5px}.date-week span{padding:5px 0}.date-grid button{height:33px;font-size:12px;border-radius:7px;color:#476071}.date-grid button:hover,.month-grid button:hover{background:#e9f2ed}.date-grid .today{box-shadow:inset 0 0 0 1px #73a18a}.date-grid .chosen,.month-grid .chosen{background:var(--green);color:white;font-weight:600}.date-grid button:disabled{opacity:.28;cursor:not-allowed}.eco-calendar footer{border-top:1px solid #e6edf1;display:flex;justify-content:space-between;margin-top:11px;padding-top:9px}.eco-calendar footer button{font-size:11px;color:#4f7b63;padding:7px 10px;border-radius:6px}.eco-calendar footer button:hover{background:#eef5f0}.month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.month-grid button{height:39px;border-radius:8px;font-size:12px;color:#456277}.eco-calendar button:focus-visible{outline:2px solid #518ca4;outline-offset:1px}
@media(min-width:1550px){.trend-card{padding:21px 23px 16px}.trend-card .metric-value{font-size:32px}.spark-wrap{height:75px}}
@media(max-width:1180px){:root{--sidebar:214px}.nav-item{font-size:11px;padding:9px;gap:8px}.brand-word{font-size:13px}.workspace{padding-left:22px;padding-right:22px}.trend-card{padding:16px 14px 13px}.trend-card .metric-value{font-size:24px}.trend-card .color-icon{width:29px;height:29px}.trend-card .metric-top{font-size:11px}.trend-meta{gap:4px;font-size:9px}}
@media(max-width:760px){.field-view-bg{background:white}.field-header .title{font-size:12px}.date-trigger,.field input,.field select{font-size:16px}.field-content{padding-bottom:130px}.login-brand{font-size:16px}.eco-tooltip{max-width:220px}.month-control>button{font-size:11px}.logout-label{min-width:35px}.brand-mark{width:29px;height:29px}.login-card .brand-mark{width:33px;height:33px}}

.metric-top .color-icon .icon{color:var(--tone);opacity:1}.nav-item.active{background:var(--tone-bg,#e9f0f5);box-shadow:inset 3px 0 var(--tone,#386db0);color:#244153}.metric-top .color-icon .duotone{stroke-width:1.85}.field-header .brand-mark .icon{color:white}