/* ============================================================
   mobile.css — phone layer (loaded via <link media="(max-width:768px)">)
   Only applies on small screens; overrides the shared base
   (style.css + dashboard.css). Desktop is untouched.
   ============================================================ */

/* ---- App bar: collapse the 3-column grid to brand + actions ---- */
.appbar {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
}
.appbar-center { display: none; }      /* brand already links to the picker */
.appbar-brand { font-size: 16px; }
.appbar-user { display: none; }        /* free up room for the action buttons */
.appbar-actions { gap: 4px; }
.icon-btn { padding: 6px 9px; font-size: 12px; }

/* ---- Generic page padding ---- */
.container { padding: 24px 16px; }

/* ---- Auth / landing ---- */
.topbar { padding: 12px 16px; }
.hero { padding: 40px 18px; }
.hero h1 { font-size: 28px; }
.hero p { font-size: 15px; }
.cta { flex-direction: column; width: 100%; }
.cta .btn { width: 100%; }
.auth-card { margin: 28px auto; padding: 24px 20px; }

/* ---- Stack picker ---- */
.picker-wrap { padding: 22px 14px; }
.picker-head h1 { font-size: 20px; }
.stack-grid { grid-template-columns: 1fr; }

/* ---- Dashboard main ---- */
.main {
    padding: 16px 14px;
    padding-bottom: 96px;       /* clear the floating FAB */
    gap: 14px;
}
.view-head { gap: 10px; }
.view-head h1 { font-size: 20px; }
.range-pills { gap: 5px; }
.range-pills button { padding: 7px 12px; font-size: 12px; }   /* bigger tap target */

/* Two stat cards per row instead of auto-fit */
.cards { grid-template-columns: 1fr 1fr; gap: 10px; }
.card { padding: 12px 14px; }
.card .value { font-size: 19px; }

/* ---- Ledger: keep it as a horizontally-scrollable table ---- */
#ledger-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
}
table.ledger { font-size: 13px; }
table.ledger th, table.ledger td { padding: 8px 9px; }
/* Only the wide mobile-transactions table (it has a filter row) needs a min
   width to stay readable while scrolling; the general 4-col table can fit. */
table.ledger:has(.filter-row) { min-width: 780px; }

/* ---- Inventory: single column ---- */
.inventory-grid { grid-template-columns: 1fr; }

/* ---- Floating action button ---- */
.fab {
    bottom: 16px;
    inset-inline-end: 16px;
    padding: 13px 20px;
}

/* ---- Modal: roomier, stacked fields, full-width actions ---- */
.modal-backdrop { padding: 12px; align-items: flex-end; }   /* sheet-like */
.modal {
    padding: 18px 16px;
    max-width: 100%;
    max-height: 92vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.modal .row { flex-direction: column; gap: 12px; }
.modal-actions { flex-wrap: wrap; }
.modal-actions .btn { flex: 1 1 auto; }
.kv > div { font-size: 13px; }

/* Larger touch targets inside forms */
.modal select, .modal input, .modal textarea { padding: 11px 12px; font-size: 15px; }
.radio-group label { padding: 11px; }
.today-btn { padding: 0 16px; }