/* styles for location_usage_monthly.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; }

/* compact control box: caption and value on one line */
.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; }

/* text columns left, kWh columns (.num) right */
.wrap{ overflow-x:auto; padding:0; }
table{ width:100%; border-collapse:collapse; white-space:nowrap; }
th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
    color:#8a938f; padding:10px 12px; border-bottom:1px solid #ece7da; }
td{ text-align:left; padding:7px 12px; border-bottom:1px solid #f0ece0; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }
tbody tr:hover td{ background:#f3eedf; }

/* daily chart: one column per day of the month, tallest bar = 100px */
.chart{ padding:8px 12px 6px; }
.chart .head{ display:flex; justify-content:space-between; margin-bottom:6px; }
.bars{ display:flex; align-items:flex-end; gap:2px; height:115px; padding-top:14px;   /* border-box: 14 label room + 100 bars + 1 border */ border-bottom:1px solid #d9d3c3; }
.col{ flex:1; height:100%; display:flex; align-items:flex-end; position:relative; }
.col i{ display:block; width:100%; background:#8a7327; border-radius:4px 4px 0 0; min-height:1px; }
.col:hover i{ background:#1e2a2a; }
.col .tip{ display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:4px;
           background:#1e2a2a; color:#fff; padding:3px 7px; border-radius:5px; font-size:12px; white-space:nowrap; z-index:2; }
.col:hover .tip{ display:block; }
.col .peak{ position:absolute; left:50%; transform:translateX(-50%); font-size:10px; color:#5b6662; }
.col:hover .peak{ display:none; }
.days{ display:flex; gap:2px; margin-top:3px; }
.days span{ flex:1; text-align:center; font-size:10px; color:#8a938f; }
@media (max-width:640px){ .days span:nth-child(odd){ visibility:hidden; } }
tfoot td{ font-weight:800; border-top:2px solid #ece7da; border-bottom:0; }
.none{ color:#c0532e; font-weight:400; }
.msg{ background:#f8ece4; color:#c0532e; border-radius:10px; padding:10px 14px; margin-bottom:14px; font-weight:600; }
.empty{ padding:30px; text-align:center !important; color:#8a938f; }

@media (max-width:640px){ body{ padding:12px; } }
@media print{
    body{ background:#fff; padding:0; }
    .noprint{ display:none !important; }
    .card{ border:0; padding:6px 0; }
    th, td{ padding:4px 6px; }
}