/* Area meters – page styles (docs/AREAS.md): meter readings, meter management, yearly reading round, rent increases, documents.
   Only classes of this area's pages (prefix .pg-d / mtr- / inc- / doc-); shared tokens in theme.css. No all-caps, no thick coloured left borders. */
.pg-d .input.ro { display: flex; align-items: center; gap: 6px; background: var(--surface-2); color: var(--text); min-height: var(--input-h); height: auto; padding-top: 6px; padding-bottom: 6px; overflow-wrap: anywhere; }
.pg-d .table-wrap { position: relative; }
.pg-d .num { font-variant-numeric: tabular-nums; }
.mtr-ph { display: inline-flex; vertical-align: middle; color: var(--text-3); }
.mtr-val .input { text-align: right; font-variant-numeric: tabular-nums; }
.mtr-mu { display: inline-flex; align-items: center; padding: 0 12px; min-width: 44px; justify-content: center; border: 1px solid var(--border); border-left: 0; border-radius: 0 10px 10px 0; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
.mtr-mu:empty { display: none; }
.mtr-check { margin-top: 14px; } .mtr-check:empty { display: none; }
.mtr-photo { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mtr-photo-img img { display: block; max-width: min(100%, 420px); max-height: 320px; border-radius: var(--radius); border: 1px solid var(--border); object-fit: contain; background: var(--surface-2); }
.mtr-photo-none { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-3); }
tr.mtr-cur td { background: var(--primary-soft); }
tr.mtr-off td { color: var(--text-3); }
.mtr-tbl td { vertical-align: middle; }
.mtr-tbl .row { gap: 6px; }
.mtr-round-bar .field { margin: 0; min-width: 180px; flex: 1 1 180px; max-width: 280px; }
.mtr-round { margin: 0; }
.mtr-round li { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(140px, 1fr) minmax(150px, 220px) auto; gap: 6px 14px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--border); }
.mtr-round li:first-child { border-top: 0; }
.mtr-round li.bad { background: var(--danger-bg); }
.mtr-r-lbl { display: flex; flex-direction: column; gap: 1px; cursor: pointer; }
.mtr-r-rep { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.mtr-r-rep input { width: 18px; height: 18px; accent-color: var(--primary); }
.mtr-msg { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-3); } .mtr-msg:empty { display: none; }
.mtr-msg.err { color: var(--danger); font-weight: 600; } .mtr-msg.ok { color: var(--success); }
.mtr-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-top: var(--gap); padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.inc-note { margin-bottom: var(--gap); }
.inc-fin { display: block; margin-top: 6px; }
.inc-warn-n { display: inline-flex; align-items: center; gap: 4px; color: var(--warning); font-weight: 600; margin-top: 3px; }
.inc-calc:empty { display: none; }
.inc-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); }
.inc-kv div { display: flex; flex-direction: column; gap: 2px; } .inc-kv dt { font-size: var(--fs-xs); color: var(--text-3); } .inc-kv dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.inc-rules { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.inc-rule { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; }
.inc-rule .st { justify-content: center; text-align: center; }
.inc-rule-msg { color: var(--text-2); margin-top: 2px; }
.inc-settings { margin: 14px 0 0; }
.inc-mails li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--border); } .inc-mails li:first-child { border-top: 0; }
.doc-cell { display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: 360px; }
.doc-cell .doc-main { min-width: 0; max-width: 280px; } .doc-cell .ellipsis { display: block; }
.doc-acts { gap: 2px; }
.doc-preview { display: grid; place-items: center; } .doc-preview img { max-width: 100%; max-height: 70vh; border-radius: var(--radius); }
.doc-drop { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; color: var(--text-2); }
.doc-drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 960px) { body.staff-mode .mtr-savebar { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 6px); } .inc-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pg-d .btn, .pg-d .chip, .pg-d .input, .pg-d select.input { min-height: 44px; }
  .pg-d .btn-icon { min-width: 44px; }
  .pg-d .page-head .actions { flex-wrap: wrap; }
  .hide-sm { display: none; }

  .doc-cell { min-width: 0; } .doc-cell .doc-main { max-width: 190px; }
  .mtr-round li { grid-template-columns: 1fr auto; padding: 12px 14px; }
  .mtr-r-lbl { grid-column: 1 / -1; } .mtr-r-prev { grid-column: 1 / -1; }
  .mtr-round-bar .field { max-width: none; }
  .inc-rule { grid-template-columns: 1fr; gap: 4px; } .inc-rule .st { justify-self: start; }
}
@media (min-width: 900px) {
  .mtr-tbl { table-layout: fixed; }
  .mtr-tbl th:nth-child(1) { width: 26%; } .mtr-tbl th:nth-child(2) { width: 14%; } .mtr-tbl th:nth-child(3) { width: 16%; }
  .mtr-tbl th:nth-child(4) { width: 13%; } .mtr-tbl th:nth-child(5) { width: 11%; } .mtr-tbl th:nth-child(6) { width: 20%; }
}