/* styles for compare_main_user.php */

*{ box-sizing:border-box; }
body{ margin:0; padding:14px 18px; background:#f6f4ee; color:#1e2a2a;
      font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; font-size:14px; }
h1{ margin:0; font-size:18px; font-weight:800; }
a{ color:#8a7327; font-weight:700; text-decoration:none; }
.top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:10px; }
.top .buttons{ display:flex; gap:6px; }
.btn, button{ background:#1e2a2a; color:#fff; border:0; border-radius:6px; padding:4px 12px;
      font-weight:700; font-size:13px; cursor:pointer; }
.btn.light{ background:#ece7da; color:#1e2a2a; }
.card{ background:#fffdf8; border:1px solid #ece7da; border-radius:14px; padding:16px 20px; margin-bottom:14px; }
.msg{ background:#fdecea; color:#c62828; border-radius:10px; padding:10px 14px; margin-bottom:10px; }

/* compact control box */
.bar{ padding:6px 12px; margin-bottom:8px; border-radius:10px; }
.controls{ display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; }
.controls div{ display:flex; align-items:center; gap:6px; }
.caption{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#8a938f; }
input, select{ padding:3px 7px; border:1px solid #d9d3c3; border-radius:6px; font:inherit; font-size:13px; background:#fff; }

/* one row per main meter */
.wrap{ overflow-x:auto; padding:0; }
table.compare{ width:100%; border-collapse:collapse; }
table.compare > thead th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
      color:#8a938f; padding:10px 14px; border-bottom:1px solid #ece7da; }
table.compare > tbody > tr > td{ vertical-align:top; padding:14px; border-bottom:1px solid #ece7da; }
table.compare > tbody > tr:last-child > td{ border-bottom:none; }
.empty, .none{ color:#8a938f; }
.empty{ padding:30px; text-align:center; }

/* left: the main meter, large */
td.main{ width:260px; background:#faf7ee; border-right:1px solid #ece7da; }
.main_tenant{ font-size:22px; font-weight:800; color:#1e2a2a; margin-bottom:2px; word-break:break-word; }
.main_id{ font-size:13px; font-weight:700; word-break:break-all; }
.main_id a{ color:#8a7327; }
.main_kwh{ font-size:26px; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums; }
.main_kwh small{ font-size:13px; color:#8a938f; font-weight:700; }
.main_place{ color:#8a938f; margin-top:4px; font-size:12px; }

/* right: user meters, one per line, then grand total and difference */
table.user_list{ width:100%; border-collapse:collapse; white-space:nowrap; }
table.user_list td{ padding:4px 8px; border-bottom:1px solid #f0ece0; }
table.user_list .stall{ color:#8a938f; }
table.user_list .num{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
table.user_list tr.grand td{ border-top:2px solid #1e2a2a; border-bottom:none; font-weight:800; padding-top:7px; }
table.user_list tr.diff td{ border-bottom:none; color:#8a938f; font-size:12px; }
table.user_list tr.diff.loss td{ color:#c62828; font-weight:800; }
.no_reading{ display:inline-block; padding:1px 7px; border-radius:6px; background:#fdecea;
             color:#c62828; font-size:12px; font-weight:600; }

/* phone: main above its user meters */
@media (max-width:640px){
    table.compare > thead{ display:none; }
    table.compare > tbody > tr > td{ display:block; width:auto; border-right:none; }
    td.main{ border-bottom:none !important; }
}

@media print{
    .noprint{ display:none; }
    body{ background:#fff; padding:0; }
}