/* Customer history: readable on phones, tablets and larger owner/service screens. */
.customer-report-heading .button { display: inline-flex; align-items: center; gap: 8px; }
.customer-report-filters { display: grid; grid-template-columns: minmax(160px, .7fr) minmax(170px, .8fr) minmax(220px, 1.5fr) auto; align-items: end; gap: 16px; padding: 24px; }
.customer-report-filters label { display: block; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.6; }
.customer-report-filters input, .customer-report-filters select { min-height: 48px; font-size: 16px; }
.customer-report-filters .button { min-height: 48px; margin: 0; white-space: nowrap; }
.customer-report-custom { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 16px; max-width: 560px; }
.customer-report-range { font-size: 15px; font-weight: 600; margin: 22px 0 14px; line-height: 1.7; color: #194e3c; }
.customer-report-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.customer-metric { display: flex; flex-direction: column; gap: 8px; border: 1px solid #dce7d8; background: #fff; border-radius: 16px; padding: 21px; min-width: 0; text-align: left; }
.customer-metric > span { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #3e5d4f; line-height: 1.6; }
.customer-metric .ui-icon { width: 22px; height: 22px; flex: 0 0 22px; }
.customer-metric > strong { font-size: clamp(25px, 2.2vw, 34px); line-height: 1.5; font-weight: 700; letter-spacing: -.6px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: #183d30; }
.customer-metric em, .customer-member-numbers em { font-size: 13px; font-style: normal; font-weight: 500; letter-spacing: 0; }
.customer-metric > small { font-size: 13px; color: #65776d; line-height: 1.7; }
.customer-metric-energy { background: #194e3c; border-color: #194e3c; }
.customer-metric-energy > span, .customer-metric-energy > strong { color: #fff; }
.customer-metric-energy > small { color: #d6e4d5; }
.customer-metric-credit { background: #f2f6ed; }
.customer-report-note { font-size: 13px; color: #61736a; line-height: 1.8; margin: 15px 0 20px; }
.customer-report-status { min-height: 1.7em; font-size: 14px; line-height: 1.7; color: #61736a; margin: 18px 0; }
.customer-report-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.customer-member-card { appearance: none; display: flex; flex-direction: column; gap: 17px; padding: 22px; text-align: left; font: inherit; color: inherit; min-width: 0; width: 100%; border: 1px solid #dce7d8; cursor: pointer; transition: border-color .18s, box-shadow .18s; }
.customer-member-card:hover { border-color: #7c9f88; box-shadow: 0 6px 20px #163d310a; }
.customer-member-card:focus-visible, .customer-statement-tabs button:focus-visible { outline: 3px solid #8eaf6e; outline-offset: 3px; }
.customer-member-heading { display: flex; align-items: center; gap: 13px; min-width: 0; }
.customer-member-heading > .ui-icon { margin-left: auto; flex-shrink: 0; width: 20px; height: 20px; color: #7a8d80; }
.customer-member-avatar { display: grid; place-items: center; width: 45px; height: 45px; flex: 0 0 45px; border-radius: 14px; background: #edf3e7; color: #194e3c; }
.customer-member-avatar .ui-icon { width: 25px; height: 25px; }
.customer-member-name { min-width: 0; }
.customer-member-name b { display: block; font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.customer-member-name small { display: block; font-size: 14px; line-height: 1.7; color: #63776b; font-variant-numeric: tabular-nums; }
.customer-member-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-top: 1px solid #e7ede3; padding-top: 15px; }
.customer-member-numbers > span { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.customer-member-numbers small { color: #63776b; font-size: 12px; line-height: 1.6; }
.customer-member-numbers b { font-size: 17px; line-height: 1.6; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.customer-member-link { display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-size: 14px; font-weight: 600; color: #194e3c; }
.customer-member-link .ui-icon { width: 17px; height: 17px; }
.customer-member-missing { font-size: 13px; line-height: 1.7; color: #88621e; }
.customer-report-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 38px 20px; text-align: center; line-height: 1.7; background: #f6f8f3; border-radius: 14px; }
.customer-report-empty > .ui-icon { width: 35px; height: 35px; color: #8da38e; }
.customer-report-empty b { font-size: 17px; }
.customer-report-empty span { font-size: 14px; color: #66776c; }
.customer-statement { min-width: 0; max-width: 100%; }
.customer-statement-header { padding-right: 18px; margin-bottom: 20px; }
.customer-statement .customer-statement-header h2 { font-size: 25px; line-height: 1.6; margin: 9px 0 3px; overflow-wrap: anywhere; }
.customer-statement .customer-statement-header p { font-size: 15px; color: #5d7266; line-height: 1.7; margin: 4px 0; }
.customer-statement .customer-statement-period { font-size: 14px; }
.customer-statement .customer-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.customer-statement .customer-metric { padding: 17px 19px; }
.customer-statement .customer-metric > strong { font-size: 28px; }
.customer-statement .customer-report-note { margin: 14px 0 20px; font-size: 13px; }
.customer-balance-details { border: 1px solid #dce7d8; border-radius: 12px; padding: 15px 18px; margin-bottom: 22px; }
.customer-balance-details > summary, .customer-event-details > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: #385f49; min-height: 30px; line-height: 1.7; }
.customer-statement .customer-balance-details p { font-size: 13px; line-height: 1.8; margin: 12px 0; color: #5e7467; }
.customer-org-balance { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 12px; align-items: center; padding: 15px 0; border-top: 1px solid #e4eadf; }
.customer-org-balance > b { font-size: 15px; overflow-wrap: anywhere; }
.customer-org-balance > span { min-width: 0; }
.customer-org-balance small { display: block; color: #66786c; font-size: 12px; }
.customer-org-balance strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.customer-ledger-notes { display: grid; grid-template-columns: 1fr auto; gap: 8px 15px; border-top: 1px solid #e4eadf; padding-top: 15px; font-size: 13px; }
.customer-ledger-notes dt { color: #65796c; }
.customer-ledger-notes dd { margin: 0; font-variant-numeric: tabular-nums; }
.customer-statement-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
.customer-statement-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; border-radius: 12px; padding: 4px; background: #edf2e9; flex: 1 1 370px; }
.customer-statement-tabs button { appearance: none; border: 0; background: transparent; border-radius: 9px; min-height: 48px; padding: 9px 8px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; color: #5c7364; line-height: 1.5; }
.customer-statement-tabs button[aria-selected="true"] { background: #194e3c; color: #fff; box-shadow: 0 2px 6px #173e2d15; }
.customer-statement .customer-statement-toolbar .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; min-height: 48px; font-size: 14px; }
.customer-statement [aria-disabled="true"] { opacity: .5; pointer-events: none; cursor: default; }
.customer-event { border: 1px solid #dfe8da; border-radius: 14px; padding: 18px; background: #fff; margin-top: 12px; }
.customer-event-top { display: flex; align-items: flex-start; gap: 12px; }
.customer-event-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; background: #f1f5eb; color: #52774c; }
.customer-event-icon .ui-icon { width: 21px; height: 21px; }
.customer-event-cash { color: #286d51; background: #edf7ee; }
.customer-event-usage { color: #936514; background: #fcf5e4; }
.customer-event-heading { flex: 1; min-width: 0; }
.customer-event-heading b { display: block; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.customer-event-heading small { display: block; font-size: 12px; line-height: 1.7; color: #738174; }
.customer-event-amount { min-width: 100px; max-width: 45%; text-align: right; }
.customer-event-amount strong { display: block; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.5; overflow-wrap: anywhere; }
.customer-event-amount small { display: block; font-size: 12px; color: #6d7c70; line-height: 1.7; }
.customer-positive { color: #246848; }
.customer-negative { color: #9a5039; }
.customer-event-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; align-items: center; margin: 12px 0 4px 50px; font-size: 13px; line-height: 1.8; color: #667b6a; }
.customer-energy-value { background: #f2f6eb; border-radius: 6px; padding: 1px 7px; font-weight: 600; color: #476a3f; }
.customer-energy-unknown { color: #8a6b27; }
.customer-statement .customer-event-place { font-size: 13px; color: #63796a; margin: 7px 0 8px 50px; line-height: 1.8; overflow-wrap: anywhere; }
.customer-event-details { border-top: 1px solid #edf1e9; margin-top: 12px; padding-top: 10px; }
.customer-event-details > summary { font-size: 12px; min-height: 28px; color: #71816f; }
.customer-event-details dl { display: grid; grid-template-columns: minmax(75px, auto) 1fr; gap: 6px 12px; margin: 10px 0; font-size: 12px; line-height: 1.8; }
.customer-event-details dt { color: #71816f; }
.customer-event-details dd { margin: 0; overflow-wrap: anywhere; }
.customer-statement .customer-evidence { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-size: 13px; margin: 7px 0 0; }
.customer-statement-pages { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.customer-statement .customer-statement-pages .button { min-height: 48px; margin: 0; font-size: 14px; }
.customer-statement-pages > span { font-size: 14px; color: #607761; text-align: center; }
.customer-statement .customer-statement-limit { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: 13px; margin: 17px 0; color: #667c6c; }
.customer-statement-limit select { margin: 0; width: 132px; font-size: 14px; min-height: 44px; }
.customer-statement .customer-statement-footnote { color: #71806f; font-size: 12px; line-height: 1.8; margin: 15px 0; }
.customer-statement > .button.full { min-height: 48px; font-size: 15px; margin: 6px 0 0; }
.customer-statement [hidden], .customer-report-custom[hidden], #customer-report-org-field[hidden], .customer-report-metrics[hidden], .customer-report-note[hidden] { display: none !important; }
@media (max-width: 1190px) {
  .customer-report-filters { grid-template-columns: minmax(145px, 1fr) minmax(180px, 1fr); }
  .customer-report-search { grid-column: 1 / -1; }
  .customer-report-filters .button { justify-self: end; min-width: 160px; grid-column: 1 / -1; }
  .customer-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-member-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .customer-report-list { grid-template-columns: minmax(0, 1fr); }
  .customer-report-filters { padding: 20px; }
  .customer-metric { padding: 18px; }
  .customer-member-numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .customer-report-heading { gap: 14px; flex-wrap: wrap; }
  .customer-report-heading h1 { font-size: 26px; }
  .customer-report-heading .button { min-height: 46px; padding: 9px 12px; }
  .customer-report-filters { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; }
  .customer-report-filters .button { width: 100%; }
  .customer-report-custom { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .customer-report-metrics { gap: 10px; }
  .customer-metric { padding: 15px; gap: 7px; }
  .customer-metric > span { align-items: flex-start; gap: 6px; font-size: 13px; }
  .customer-metric .ui-icon { width: 18px; height: 18px; flex-basis: 18px; margin-top: 1px; }
  .customer-metric > strong { font-size: 25px; }
  .customer-metric > small { font-size: 12px; }
  .customer-member-card { padding: 19px; }
  .customer-member-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 17px; }
  .customer-member-numbers small { font-size: 13px; }
  .customer-member-numbers b { font-size: 19px; }
  .customer-statement .customer-statement-header h2 { font-size: 23px; }
  .customer-statement .customer-metric { padding: 13px; }
  .customer-statement .customer-metric > strong { font-size: 23px; }
  .customer-statement .customer-report-note { font-size: 12px; }
  .customer-balance-details { padding: 13px; }
  .customer-org-balance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customer-org-balance > b { grid-column: 1 / -1; }
  .customer-org-balance strong { font-size: 15px; }
  .customer-statement-tabs { flex-basis: 100%; }
  .customer-statement-tabs button { font-size: 14px; padding: 8px 5px; }
  .customer-statement .customer-statement-toolbar .button { width: 100%; }
  .customer-event { padding: 14px; }
  .customer-event-top { gap: 9px; flex-wrap: wrap; }
  .customer-event-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
  .customer-event-heading { flex: 1 1 calc(100% - 50px); }
  .customer-event-heading b { font-size: 15px; }
  .customer-event-amount { margin-left: 41px; text-align: left; max-width: calc(100% - 41px); }
  .customer-event-amount strong { font-size: 23px; }
  .customer-event-meta { margin-left: 41px; }
  .customer-statement .customer-event-place { margin-left: 41px; }
  .customer-statement-pages { gap: 7px; }
  .customer-statement .customer-statement-pages .button { font-size: 13px; padding: 10px 12px; }
  .customer-statement-pages > span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-member-card { transition: none; }
}
