/* Forbrug: per-unit grid + unit pane (admin/usage.html, usage_pane.html). Owner: Forbrug agent
   (docs/DESIGN.md "File ownership"). Scoped under .pg-usage; ported from the reference design
   (FMeter-redesign/admin-center/src/app.css, "Revision 3"). */

/* ---- Period control -------------------------------------------------------------- */
.pg-usage .ubar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: var(--spacingVerticalM) 0 var(--spacingVerticalL); }
.pg-usage .per-sel { display: none; flex: none; width: 100%; }
.pg-usage .per-sel .select-wrap { flex: 1; }

/* ---- Grid ------------------------------------------------------------------------ */
.pg-usage .ugrid .only-m-inline { display: none; }
.pg-usage .ugrid .u-name { width: 34%; min-width: 0; padding-right: 16px; }
.pg-usage .ugrid .u-v { width: 22%; }
.pg-usage .ugrid td.u-v { min-width: 104px; }
.pg-usage .ugrid .primary-num { display: block; line-height: 20px; font-variant-numeric: tabular-nums; }
.pg-usage .ugrid .primary-num .unit { margin-left: 3px; font-size: var(--fontSizeBase200); }
.pg-usage .ugrid th .unit { font-weight: var(--fontWeightRegular); margin-left: 2px; }
.pg-usage .ugrid th.u-name .sortbtn { margin-left: 18px; }
.pg-usage .ugrid tr.vacant .primary, .pg-usage .ugrid tr.vacant .second { color: var(--colorNeutralForeground3); font-weight: var(--fontWeightRegular); }
.pg-usage .ugrid tr.vacant .u-stw.st-bad { color: var(--fm-danger-fg); font-weight: var(--fontWeightSemibold); }
.pg-usage .ugrid tr.vacant .u-stw.st-warn { color: var(--colorStatusWarningForeground1); font-weight: var(--fontWeightSemibold); }
.pg-usage .ugrid tr.common .primary { font-weight: var(--fontWeightRegular); color: var(--colorNeutralForeground2); }
.pg-usage .ugrid tfoot tr.total th, .pg-usage .ugrid tfoot tr.total td { height: 52px; background: var(--colorNeutralBackground2); border-top: 1px solid var(--colorNeutralStroke1); border-bottom: 0; font-weight: var(--fontWeightSemibold); text-align: left; }
.pg-usage .ugrid tfoot tr.total td.r { text-align: right; }
.pg-usage .ugrid tfoot th .second { display: block; font-size: var(--fontSizeBase200); line-height: 16px; color: var(--colorNeutralForeground3); font-weight: var(--fontWeightRegular); }
.pg-usage .ugrid tfoot tr.total th:first-child { border-radius: 0 0 0 var(--borderRadiusXLarge); }
.pg-usage .upage .grid-foot { border-top: 0; }
.pg-usage .ugrid tbody tr.common:last-child td, .pg-usage .ugrid tbody tr.common:last-child th { border-bottom: 1px solid var(--fm-row-stroke); }

/* Bolig cell with the status folded in: icon before the name, status word on line 2 */
.pg-usage .ugrid .namecell { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.pg-usage .ugrid .u-ico { flex: none; width: 16px; padding-top: 2px; }
.pg-usage .ugrid .u-ico .st .i { width: 16px; height: 16px; }
.pg-usage .ugrid .u-txt { min-width: 0; flex: 1; }
.pg-usage .ugrid .u-l1 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; }
.pg-usage .ugrid .u-l1 .primary { display: inline; }
.pg-usage .ugrid .u-ten { color: var(--colorNeutralForeground2); }
.pg-usage .ugrid tr.vacant .u-ten { color: var(--colorNeutralForeground3); }
.pg-usage .ugrid tfoot .u-l1 { font-weight: var(--fontWeightSemibold); }
.pg-usage .ugrid .second { max-width: none; }
.pg-usage .ugrid .u-stw { font-weight: var(--fontWeightSemibold); }
.pg-usage .ugrid .u-stw.st-bad { color: var(--fm-danger-fg); }
.pg-usage .ugrid .u-stw.st-warn { color: var(--colorStatusWarningForeground1); }

/* ---- Pane ------------------------------------------------------------------------ */
.pg-usage .dot { color: var(--colorNeutralForeground4); }
.pg-usage .mp-sub { padding: 12px 20px 0; border-top: 1px solid var(--fm-row-stroke); }
.pg-usage .mp-sub + .u-med { border-top: 0; padding-top: 8px; }
.pg-usage .u-med .mp-h { margin-bottom: 0; }
.pg-usage .ucol-delta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; min-height: 24px; }
.pg-usage .u-tot { display: inline-flex; align-items: baseline; gap: 3px; }
.pg-usage .u-tot b { font-family: var(--fontFamilyNumeric); font-variant-numeric: tabular-nums; font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); font-weight: var(--fontWeightRegular); }
.pg-usage .u-tot .unit { font-size: var(--fontSizeBase200); }
.pg-usage .ts-legend { margin: 12px 0 0; padding: 0; width: 100%; }
.pg-usage .umeters { margin: 8px -20px -16px; border-top: 1px solid var(--fm-row-stroke); list-style: none; padding: 0; }
.pg-usage .umeters li + li { border-top: 1px solid var(--fm-row-stroke); }
.pg-usage .umeters a { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto 16px; align-items: center; gap: 12px; padding: 10px 16px 10px 20px; color: var(--colorNeutralForeground1); }
.pg-usage .umeters a:hover { background: var(--colorSubtleBackgroundHover); text-decoration: none; color: var(--colorNeutralForeground1); }
.pg-usage .umeters a:focus-visible { outline-offset: -2px; }
.pg-usage .umeters .um-name { min-width: 0; }
.pg-usage .umeters .um-name b { display: block; font-weight: var(--fontWeightSemibold); }
.pg-usage .umeters .um-name small { display: block; font-size: var(--fontSizeBase200); line-height: 16px; color: var(--colorNeutralForeground3); }
.pg-usage .umeters .um-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-usage .umeters > li > a > .i:last-child { color: var(--colorNeutralForeground3); }

