/* Målere: data grid + reading pane (admin/meters.html, _meter_pane.html, _meter_card_body.html).
   Owner: the Målere agent (docs/DESIGN.md "File ownership"). Every rule is scoped under .pg-meters.
   The pane pattern itself (.msplit, .mpane, .mp-*) is in components.css. */

/* ---- Grid ---------------------------------------------------------------- */
.pg-meters .st-quiet .i { opacity: .9; }
.pg-meters .dg .second.alt { display: none; font-weight: var(--fontWeightRegular); }
.pg-meters .dg .second.alt.st-bad { color: var(--fm-danger-fg); }
.pg-meters .dg .second.alt.st-warn { color: var(--colorStatusWarningForeground1); }
.pg-meters .dg .second.alt.st-none { color: var(--colorNeutralForeground3); }
.pg-meters .msearch { display: flex; align-items: center; margin: 0; }
.pg-meters .med-select { display: none; align-items: center; gap: 8px; margin: 0; padding: 0 12px 12px; }
.pg-meters .med-select label { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); }
.pg-meters .mlist > .empty { border-top: 1px solid var(--fm-row-stroke); }

/* Pane open (≥ 1024 px): the list is the narrow column of a mail client. The status shrinks
   to its icon, the exception word moves to the second line, columns the pane repeats go. */
@media (min-width: 1024px) {
  .pg-meters .mpage.has-sel .dg th.m-st .sortbtn { font-size: 0; }
  .pg-meters .mpage.has-sel .dg th.m-st .sortbtn .i { width: 12px; }
  .pg-meters .mpage.has-sel .dg th.m-st, .pg-meters .mpage.has-sel .dg td.m-st { width: 36px; }
  .pg-meters .mpage.has-sel .dg td.m-st .st-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pg-meters .mpage.has-sel .dg .second.alt { display: block; }
  .pg-meters .mpage.has-sel .dg td:has(.second.alt) .second.main { display: none; }
  .pg-meters .mpage.has-sel .gridbar .end { flex: 1 1 100%; margin-left: 0; }
  .pg-meters .mpage.has-sel .gridbar .msearch, .pg-meters .mpage.has-sel .gridbar .searchbox { flex: 1; width: auto; max-width: none; }
}
@media (min-width: 1024px) and (max-width: 1239px) {
  .pg-meters .mpage.has-sel .dg :is(th, td).m-a { display: none; }
}

/* Narrow: the medium chips become a native select. */
@media (max-width: 599px) {
  .pg-meters .chips { display: none; }
  .pg-meters .med-select { display: flex; }
  .pg-meters .gridbar .msearch { flex: 1; }
}

/* ---- Pane ---------------------------------------------------------------- */
.pg-meters .mpane .ts { min-height: 188px; }
.pg-meters .mp-sec .legend { margin-top: 12px; }
.pg-meters .mp-kpis .deltachip { margin-bottom: 2px; }
.pg-meters .mp-cols .kv dd { white-space: nowrap; }
.pg-meters .mp-cols .kv dd .mono { font-size: var(--fontSizeBase200); }
.pg-meters .empty.sm h4 { margin: 0; }
.pg-meters .empty.sm p { margin: 0; }

/* Latest values: the live part (SSE swaps its innerHTML). "Opdateret" sits top right of the
   section header. */
.pg-meters .mp-live { position: relative; }
.pg-meters .mp-live .meter-card-body { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-meters .mp-live .meter-card-body dl { flex: 1 1 100%; margin: 0; }
.pg-meters .mp-live .meter-card-body footer { position: absolute; top: 20px; right: 20px; margin: 0; }
.pg-meters .mp-live .meter-card-body footer small { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); }
@media (max-width: 599px) {
  .pg-meters .mp-live .meter-card-body footer { top: 18px; right: 16px; }
}

/* "…" menu: a native popover under its button (anchor positioning where supported). */
.pg-meters .mp-more { margin-left: auto; anchor-name: --fm-mp-more; }
.pg-meters .mp-pop { top: 160px; right: 24px; min-width: 240px; }
@supports (anchor-name: --a) {
  .pg-meters .mp-pop { position-anchor: --fm-mp-more; top: anchor(bottom); right: anchor(right); margin-top: 4px; }
}
.pg-meters .pop-note { margin: 0; padding: 4px 8px 8px; max-width: 300px; font-size: var(--fontSizeBase200); line-height: 16px; color: var(--colorNeutralForeground3); }
.pg-meters .only-narrow { display: none; }
@media (max-width: 599px) {
  .pg-meters .mp-more.only-narrow { display: inline-grid; }
  .pg-meters .menu-link.only-narrow { display: flex; }
}

/* Technical data: collapsed tables (historic values, recent readings, decode errors). */
.pg-meters .mp-tech > :not(summary) { margin-left: 20px; margin-right: 20px; }
.pg-meters .mp-tech h4 { margin-top: 16px; margin-bottom: 4px; }
.pg-meters .mp-tech p { margin-top: 0; margin-bottom: 8px; }
.pg-meters .mp-tech .table-wrap { margin-bottom: 8px; border: 1px solid var(--fm-row-stroke); border-radius: var(--borderRadiusMedium); }
.pg-meters .mp-tech .dg td, .pg-meters .mp-tech .dg th { padding-left: 12px; padding-right: 12px; }
.pg-meters .mp-tech .dg td.wrap { white-space: normal; }
.pg-meters .mp-tech .dg td .second { display: block; height: auto; }
@media (max-width: 599px) {
  .pg-meters .mp-tech > :not(summary) { margin-left: 16px; margin-right: 16px; }
}

@media (min-width: 1024px) {
  .pg-meters .mpage.has-sel .dg .second { max-width: 150px; }
}