/* ==============================================================
   FLN System - Responsive overrides
   (component + layout files already carry their own breakpoints;
   this file covers cross-cutting/page-level adjustments)
============================================================== */

/* ---------- Tables: horizontal scroll hint on small screens ---------- */
@media (max-width: 767.98px) {
  .table-responsive {
    position: relative;
  }
  .table-responsive::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; width: 18px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(0,0,0,.05));
    pointer-events: none;
  }
  .table-report th, .table-report td { font-size: .82rem; padding: 8px 8px; }
}

/* ---------- Forms: stack filter rows nicely on phones ---------- */
@media (max-width: 575.98px) {
  form .row.g-2 > [class^="col-"], form .row.g-2 > [class*=" col-"] {
    margin-bottom: 4px;
  }
  .card-body { padding: 14px; }
  .card-header { padding: 12px 14px; font-size: .95rem; }
}

/* ---------- Dashboard stat grid: 2-up on phones, 4-up on desktop (handled by Bootstrap col-6/col-md-3 already) ---------- */
@media (max-width: 380px) {
  .stat-card h2 { font-size: 1.5rem; }
  .stat-card .label { font-size: .74rem; }
  .stat-card i.bg-icon { font-size: 2.6rem; }
}

/* ---------- Admin filter forms: buttons full-width on mobile ---------- */
@media (max-width: 575.98px) {
  .row.g-2.align-items-end > .col-md-2 > .btn,
  .row.g-2.align-items-end > .col-md-1 > .btn {
    width: 100%;
  }
}

/* ---------- Nice touch targets on touch devices ---------- */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-link, .tab-btn, .statement-item { min-height: 44px; }
}

/* ---------- Utility: hide on mobile / show on mobile only ---------- */
.d-mobile-only { display: none; }
@media (max-width: 767.98px) {
  .d-mobile-only { display: block; }
  .d-desktop-only { display: none !important; }
}