/* ---- With the pane open (>= 1024 px): fewer details in the grid -------------------- */
@media (min-width: 1024px) {
  .pg-usage .upage.has-sel .ubar-note { display: none; }
  .pg-usage .upage.has-sel .ugrid .dmini { display: none; }
  .pg-usage .upage.has-sel table.ugrid { table-layout: fixed; }
  .pg-usage .upage.has-sel .ugrid .u-name { width: 46%; min-width: 0; padding-right: 8px; }
  .pg-usage .upage.has-sel .ugrid .u-v { width: 18%; min-width: 0; }
  .pg-usage .upage.has-sel .ugrid td .unit, .pg-usage .upage.has-sel .ugrid th.u-v .unit { display: none; }
  .pg-usage .upage.has-sel .ugrid .u-since { display: none; }
  .pg-usage .upage.has-sel .ugrid th.u-v .sortbtn { max-width: 100%; }
}

/* ---- Mobile (< 768 px): grid -> list rows, native period select ------------------- */
@media (max-width: 767px) {
  .pg-usage .per-seg, .pg-usage .ubar-note { display: none; }
  .pg-usage .per-sel { display: flex; }
  .pg-usage .ugrid th.u-name .sortbtn { margin-left: 0; }
  .pg-usage .ugrid .only-m-inline { display: inline-flex; }
  .pg-usage .table-wrap.ustack { overflow: visible; }
  .pg-usage .ustack table.dg, .pg-usage .ustack .dg tbody, .pg-usage .ustack .dg tfoot { display: block; }
  .pg-usage .ustack .dg thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pg-usage .ustack .dg tr { display: grid; grid-template-columns: 20px repeat(3, minmax(0, 1fr)) 16px; column-gap: 8px; row-gap: 4px; align-items: center; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--fm-row-stroke); }
  .pg-usage .ustack .dg td, .pg-usage .ustack .dg th { display: block; height: auto !important; padding: 0 !important; border: 0 !important; min-width: 0; white-space: nowrap; text-align: left !important; background: transparent; }
  .pg-usage .ustack .dg tr.total { background: var(--colorNeutralBackground2); border-bottom: 0; border-radius: 0 0 var(--borderRadiusXLarge) var(--borderRadiusXLarge); }
  .pg-usage .ustack .dg .u-name { width: auto; min-width: 0; grid-column: 1 / 5; grid-row: 1; overflow: hidden; }
  .pg-usage .ustack .dg td.u-v { width: auto; min-width: 0; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; font-size: var(--fontSizeBase200); }
  .pg-usage .ustack .dg td.u-heat { grid-column: 2; }
  .pg-usage .ustack .dg td.u-water { grid-column: 3; }
  .pg-usage .ustack .dg td.u-electricity { grid-column: 4; }
  .pg-usage .ustack .dg td.u-v .med .i { width: 14px; height: 14px; }
  .pg-usage .ustack .dg td.u-v .primary-num { display: inline; }
  .pg-usage .ustack .dg td.u-v .dmini { flex-basis: 100%; padding-left: 18px; }
  .pg-usage .ustack .dg td.chev { display: block; grid-column: 5; grid-row: 1 / span 2; color: var(--colorNeutralForeground3); }
  .pg-usage .ustack .dg tr.total td.chev, .pg-usage .ustack .dg tr.common td.chev { visibility: hidden; }
  .pg-usage .ustack .dg tr.alarm { box-shadow: inset 3px 0 0 var(--colorStatusDangerBorder2); }
  .pg-usage .ustack .dg tr.stale { box-shadow: inset 3px 0 0 var(--colorStatusWarningBorderActive); }
  .pg-usage .ustack .dg tr.alarm td:first-child, .pg-usage .ustack .dg tr.stale td:first-child { box-shadow: none; }
  .pg-usage .ustack .dg a.rowlink:focus-visible { outline: none; box-shadow: none; }
  .pg-usage .ustack .dg tr:has(a.rowlink:focus-visible) { outline: 2px solid var(--colorStrokeFocus2); outline-offset: -2px; }
  .pg-usage .umeters { margin: 8px -16px -14px; }
  .pg-usage .umeters a { padding: 10px 12px 10px 16px; grid-template-columns: 20px minmax(0, 1fr) auto auto 16px; gap: 8px; }
  .pg-usage .umeters .st-ok { display: none; }
  .pg-usage .mp-sub { padding: 12px 16px 0; }
}