/* Customer portal, modern look (scoped to body.portal). Loaded after portal.css. */
.portal { background: #f3f5f9; }
.portal .dk-side { background: radial-gradient(400px 300px at 0 0, rgba(31, 180, 120, .16), transparent 60%), linear-gradient(180deg, #0c1a2e, #0f2440); border-right: 0; }
.portal .dk-brand img { width: 30px; height: 30px; border-radius: 8px; }
.portal .dk-nav a { border-radius: 9px; transition: background .15s, color .15s; }
.portal .dk-nav a.on { background: linear-gradient(90deg, rgba(22, 119, 210, .38), rgba(22, 119, 210, .12)); color: #fff; box-shadow: inset 3px 0 0 #5fb0ff; }
.portal .dk-top { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); }
.portal .dk-card { border-radius: 14px; border-color: #e6eaf0; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -18px rgba(16, 24, 40, .25); }
.portal .dk-card .hd h3 { display: flex; align-items: center; gap: 7px; } .portal .dk-card .hd h3 i { color: var(--dk-pri2); font-size: 18px; }
.portal .dk-alert { border-radius: 12px; }
.dk-btn.ghost-w { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); } .dk-btn.ghost-w:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.p-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 24px 26px; margin-bottom: 14px; border-radius: 18px; color: #fff;
    background: radial-gradient(600px 260px at 100% 0, rgba(31, 180, 120, .45), transparent 60%), radial-gradient(500px 300px at 0 120%, rgba(95, 176, 255, .35), transparent 60%), linear-gradient(120deg, #0b4f9c, #0c3a74); }
.p-hero::after { content: ""; position: absolute; right: -40px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 40px solid rgba(255, 255, 255, .06); }
.p-hero .tx { flex: 1; min-width: 240px; position: relative; z-index: 1; } .p-hero .date { font-size: 12.5px; color: #bcd3f2; font-weight: 600; letter-spacing: .02em; }
.p-hero h1 { color: #fff; font-size: 26px; margin: 4px 0; letter-spacing: -.02em; } .p-hero p { margin: 0; color: #d6e4f7; }
.p-hero .acts { display: flex; gap: 8px; position: relative; z-index: 1; flex-wrap: wrap; } .p-hero .acts .dk-btn:not(.ghost-w) { background: #fff; color: var(--dk-pri); border-color: #fff; }

.p-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.p-kpi { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; padding: 14px; color: inherit; text-decoration: none; box-shadow: 0 8px 24px -20px rgba(16, 24, 40, .3); transition: transform .15s, box-shadow .15s; }
a.p-kpi:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(16, 24, 40, .45); text-decoration: none; }
.p-kpi .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: #eaf2fd; color: var(--dk-pri); flex: none; }
.p-kpi .ic.v { background: #f0eafd; color: #5b3cc4; } .p-kpi .ic.o { background: #fff2dc; color: #a35f00; }
.p-kpi.ok .ic { background: #e3f5ec; color: var(--dk-ok); } .p-kpi.warn .ic { background: #fff2dc; color: var(--dk-warn); }
.p-kpi small { display: block; color: var(--dk-muted); font-size: 12px; font-weight: 600; } .p-kpi b { display: block; font-size: 19px; letter-spacing: -.02em; color: var(--dk-ink); line-height: 1.25; } .p-kpi span { font-size: 12px; color: var(--dk-muted); }

.p-main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.p-col { display: grid; gap: 12px; } .p-col.side { position: sticky; top: 70px; }
.p-sec-h { display: flex; align-items: center; justify-content: space-between; } .p-sec-h h2 { font-size: 16px; margin: 0; } .p-sec-h a { font-size: 13px; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }

.p-co2 { background: #fff; border: 1px solid #e6eaf0; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px -24px rgba(16, 24, 40, .4); }
.p-co2 header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #eef1f5; }
.p-co2 .av { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; background: linear-gradient(140deg, #1677d2, #12805c); flex: none; }
.p-co2 .nm { flex: 1; min-width: 0; } .p-co2 .nm b { display: block; font-size: 15.5px; } .p-co2 .nm a { font-size: 12.5px; color: var(--dk-muted); } .p-co2 .nm a i { font-size: 12px; }
.p-co2 .meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-co2 .m { padding: 14px 18px; border-right: 1px solid #eef1f5; } .p-co2 .m:last-child { border-right: 0; }
.p-co2 .mh { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; } .p-co2 .mh span { color: var(--dk-muted); } .p-co2 .mh b { font-size: 13px; text-align: right; }
.p-co2 .bar { height: 6px; background: #eef1f5; border-radius: 3px; margin: 8px 0 5px; overflow: hidden; } .p-co2 .bar i { display: block; height: 100%; background: linear-gradient(90deg, #1677d2, #5fb0ff); border-radius: 3px; }
.p-co2 .bar i.warn { background: linear-gradient(90deg, #d98a1e, #f3b54a); } .p-co2 .bar i.ok { background: linear-gradient(90deg, #12805c, #3cc68f); }
.p-co2 .m small { font-size: 12px; color: var(--dk-muted); }
.p-co2 footer { display: flex; gap: 8px; padding: 12px 18px; background: #fafbfd; border-top: 1px solid #eef1f5; }
.setup { border-top: 1px solid #eef1f5; } .setup summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 18px; cursor: pointer; } .setup summary::-webkit-details-marker { display: none; }
.setup summary > span:nth-child(2) { flex: 1; } .setup summary b { display: block; font-size: 14px; } .setup summary small { color: var(--dk-muted); font-size: 12px; }
.setup summary > i { font-size: 20px; color: var(--dk-muted); transition: transform .2s; } .setup[open] summary > i { transform: rotate(180deg); }
.ring { --p: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#12805c calc(var(--p) * 1%), #e6eaf0 0); flex: none; }
.setup summary .ring b { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 11px; }
.setup ol { list-style: none; margin: 0; padding: 0 18px 14px; display: grid; gap: 4px; }
.setup li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; } .setup li:hover { background: #f7f9fc; }
.setup li > i, .chk li > i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c6cfdb; flex: none; display: grid; place-items: center; font-size: 15px; box-sizing: border-box; }
.setup li.ok > i, .chk li.ok > i { background: #12805c; border-color: #12805c; color: #fff; } .setup li.ok > i::before, .chk li.ok > i::before { content: "\ea41"; font-family: boxicons; }
.setup li span { flex: 1; } .setup li b { display: block; font-size: 13.5px; } .setup li small { color: var(--dk-muted); font-size: 12px; } .setup li.ok b { color: var(--dk-muted); text-decoration: line-through; text-decoration-color: #b5bfcc; }
.setup-ok { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid #eef1f5; color: var(--dk-ok); font-weight: 600; font-size: 13.5px; } .setup-ok i { font-size: 19px; }
.p-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 34px 20px; background: #fff; border: 1.5px dashed #cfd8e3; border-radius: 16px; color: var(--dk-muted); } .p-empty i { font-size: 36px; color: var(--dk-pri2); } .p-empty b { color: var(--dk-ink); font-size: 15px; }

.chk { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .chk li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; } .chk li a { margin-left: auto; font-weight: 600; font-size: 12.5px; } .chk li > i { width: 20px; height: 20px; font-size: 14px; } .chk li.ok { color: var(--dk-muted); }
.portal .p-acct { border-color: #f3dfb0; background: linear-gradient(180deg, #fffaf0, #fff); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: relative; } .feed::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: #eef1f5; }
.feed li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; position: relative; } .feed .fi { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid #e6eaf0; display: grid; place-items: center; color: var(--dk-pri2); font-size: 15px; flex: none; z-index: 1; box-sizing: border-box; }
.feed b { display: block; font-size: 13px; font-weight: 600; } .feed small { color: var(--dk-muted); font-size: 12px; }
.p-guides { display: grid; gap: 2px; } .p-guides a { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; color: var(--dk-ink2); font-size: 13.5px; } .p-guides a:hover { background: #f4f7fb; text-decoration: none; } .p-guides i { color: var(--dk-pri2); font-size: 18px; }
.p-subh { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; margin: 8px 0 -2px; padding-top: 12px; border-top: 1px solid #eef1f5; } .p-subh i { color: var(--dk-pri2); font-size: 18px; } .p-subh small { color: var(--dk-muted); font-weight: 500; font-size: 12px; }
.portal textarea { width: 100%; box-sizing: border-box; font: inherit; border: 1px solid var(--dk-line); border-radius: 8px; padding: 8px 10px; resize: vertical; }

@media (max-width: 1150px) { .p-main { grid-template-columns: 1fr; } .p-col.side { position: static; } }
@media (max-width: 900px) { .p-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p-co2 .meters { grid-template-columns: 1fr; } .p-co2 .m { border-right: 0; border-bottom: 1px solid #eef1f5; } }
@media (max-width: 520px) { .p-kpis { grid-template-columns: 1fr; } .p-hero { padding: 20px; } .p-hero h1 { font-size: 22px; } .p-co2 footer { flex-direction: column; } }

/* portal sign-in: photo panel beside the form */
.p-auth { grid-template-columns: minmax(0, 440px) minmax(0, 400px); justify-content: center; align-content: center; place-items: initial; gap: 0; }
.p-auth .box { width: auto; border-radius: 0 18px 18px 0; padding: 30px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.p-auth-side { position: relative; border-radius: 18px 0 0 18px; overflow: hidden; background: #0c1a2e; color: #fff; display: flex; flex-direction: column; box-shadow: var(--dk-shadow-lg); }
.p-auth-side img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.p-auth-side .tx { padding: 24px; background: linear-gradient(160deg, #0b4f9c, #0c1a2e); flex: 1; }
.p-auth-side h2 { color: #fff; font-size: 19px; margin: 0 0 12px; letter-spacing: -.01em; }
.p-auth-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .p-auth-side li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: #dbe6f5; } .p-auth-side li i { font-size: 19px; color: #5fd3a2; }
@media (max-width: 860px) { .p-auth { grid-template-columns: minmax(0, 420px); } .p-auth-side { display: none; } .p-auth .box { border-radius: 14px; } }
@media (max-width: 520px) { .p-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .p-kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; } .p-kpi .ic { width: 36px; height: 36px; font-size: 18px; } .p-kpi b { font-size: 16px; } }
/* calmer, in line with the website (site-calm.css): smaller hero and headings, one brand blue */
.p-hero { padding: 20px 24px !important; border-radius: 14px !important; }
.p-hero h1 { font-size: 21px !important; font-weight: 650 !important; letter-spacing: -.01em; margin: 2px 0 4px !important; }
.p-hero p, .p-hero .date { font-size: 13px !important; }
.p-hero .dk-btn { height: 32px; font-size: 13px; font-weight: 600; }
.p-kpis b { font-size: 17px !important; font-weight: 650 !important; }
.dk-content h2 { font-size: 15px !important; font-weight: 650 !important; }
.dk-content h1:not(.p-hero h1) { font-size: 20px !important; font-weight: 650 !important; }
.p-auth-side .tx h2 { font-size: 18px !important; font-weight: 650 !important; }
.dk-auth .box h1 { font-size: 18px !important; font-weight: 650 !important; }