/* ======================================================
   WheelSpinPro — Responsive Overrides
   Mobile-only rules. Zero desktop impact.
   All rules are inside max-width media queries.
   ====================================================== */

/* ─── MOBILE NAV — COLLAPSIBLE SECTIONS ──────────────────────── */

/* Chevron icon inside collapse toggles (e.g. More Tools in offcanvas nav) */
.nav-collapse-icon {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}
[aria-expanded="true"] .nav-collapse-icon {
  transform: rotate(180deg);
}

/* ─── GLOBAL ──────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Card headers using d-flex wrap cleanly instead of overflowing */
  .card-header.d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Page header action column: left-align on mobile instead of text-end */
  .page-header-actions {
    text-align: start !important;
    margin-top: 0.5rem;
  }


}

/* ─── ADMIN LAYOUT ────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Hide "Welcome, Admin" text to save navbar space */
  .admin-welcome-text {
    display: none !important;
  }

  /* Remove forced column widths on action columns in admin tables */
  .admin-blog-table th:last-child,
  .admin-users-table th:last-child {
    width: auto !important;
  }

  /* Admin top navbar: tighter layout */
  .navbar-admin .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ─── ADMIN BLOG TABLE ────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Hide Author (2), Published (4), Created (5) */
  .admin-blog-table th:nth-child(2),
  .admin-blog-table td:nth-child(2),
  .admin-blog-table th:nth-child(4),
  .admin-blog-table td:nth-child(4),
  .admin-blog-table th:nth-child(5),
  .admin-blog-table td:nth-child(5) {
    display: none;
  }
}

/* ─── ADMIN USERS TABLE ───────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Hide Email (2), Created (4) */
  .admin-users-table th:nth-child(2),
  .admin-users-table td:nth-child(2),
  .admin-users-table th:nth-child(4),
  .admin-users-table td:nth-child(4) {
    display: none;
  }
}

/* ─── USER HISTORY TABLE ──────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Hide Wheel Type (3) and List (4) — date, winners, actions remain */
  .history-table th:nth-child(3),
  .history-table td:nth-child(3),
  .history-table th:nth-child(4),
  .history-table td:nth-child(4) {
    display: none;
  }

  /* Compact date cell — no wrapping */
  .history-table td:nth-child(2) {
    white-space: nowrap;
    font-size: 0.8rem;
  }

  /* Clip long winner badge text */
  .history-table .badge {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }
}

/* History filter buttons: centered on mobile */
@media (max-width: 767.98px) {
  .history-filter-form .filter-btn-wrap {
    justify-content: center;
  }

  /* Hide the blank spacer label above filter buttons */
  .history-filter-form .filter-btn-label {
    display: none;
  }
}

/* ─── USER LISTS TABLE ────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Hide Tags (3), Options (4), Created (5) — Name, Items, Actions remain */
  .lists-table th:nth-child(3),
  .lists-table td:nth-child(3),
  .lists-table th:nth-child(4),
  .lists-table td:nth-child(4),
  .lists-table th:nth-child(5),
  .lists-table td:nth-child(5) {
    display: none;
  }

  /* Items preview panel: hide expanded badge view on mobile — too many lines */
  .lists-table .items-preview-panel {
    display: none !important;
  }

  /* Prevent the "X items" toggle button from wrapping */
  .lists-table .items-preview-toggle {
    white-space: nowrap;
  }
}

/* ─── USER PROFILE TABS ───────────────────────────────────────── */

@media (max-width: 575.98px) {
  /* Scrollable tab bar — no line-wrap, horizontal scroll */
  #profileTabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #profileTabs::-webkit-scrollbar {
    display: none;
  }

  #profileTabs .nav-link {
    padding: 0.4rem 0.625rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  /* Hide text labels on small phones — icon-only tabs */
  #profileTabs .tab-label {
    display: none;
  }
}

/* ─── USER DASHBOARD ──────────────────────────────────────────── */

@media (max-width: 575.98px) {
  /* Stat cards: tighter padding on phones */
  .stat-card .card-body {
    padding: 0.625rem !important;
  }

  .stat-card h2.fw-bold {
    font-size: 1.4rem;
  }
}

@media (max-width: 767.98px) {
  /* Quick Launch "New List" button: remove ms-auto so it wraps naturally */
  .quick-launch-btn-new {
    margin-left: 0 !important;
  }
}

/* ─── USER CONFIGS GRID ───────────────────────────────────────── */

/* No CSS needed — handled by col-sm-6 col-md-4 in HTML */

/* ─── PUBLIC PAGES — CONTAINER PADDING CONSISTENCY ───────────── */

@media (max-width: 767.98px) {
  /* Standardise all containers to 1rem side padding on mobile
     (matches the navbar's container px-3 = 1rem each side) */
  .container,
  .container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ─── FOOTER — MOBILE LAYOUT ──────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Reduce the large pt-7 on mobile */
  footer.bg-dark {
    padding-top: 2.5rem !important;
  }
}

@media (max-width: 575.98px) {
  /* Sticky bottom ad: ensure it doesn't block content */
  .bottom-sticky-ad {
    z-index: 1020;
  }
}

@media (max-width: 767.98px) {
  /* Sticky bottom ad */
  .bottom-sticky-ad {
    z-index: 1020;
  }

  /* Blog cards grid: single column on small phones */
  .blog-card-grid .col-md-6,
  .blog-card-grid .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ─── FLOATING SUPPORT BUTTON — MOBILE ───────────────────────── */

@media (max-width: 767.98px) {
  /* Raise above Android Chrome bottom nav bar (~56px) and iOS home indicator.
     env(safe-area-inset-bottom) = 0 on Android, ~34px on iPhone with notch.
     max() picks whichever keeps the button clear of browser chrome. */
  #wspSupportFloat {
    bottom: max(72px, calc(16px + env(safe-area-inset-bottom)));
    right: 12px;
    font-size: .75rem;
    padding: .45rem .9rem .45rem .65rem;
  }
}