/* ═══════════════════════════════════════════════════════════════
   MOBILE DASHBOARD VIEW (< 768px) — stacked read-only cards.
   All rules scoped to body.fl-mobile (set by assets/windows_mobile.js)
   so desktop is never affected. Loads last (80 > 76) → wins the cascade.
   ═══════════════════════════════════════════════════════════════ */

/* let the page scroll naturally instead of the desktop app-shell clamp */
body.fl-mobile { overflow-y: auto; overflow-x: hidden; }

/* ── compact header ── */
body.fl-mobile .app-header { height: 48px; padding: 0 12px; }
body.fl-mobile .icon-btn { width: 40px; height: 40px; }
/* organisation tools are desktop-only (no dragging/arranging on a phone) */
body.fl-mobile .layout-menu-btn,
body.fl-mobile #btn-modules-menu { display: none; }

/* ── tab bar → touch-friendly page selector ── */
body.fl-mobile .page-tab-bar { height: 44px; overflow-x: auto; overflow-y: hidden; }
body.fl-mobile #page-tabs-container { gap: 8px; }
body.fl-mobile #page-tabs-container .tab { padding: 8px 16px; font-size: 13px; }
/* read-only: no rename/close/add affordances on mobile */
body.fl-mobile #page-tabs-container .tab-close,
body.fl-mobile #page-tabs-container .tab-add { display: none; }

/* ── window layer → vertical flow ── */
body.fl-mobile .desktop-container { height: auto; overflow: visible; }
body.fl-mobile #desktop {
  position: static; height: auto; min-height: 0; isolation: auto;
  display: flex; flex-direction: column; gap: 12px; padding: 12px;
}

/* ── stacked cards ── */
body.fl-mobile .fl-mcard {
  width: 100%; height: 340px; min-width: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
body.fl-mobile .fl-mcard-slot { height: 100%; }
body.fl-mobile .fl-mcard .panel-box { height: 100%; }

/* dense tables scroll horizontally INSIDE their card (never the page) */
body.fl-mobile .fx-content-container,
body.fl-mobile .we-content,
body.fl-mobile .yield-table-wrapper,
body.fl-mobile .wl-scroll,
body.fl-mobile .comp-scroll { overflow: auto; }

/* offcanvas full-width on narrow phones */
@media (max-width: 420px) {
  body.fl-mobile .bl-offcanvas { width: 100% !important; }
}