/* =====================================================================
   Responsive overrides — Marketing-Panel CRM Web
   Loaded AFTER vendor/css/core.css and css/site.css (see _Styles.cshtml).
   Bootstrap 5 + Sneat. Do not edit core.css; override here.
   ===================================================================== */

/* ---- Page header: title left, actions right, wraps on small screens ---- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
@media (max-width: 575.98px) {
  .page-header { align-items: flex-start; }
}

/* ---- Action / tool bar: row of buttons & selects that always wraps ---- */
.action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ---- Tighten content gutters on phones (layout default container ms-7 me-7) ---- */
@media (max-width: 575.98px) {
  .content-wrapper > div > .ms-7.me-7,
  .content-wrapper > .ms-7.me-7 {
    margin-inline: 1rem;
  }
}

/* ---- Table swipe affordance: right-edge fade only for touch + small screens ----
   Visual cue that the wrapped table scrolls horizontally. Pure CSS; never shows on
   screens where the table fits, because fade only appears while wrapper overflows. */
@media (hover: none) and (max-width: 767.98px) {
  .table-responsive { position: relative; }
  .table-responsive::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    width: 1.5rem;
    pointer-events: none;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
  }
}

/* ---- Optional explicit "swipe" hint chip (add in markup where useful) ---- */
.table-scroll-hint {
  font-size: 0.75rem;
  color: #6c757d;
  text-align: right;
  padding: 0.25rem 0.5rem;
}