/* ============================================================
   Fantasy Adda — Mobile responsive layer (loaded only ≤768px)
   Makes the REAL desktop UI usable on phones. Desktop untouched.
   (Base responsive rules also live in styles.css @media ≤768px.)
   ============================================================ */

/* CRITICAL: the toast container is a large fixed overlay — it must never
   intercept taps, or every button "stops working". */
.toast-container { pointer-events: none !important; }
.toast { pointer-events: auto; }

/* The abandoned custom mobile app + its nav/FAB are not used — hide them. */
#mApp { display: none !important; }
.mobile-bottom-nav, .mobile-fab { display: none !important; }

/* Inputs ≥16px so iOS doesn't zoom when focusing a field. */
input, select, textarea, .form-control { font-size: 16px !important; }
.form-control { min-height: 46px; }

/* ── Data tables → stacked, labelled cards ──────────────────────
   Same columns/data as desktop, but readable on a phone.
   App._labelizeTables() copies each <th> onto its cells as data-label. */
.table-wrapper, .table-scroll { overflow: visible !important; }
.table-scroll { max-height: none !important; }
.table-wrapper table, .table-scroll table { min-width: 0 !important; width: 100%; }

.table-wrapper thead, .table-scroll thead { display: none; }
.table-wrapper tbody, .table-wrapper tr, .table-wrapper td,
.table-scroll  tbody, .table-scroll  tr, .table-scroll  td { display: block; width: auto; }

.table-wrapper tr, .table-scroll tr {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  margin: 0 0 10px;
  padding: 4px 14px;
}
.table-wrapper td, .table-scroll td {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 10px 0; border: none !important;
  text-align: right; font-size: 14px; min-height: 0;
}
.table-wrapper td:not(:last-child),
.table-scroll  td:not(:last-child) { border-bottom: 1px solid var(--card-border) !important; }
.table-wrapper td::before, .table-scroll td::before {
  content: attr(data-label);
  color: var(--text-3); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  text-align: left; flex-shrink: 0;
}
.table-wrapper td:empty, .table-scroll td:empty { display: none; }
.table-wrapper td[colspan], .table-scroll td[colspan] { justify-content: space-between; font-weight: 700; }
.table-wrapper td[colspan]::before, .table-scroll td[colspan]::before { content: ''; }
/* keep action buttons inside a card row tappable */
.table-wrapper td .btn, .table-wrapper td button,
.table-scroll  td .btn, .table-scroll  td button { min-width: 40px; min-height: 40px; }

/* Sidebar drawer: make sure the open state actually slides in. */
.sidebar.mobile-open { transform: translateX(0) !important; }

/* Collapsible filter/search panel (closed by default; toggle to open). */
.filter-bar.filter-collapsed { display: none !important; }
.filter-toggle-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px; margin-bottom: 14px;
  border: 1px solid var(--card-border); background: var(--card);
  border-radius: 12px; font-size: 15px; font-weight: 700;
  color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.filter-toggle-btn i { color: var(--primary); }
.filter-toggle-btn.open { background: var(--card-2); }

/* Topbar: drop the breadcrumb (the big page <h1> already names the page) so the
   dashboard date pills + export + add fit without overlapping. */
.topbar .breadcrumb { display: none; }
.topbar-left { flex: 0 0 auto; }
.topbar-right { flex: 1 1 auto; min-width: 0; gap: 6px; justify-content: flex-end; }
#topbarExtra > div { overflow-x: auto; flex: 1 1 auto; min-width: 0; scrollbar-width: none; }
#topbarExtra > div::-webkit-scrollbar { display: none; }
#exportBtn .btn-label, #topbarActionBtn .btn-label { display: none; }
#exportBtn, #topbarActionBtn { padding: 8px 11px; min-width: 40px; }