/* Owner portal: on top of admin.css, made for phones first. */
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.neg { color: var(--danger); }
.pad { padding: 16px 20px 0; }
h2.pad { margin-bottom: 8px; }
.period { margin: -8px 0 16px; }
.filters.card { padding: 12px; }
.stat b { font-size: 24px; font-variant-numeric: tabular-nums; }
tr.deleted td { opacity: .55; }
.bars { display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
progress.bar { width: 100%; height: 12px; appearance: none; border: 0; border-radius: 6px; background: var(--bg); overflow: hidden; }
progress.bar::-webkit-progress-bar { background: var(--bg); border-radius: 6px; }
progress.bar::-webkit-progress-value { background: var(--accent); border-radius: 6px; }
progress.bar::-moz-progress-bar { background: var(--accent); border-radius: 6px; }
.inline-form .check { color: var(--text); }

@media (max-width: 700px) {
    .container { padding: 16px 12px 40px; }
    .topbar { gap: 8px; }
    .topbar nav { order: 3; flex: 1 0 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
    .topbar nav a { white-space: nowrap; }
    .topbar .user { margin-left: auto; }
    .topbar .user .muted { display: none; }
    .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat { padding: 12px; }
    .stat b { font-size: 19px; }
    .grid2 { grid-template-columns: 1fr; }
    .filters input, .filters select { flex: 1 1 45%; }
    th, td { padding: 8px 10px; }
    /* Long tables become one card per row. */
    table.responsive thead { display: none; }
    table.responsive tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
    table.responsive td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 14px; text-align: right; }
    table.responsive td::before { content: attr(data-label); color: var(--muted); text-align: left; }
    table.responsive td:not([data-label])::before { content: none; }
    table.responsive td:not([data-label]) { display: block; text-align: left; }
}