.card { min-width: 0; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.loading-screen { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--space-3); color: white; background: var(--primary-dark); transition: opacity .18s ease, visibility .18s ease; }
.loading-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-screen img { width: min(520px, 78vw); height: auto; max-height: 160px; object-fit: contain; }
.loading-screen span { color: #bfdbfe; font-size: 12px; }
.loading-screen.has-error span { max-width: 520px; color: #fecaca; font-size: 14px; text-align: center; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.section-title h2, .section-title h3 { margin: 0; }
.metric-card { min-height: 132px; display: grid; grid-template-rows: 1fr auto; align-content: space-between; }
.metric-card__top { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--muted); }
.metric-card__icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: var(--radius-md); }
.metric-card__value { margin-top: var(--space-4); font-size: 25px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.consumption-kpis .metric-card__value, .consumption-kpis .metric-card__label { overflow-wrap: anywhere; }
.metric-card__label { margin-top: var(--space-2); color: var(--muted); font-size: 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--success { color: #15803d; background: var(--success-soft); }
.badge--warning { color: #b45309; background: var(--warning-soft); }
.badge--danger { color: #b91c1c; background: var(--danger-soft); }
.badge--info { color: var(--info); background: var(--info-soft); }
.badge--neutral { color: #475569; background: #f1f5f9; }
.button { min-height: 40px; display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); padding: 0 15px; color: var(--primary); background: var(--surface); border: 1px solid #cbd5e1; border-radius: var(--radius-md); font-weight: 600; text-decoration: none; cursor: pointer; }
.button:hover { background: #f8fafc; border-color: #94a3b8; }
.button--primary { color: white; background: var(--primary); border-color: var(--primary); }
.button--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.button--danger { color: white; background: var(--danger); border-color: var(--danger); }
.button--ghost { color: var(--muted); background: transparent; border-color: transparent; }
.button--small { min-height: 32px; padding: 0 10px; font-size: 12px; }
.button:disabled { opacity: .48; cursor: not-allowed; }
.icon-button { width: 40px; padding: 0; }
.menu-button { display: none; }
.field { display: grid; gap: 7px; min-width: 0; color: #334155; font-size: 12px; font-weight: 600; }
.input, .select { width: 100%; min-height: 42px; padding: 8px 12px; color: var(--text); background: white; border: 1px solid #cbd5e1; border-radius: var(--radius-md); }
.searchable-select { position: relative; min-width: 0; }
.searchable-select__control { position: relative; }
.searchable-select__input { padding-right: 58px; }
.searchable-select__clear, .searchable-select__toggle { position: absolute; top: 50%; display: grid; place-items: center; width: 26px; height: 30px; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 6px; transform: translateY(-50%); cursor: pointer; }
.searchable-select__clear { right: 29px; font-size: 18px; }
.searchable-select__toggle { right: 3px; font-size: 16px; transition: transform 180ms ease; }
.searchable-select.is-open .searchable-select__toggle { transform: translateY(-50%) rotate(180deg); }
.searchable-select__clear:hover, .searchable-select__toggle:hover { color: var(--primary); background: var(--primary-soft); }
.searchable-select__menu { position: absolute; z-index: 30; top: calc(100% + 5px); right: 0; left: 0; max-height: 260px; overflow-y: auto; padding: 5px; background: white; border: 1px solid #cbd5e1; border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
.searchable-select__menu[hidden] { display: none; }
.searchable-select__option { width: 100%; display: block; overflow: hidden; padding: 9px 10px; color: var(--text); background: transparent; border: 0; border-radius: 7px; font: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.searchable-select__option:hover, .searchable-select__option.is-active, .searchable-select__option[aria-selected="true"] { color: var(--primary); background: var(--primary-soft); }
.searchable-select__empty { padding: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 180px auto; gap: var(--space-3); align-items: end; }
#importForm > .field { align-self: start; }
.progress { display: grid; gap: var(--space-2); }
.progress__meta { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--muted); font-size: 12px; }
.progress__track { height: 8px; overflow: hidden; background: #e2e8f0; border-radius: 999px; }
.progress__bar { width: 0; height: 100%; background: var(--primary); border-radius: inherit; transition: width .2s ease; }
.stepper { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.step { position: relative; display: grid; justify-items: center; gap: 7px; color: var(--muted); font-size: 11px; text-align: center; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 1px; background: var(--border); }
.step__number { z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; color: #64748b; background: #f1f5f9; border-radius: 50%; font-weight: 700; }
.step.is-active, .step.is-complete { color: var(--primary); font-weight: 600; }
.step.is-active .step__number { color: white; background: var(--primary); }
.step.is-complete .step__number { color: white; background: var(--success); }
.step.is-complete::after { background: var(--success); }
.notice { padding: var(--space-4); border-left: 3px solid var(--info); background: var(--info-soft); border-radius: var(--radius-md); }
.notice--danger { border-color: var(--danger); background: var(--danger-soft); }
.notice--success { border-color: var(--success); background: var(--success-soft); }
.notice p { margin: 4px 0 0; }
.empty-state { min-height: 220px; display: grid; place-items: center; align-content: center; gap: var(--space-3); text-align: center; }
.empty-state__icon { width: 52px; height: 52px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 50%; }
.skeleton { min-height: 16px; overflow: hidden; background: #edf1f5; border-radius: 6px; }
.skeleton::after { content: ""; display: block; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .8), transparent); animation: shimmer 1.25s infinite; }
@keyframes shimmer { from { transform: translateX(-120%); } to { transform: translateX(300%); } }
.toast-region { position: fixed; z-index: 100; right: 20px; bottom: 20px; width: min(380px, calc(100vw - 40px)); display: grid; gap: var(--space-2); }
.toast { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-4); background: #0f172a; color: white; border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
.toast button { color: white; background: transparent; border: 0; cursor: pointer; }
.modal-backdrop { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: rgb(15 23 42 / .48); }
.modal { position: relative; width: min(620px, 100%); min-width: 0; max-height: calc(100vh - 40px); overflow: auto; overflow-wrap: anywhere; padding: var(--space-6); background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); }
.modal__close { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 24px; line-height: 1; cursor: pointer; }
.modal__close:hover, .modal__close:focus-visible { color: var(--text); background: var(--background); }
.modal.modal--reporting-months { width: min(820px, 100%); max-height: min(760px, calc(100vh - 40px)); }
.modal.modal--auth-permissions { width: min(760px, 92vw); max-width: 92vw; }
.modal.modal--auth-user, .modal.modal--auth-password { width: min(760px, 92vw); max-width: 92vw; }
.auth-permissions-editor { display: grid; gap: var(--space-4); }
.auth-permissions-identity, .auth-permissions-admin { display: grid; gap: 3px; }
.auth-permissions-identity strong, .auth-permissions-admin strong { font-size: 16px; }
.auth-permissions-editor > p { margin: 0; }
.auth-permissions-table { width: 100%; table-layout: fixed; }
.auth-permissions-table th, .auth-permissions-table td { vertical-align: middle; }
.auth-permissions-table tbody th { display: grid; gap: 2px; text-align: left; font-weight: 600; }
.auth-permissions-table tbody th small { color: var(--muted); font-size: 11px; font-weight: 400; }
.auth-permissions-check { width: 112px; text-align: center !important; }
.auth-permissions-check .check { justify-content: center; }
.auth-permissions-check input:disabled { cursor: not-allowed; opacity: .42; }
.auth-permissions-admin p { margin: var(--space-3) 0 0; color: var(--muted); }
.auth-user-form, .auth-password-form { display: grid; gap: var(--space-4); }
.auth-user-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.auth-user-fields .field--wide { grid-column: 1 / -1; }
.auth-password-input { display: flex; align-items: stretch; gap: var(--space-2); }
.auth-password-input .input { flex: 1 1 auto; min-width: 0; }
.auth-user-permissions { display: grid; gap: var(--space-2); }
.auth-user-permissions > p { margin: 0; font-weight: 700; }
.auth-admin-toggle { min-height: 34px; }
.auth-users-table { min-width: 700px; table-layout: auto; }
.auth-users-table th, .auth-users-table td { vertical-align: middle; }
.auth-users-table th:nth-child(1) { min-width: 170px; }
.auth-users-table th:nth-child(2) { width: 110px; }
.auth-users-table th:nth-child(3) { width: 150px; }
.auth-users-table th:nth-child(4) { min-width: 290px; }
.auth-user-role { white-space: nowrap; }
.auth-user-actions { flex-wrap: nowrap; justify-content: flex-end; }
@media (max-width: 680px) {
  .auth-user-fields { grid-template-columns: 1fr; }
  .auth-user-fields .field--wide { grid-column: auto; }
  .auth-users-table { min-width: 620px; }
  .auth-user-actions { flex-wrap: wrap; }
}
.reporting-month-manager { display: grid; gap: var(--space-4); }
.reporting-month-manager__subtitle { margin: -8px 0 0; color: var(--muted); font-size: 13px; }
.reporting-month-list { display: grid; gap: 10px; }
.reporting-month-item { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(190px, 1fr) auto; align-items: center; gap: var(--space-4); padding: 14px; background: white; border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.reporting-month-item.is-current { background: #f5f9ff; border-color: #bfdbfe; }
.reporting-month-item.is-selected { box-shadow: 0 0 0 2px #dbeafe; }
.reporting-month-item__main { min-width: 0; display: flex; align-items: center; gap: 10px; }
.reporting-month-item__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; color: var(--primary); background: #eff6ff; border-radius: 9px; font-size: 20px; }
.reporting-month-item__name { min-width: 0; display: grid; gap: 2px; }
.reporting-month-item__name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.reporting-month-item__name small, .reporting-month-item__meta small { color: var(--muted); font-size: 11px; }
.reporting-month-item__meta { min-width: 0; display: grid; gap: 5px; }
.reporting-month-item__notes { color: var(--primary) !important; }
.reporting-month-item__actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.reporting-month-item__opened { color: var(--primary); font-size: 12px; font-weight: 700; white-space: nowrap; }
.reporting-month-menu-wrap { position: relative; }
.reporting-month-menu-button { min-width: 34px; padding-inline: 7px; font-size: 18px; line-height: 1; }
.reporting-month-menu { position: absolute; z-index: 10; top: calc(100% + 6px); right: 0; min-width: 180px; display: grid; padding: 5px; background: white; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
.reporting-month-menu[hidden] { display: none; }
.reporting-month-menu button { padding: 8px 10px; color: var(--text); background: transparent; border: 0; border-radius: 6px; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.reporting-month-menu button:hover, .reporting-month-menu button:focus-visible { background: var(--background); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.issue-list { display: grid; gap: var(--space-3); }
.issue-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
.issue-card p { margin: 6px 0 0; }
.issue-card__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.issues-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.issues-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.issue-filter { min-height: 34px; }
.issue-filter.is-active { color: white; background: var(--primary); border-color: var(--primary); }
.issue-card--unresolved { border-left: 3px solid var(--warning); }
.issue-card--resolved { border-left: 3px solid var(--success); }
.issue-card--technical { border-left: 3px solid var(--danger); }
.issue-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); color: var(--muted); font-size: 12px; }
.issue-detail-grid { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(0, 1.3fr); gap: 10px var(--space-4); }
.issue-detail-grid dt { color: var(--muted); }
.issue-detail-grid dd { margin: 0; overflow-wrap: anywhere; }
.template-row-list { max-height: 340px; overflow: auto; margin-top: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.template-row-option { display: grid; grid-template-columns: auto 62px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: 11px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.template-row-option:last-child { border-bottom: 0; }
.template-row-option:hover { background: #f8fafc; }
.template-row-context { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.timeline { position: relative; display: grid; gap: var(--space-4); padding-left: 24px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.timeline-item { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(120px, 150px) minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.timeline-item__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.timeline-item::before { content: ""; position: absolute; left: -22px; width: 9px; height: 9px; background: var(--primary); border: 3px solid white; border-radius: 50%; box-shadow: 0 0 0 1px var(--border); }
.chart { position: relative; min-height: 300px; }
.chart canvas { width: 100% !important; height: 300px !important; }
.chart-empty { min-height: 300px; display: grid; place-items: center; align-content: center; gap: var(--space-2); color: var(--muted); text-align: center; }
.chart-empty strong { color: var(--text); }
.ranking { display: grid; gap: var(--space-3); }
.ranking__row { display: grid; gap: 6px; }
.ranking__label { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 12px; }
.ranking__track { height: 7px; overflow: hidden; background: #e9eef5; border-radius: 99px; }
.ranking__bar { height: 100%; background: var(--primary); border-radius: inherit; }
.dashboard-page-header { align-items: flex-start; }
.dashboard-comparison-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: 4px; }
.dashboard-comparison-meta .muted { margin: 0; }
.dashboard-client-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }
.dashboard-client-search .input { width: min(280px, 32vw); }
.dashboard-client-search-count { min-width: 72px; font-size: 12px; }
#dashboardMetrics.metric-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.dashboard-kpi-group { display: grid; gap: var(--space-3); }
.dashboard-kpi-group--primary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-kpi-group--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-metric-card { display: flex; flex-direction: column; gap: var(--space-2); }
.dashboard-metric-card__label { color: var(--muted); font-size: 12px; font-weight: 600; }
.dashboard-metric-card__value { color: var(--text); font-size: 24px; font-weight: 750; line-height: 1.15; }
.dashboard-direction { display: inline-block; margin-right: 3px; font-weight: 700; }
.dashboard-direction--positive { color: var(--success); opacity: .78; }
.dashboard-direction--negative { color: var(--danger); opacity: .78; }
.dashboard-direction--neutral { color: var(--muted); }
.dashboard-metric-card__context { color: var(--muted); font-size: 11px; }
.dashboard-kpi-group--secondary .metric-card { min-height: 78px; padding: var(--space-3) var(--space-4); background: var(--surface); box-shadow: var(--shadow-card); }
.dashboard-kpi-group--secondary .dashboard-metric-card__value { font-size: 18px; }
.dashboard-kpi-group--secondary .dashboard-metric-card__context { font-size: 11px; }
.dashboard-chart-card, .dashboard-comparison-card { padding: var(--space-5); }
.dashboard-chart-card .section-title, .dashboard-comparison-card .section-title { margin-bottom: var(--space-5); }
.dashboard-table-scroll { max-height: 540px; overflow: auto; overscroll-behavior: contain; }
.dashboard-table-scroll .data-table { min-width: 680px; }
.dashboard-table-scroll .data-table th { top: 0; }
.consumption-filters { position: sticky; top: calc(var(--topbar) + var(--space-2)); z-index: 12; padding: var(--space-4); }
.consumption-filters__layout { display: grid; gap: var(--space-3); min-width: 0; }
.consumption-filters__main { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); align-items: end; min-width: 0; }
.consumption-filters__secondary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; min-width: 0; }
.consumption-filters__analysis-fields { display: grid; grid-template-columns: 88px 88px 132px minmax(190px, 1fr); gap: var(--space-3); align-items: end; min-width: 0; }
.consumption-filters__main > *, .consumption-filters__analysis-fields > * { min-width: 0; }
.consumption-filters .consumption-group-scope-field { width: 100%; min-width: 0; padding: 0; background: transparent; border: 0; border-radius: 0; color: inherit; font-weight: 600; }
.consumption-filters .consumption-group-scope-field .select { border-color: #cbd5e1; background-color: #fff; font-weight: 400; }
.consumption-filters__nonzero { min-height: 42px; align-self: end; }
.consumption-filters__actions { display: flex; justify-content: flex-end; align-items: end; gap: 8px; min-width: 0; }
.consumption-filters__actions .button { min-height: 42px; white-space: nowrap; }
@media (max-width: 1240px) {
  .consumption-filters__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consumption-filters__secondary { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .consumption-filters__analysis-fields { grid-template-columns: 88px 88px 132px minmax(180px, 1fr); }
  .consumption-filters__actions { justify-content: flex-end; }
}
@media (max-width: 960px) {
  .consumption-filters__analysis-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consumption-filters__nonzero { grid-column: 1 / -1; }
}
.consumption-changes-scrim { position: fixed; z-index: 69; inset: var(--topbar) 0 0; visibility: hidden; opacity: 0; padding: 0; border: 0; background: rgb(15 23 42 / .28); transition: opacity 220ms ease, visibility 220ms ease; }
.consumption-changes-scrim.is-open { visibility: visible; opacity: 1; }
.consumption-changes-drawer { position: fixed; z-index: 70; top: var(--topbar); right: 0; bottom: 0; width: min(620px, 94vw); display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-overlay); transform: translateX(102%); transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }
.consumption-changes-drawer.is-open { transform: translateX(0); }
.consumption-changes-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border); }
.consumption-changes-drawer__header h2 { margin: 3px 0 0; }
.consumption-changes-drawer__body { min-height: 0; overflow-y: auto; padding: var(--space-4); }
.consumption-analysis-scrim { position: fixed; z-index: 69; inset: var(--topbar) 0 0; border: 0; background: rgba(15, 23, 42, .28); opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
.consumption-analysis-scrim.is-open { opacity: 1; pointer-events: auto; }
.consumption-analysis-drawer { position: fixed; z-index: 70; top: var(--topbar); right: 0; bottom: 0; width: min(760px, 96vw); display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-overlay); transform: translateX(102%); transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }
.consumption-analysis-drawer.is-open { transform: translateX(0); }
.consumption-analysis-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border); }
.consumption-analysis-drawer__header h2 { margin: 3px 0 0; }
.consumption-analysis-drawer__body { min-height: 0; overflow-y: auto; padding: var(--space-4); }
.analysis-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: var(--space-3); margin-bottom: var(--space-4); }
.analysis-controls__action { display: flex; align-items: end; height: 100%; }
.analysis-summary, .analysis-drivers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.analysis-summary > div, .analysis-drivers > div { display: grid; gap: 4px; padding: var(--space-3); background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-md); }
.analysis-summary span, .analysis-drivers span { color: var(--muted); font-size: .82rem; }
.analysis-summary strong, .analysis-drivers strong { color: var(--text); }
.analysis-mode { margin-bottom: var(--space-4); }
@media (max-width: 640px) {
  .analysis-controls { grid-template-columns: 1fr; }
  .analysis-controls__action { height: auto; }
  .analysis-controls__action .button { width: 100%; }
  .analysis-summary, .analysis-drivers { grid-template-columns: 1fr; }
}
.consumption-change-operators { display: grid; gap: var(--space-3); }
.consumption-change-operator { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.consumption-change-operator__toggle, .consumption-change-client__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 13px 14px; color: var(--text); background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
.consumption-change-operator__toggle:hover, .consumption-change-client__toggle:hover { background: #f8fafc; }
.consumption-change-operator__toggle > span:first-child { min-width: 0; display: grid; gap: 3px; }
.consumption-change-operator__toggle small { color: var(--muted); font-size: 11px; }
.consumption-change-operator__summary { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3); }
.consumption-change-chevron { display: inline-block; color: var(--muted); transition: transform 220ms ease; }
.consumption-change-operator__toggle[aria-expanded="true"] .consumption-change-chevron { transform: rotate(180deg); }
.consumption-change-clients { border-top: 1px solid var(--border); background: #fbfdff; }
.consumption-change-client + .consumption-change-client { border-top: 1px solid var(--border); }
.consumption-change-client__toggle { padding-left: var(--space-5); font-size: 12px; }
.consumption-change-client__details { padding: 0 var(--space-4) var(--space-4); }
.consumption-change-client__details .table-wrap { max-height: 310px; }
.consumption-change-client__details .data-table { font-size: 11px; }
.consumption-change-client__details .data-table th { white-space: normal; }
.gas-balance-collapsible__toggle { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0; color: var(--text); background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
.gas-balance-collapsible__toggle:hover .gas-balance-collapsible__summary > strong { color: var(--primary); }
.gas-balance-collapsible__toggle:focus-visible { outline: 3px solid rgb(37 99 235 / .3); outline-offset: 4px; border-radius: var(--radius-sm); }
.gas-balance-collapsible__summary { min-width: 0; display: grid; gap: 5px; }
.gas-balance-collapsible__summary > strong { font-size: 1.05rem; line-height: 1.3; }
.gas-balance-collapsible__summary > span { color: var(--muted); font-size: .84rem; line-height: 1.45; overflow-wrap: anywhere; }
.gas-balance-collapsible__chevron { flex: 0 0 auto; color: var(--muted); font-size: 22px; line-height: 1; transition: transform 180ms ease; }
.gas-balance-collapsible__toggle[aria-expanded="true"] .gas-balance-collapsible__chevron { transform: rotate(180deg); }
.gas-balance-collapsible__content[hidden] { display: none !important; }
.gas-balance-collapsible__content:not([hidden]) { min-width: 0; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.gas-balance-collapsible__content .section-title { flex-wrap: wrap; }
.gas-balance-collapsible__warning { margin-top: var(--space-4); }
@media (max-width: 640px) {
  .gas-balance-collapsible__summary > strong { font-size: .98rem; }
  .gas-balance-collapsible__summary > span { font-size: .78rem; }
  .gas-balance-collapsible__content .section-title { align-items: flex-start; }
}
.date-range { margin: 0; padding: 0; border: 0; }
.date-range legend { padding: 0; margin-bottom: 7px; }
.range-fields { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.check-field { min-height: 42px; display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; color: #334155; font-size: 12px; font-weight: 600; }
.analytics-panel { padding: var(--space-4); }
.analytics-panel .section-title { margin-bottom: var(--space-3); }
.analytics-panel .section-title p { margin: 2px 0 0; font-size: 12px; }
.chart--large { min-height: clamp(320px, 38vw, 460px); }
.chart--large canvas { height: clamp(320px, 38vw, 460px) !important; }
.chart--operator { min-height: 360px; }
.chart--operator canvas { height: 360px !important; }
.chart--share { min-height: 360px; }
.chart--share canvas { height: 360px !important; }
.segmented { display: inline-flex; padding: 3px; background: #f1f5f9; border-radius: var(--radius-md); }
.segmented .button { min-height: 30px; border-color: transparent; background: transparent; }
.segmented .button.is-active { color: white; background: var(--primary); }
.comparison-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.comparison-strip > div { display: grid; gap: 4px; }
.comparison-empty { grid-column: 1 / -1; display: flex !important; align-items: center; justify-content: center; gap: var(--space-3) !important; min-height: 48px; color: var(--muted); text-align: center; }
.trend-up { color: #15803d; }
.trend-down { color: var(--danger); }
.anomaly-list { display: grid; gap: var(--space-2); }
.anomaly-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.anomaly-row:last-child { border-bottom: 0; }
.anomaly-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.anomaly-dot.has-warning { background: var(--warning); }
.consumption-changes-summary { display: flex; min-height: 100%; flex-direction: column; cursor: pointer; transition: border-color 180ms ease, box-shadow 180ms ease; }
.consumption-changes-summary:hover { border-color: #93c5fd; box-shadow: 0 8px 22px rgb(15 23 42 / .08); }
.consumption-changes-summary:focus-visible { outline: 3px solid rgb(37 99 235 / .3); outline-offset: 2px; }
.consumption-changes-summary > .button { align-self: flex-start; margin-top: auto; }
.consumption-changes-summary__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.consumption-changes-summary__metrics > div { display: grid; gap: 2px; padding: 10px; border-radius: var(--radius-md); background: #f8fafc; }
.consumption-changes-summary__metrics strong { font-size: 20px; }
.consumption-changes-summary__metrics span { color: var(--muted); font-size: 10px; }
.consumption-changes-summary__operators { display: grid; margin-bottom: var(--space-2); }
.consumption-changes-summary__operator { display: grid; gap: 7px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.consumption-changes-summary__operator-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 12px; }
.consumption-changes-summary__operator-heading > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.consumption-changes-summary__clients { display: grid; gap: 4px; padding-left: var(--space-3); }
.consumption-changes-summary__client { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--muted); font-size: 11px; }
.consumption-changes-summary__client > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consumption-changes-summary__client small { flex: 0 0 auto; color: var(--muted); }
.consumption-changes-summary__more { margin-bottom: var(--space-3); color: var(--primary); font-size: 12px; font-weight: 700; }
.consumption-changes-summary__empty { display: grid; gap: 5px; margin-bottom: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: #f0fdf4; }
.consumption-changes-summary__empty span { color: var(--muted); font-size: 12px; }
.data-quality-panel { padding: 0; }
.data-quality-panel summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); cursor: pointer; list-style: none; }
.data-quality-panel summary::-webkit-details-marker { display: none; }
.data-quality-panel summary > span:first-child { display: grid; gap: 2px; }
.data-quality-panel summary small { color: var(--muted); }
.data-quality-panel__body { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--border); }
.compact-select { width: auto; min-width: 100px; }
.table-tools { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.table-tools .field { width: min(360px, 100%); }
.consumption-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-3); padding: 10px 12px; color: var(--primary); background: var(--primary-soft); border: 1px solid #bfdbfe; border-radius: var(--radius-md); }
@media (max-width: 680px) { .consumption-selection-bar { align-items: stretch; flex-direction: column; } }
.consumption-group-scope-field { width: min(300px, 100%); }
.consumption-group-manage { align-self: end; }
.consumption-group-scope-notice { grid-column: 1 / -1; margin-top: var(--space-2); }
.consumption-group-panel { display: grid; gap: var(--space-3); margin: 0 0 var(--space-3); min-width: 0; }
.consumption-group-panel .section-title { margin-bottom: 0; }
.consumption-group-chart { display: block; width: 100%; height: auto; max-height: 210px; overflow: visible; }
.consumption-group-chart line { stroke: #cbd5e1; stroke-width: 1; }
.consumption-group-chart polyline { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.consumption-group-chart text { fill: var(--muted); font-size: 11px; }
.consumption-group-members { min-width: 800px; }
.consumption-group-members small { display: block; color: var(--muted); font-size: 11px; }
.consumption-group-manager-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.consumption-group-manager-row > span { display: grid; min-width: 0; gap: 4px; }
.consumption-group-manager-row > span small { display: block; color: var(--muted); }
.consumption-group-manager-row .field { min-width: min(320px, 100%); }
@media (max-width: 680px) {
  .consumption-group-scope-field { width: 100%; }
  .consumption-group-manage { width: 100%; }
  .consumption-group-panel .section-title { align-items: flex-start; flex-direction: column; }
  .consumption-group-manager-row { grid-template-columns: 1fr; }
}
.pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-3); color: var(--muted); font-size: 12px; }
@media (max-width: 680px) { .comparison-strip, .consumption-changes-summary__metrics { grid-template-columns: 1fr; } .consumption-changes-summary__operator-heading { align-items: flex-start; flex-direction: column; gap: 2px; } .consumption-changes-summary__operator-heading > span { white-space: normal; } .table-tools, .pagination { align-items: stretch; flex-direction: column; } .consumption-filters { position: static; } }
@media (max-width: 680px) { .reporting-month-item { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .reporting-month-item__meta { grid-column: 1 / -1; } .modal.modal--reporting-months { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .consumption-changes-scrim, .consumption-changes-drawer, .consumption-change-chevron, .consumption-changes-summary { transition: none; } }
@media (max-width: 760px) { .toolbar { grid-template-columns: 1fr; } .stepper { overflow: hidden; } .step span:last-child { display: none; } .issue-card { grid-template-columns: 1fr; } .issues-toolbar { align-items: stretch; flex-direction: column; } .issue-detail-grid { grid-template-columns: 1fr; } .timeline-item { grid-template-columns: 1fr; } }
.recipient-picker { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; min-height: 2.75rem; padding: .45rem; border: 1px solid var(--border); border-radius: .7rem; background: var(--surface); }
.recipient-chips { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 auto; }
.recipient-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .45rem .3rem .65rem; border-radius: 999px; background: var(--surface-muted, #eef2f7); color: var(--text); font-size: .88rem; }
.recipient-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 .1rem; font-size: 1rem; line-height: 1; }
.recipient-add { flex: 0 0 auto; }
.recipient-popover { position: absolute; z-index: 4; top: calc(100% + .35rem); right: .45rem; min-width: 14rem; padding: .35rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface); box-shadow: 0 10px 26px rgba(20, 35, 60, .16); }
.recipient-option { display: flex; justify-content: space-between; width: 100%; border: 0; border-radius: .45rem; background: transparent; padding: .55rem .65rem; text-align: left; cursor: pointer; color: inherit; }
.recipient-option:hover { background: var(--surface-muted, #eef2f7); }
.recipient-option.is-selected, .recipient-option:disabled { color: var(--muted); cursor: default; opacity: .7; }
.recipient-option--custom { border-top: 1px solid var(--border); margin-top: .2rem; }
.recipient-helper { margin-top: .8rem; }
@media (max-width: 600px) { .recipient-picker { align-items: flex-start; } .recipient-popover { left: .45rem; right: .45rem; min-width: 0; } }