/*
  CUBE — Global Mobile Fixes
  Loaded LAST on every page, after every other stylesheet.
  Everything here is wrapped in @media queries — desktop/laptop layout
  is completely untouched. This exists because most page-specific CSS
  files were built desktop-first and never got mobile breakpoints for
  their own unique layouts (two-column grids, wide tables, side-by-side
  forms, etc).
*/

@media (max-width: 992px) {
  .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px !important;
    max-width: 82vw;
    overflow-y: auto;
  }

  .main-section {
    width: 100% !important;
    max-width: 100vw;
  }

  .dashboard {
    display: block !important;
  }

  /* sidebar-title was wrapping letter-by-letter into a vertical strip
     — it needs a real width to wrap words normally, not characters */
  .sidebar-title {
    width: 100%;
    white-space: normal;
    word-break: normal;
  }
}

@media (max-width: 768px) {

  /* ============ BASE PAGE STRUCTURE ============ */
  .page-content {
    padding: 14px !important;
  }

  .top-navbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px !important;
  }

  .search-bar,
  .pl-search-form,
  .people-search-form,
  .skill-search-form {
    width: 100%;
  }

  /* ============ TWO-COLUMN LAYOUTS -> STACK ============ */
  .content-grid,
  .profile-body-grid {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  .right-sidebar {
    margin-top: 16px;
    width: 100%;
  }

  /* ============ HERO / STATS ROWS -> STACK ============ */
  .skills-hero,
  .leaderboard-header,
  .people-header,
  .pl-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left;
    gap: 14px;
  }

  .skills-hero-stats,
  .lb-summary-stats,
  .profile-stats {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /* ============ GRIDS -> FEWER COLUMNS ============ */
  .people-grid,
  .popular-skills-grid,
  .achievement-grid,
  .creator-mini-grid,
  .skill-category-accordion .skill-chip-grid {
    grid-template-columns: 1fr !important;
  }

  .image-grid,
  .collab-image-upload-row {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ============ PROJECT / COLLAB FEED CARDS ============ */
  .project-feed-card {
    flex-direction: column !important;
  }

  .pfc-thumb {
    width: 100% !important;
    height: 180px !important;
  }

  /* ============ FORMS: FULL WIDTH, STACKED ACTIONS ============ */
  .field-row,
  .edit-field-row {
    grid-template-columns: 1fr !important;
  }

  .form-actions,
  .confirm-actions {
    flex-direction: column-reverse;
  }

  .form-actions a,
  .form-actions button,
  .confirm-actions a,
  .confirm-actions button,
  .btn-publish,
  .btn-cancel,
  .submit-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* ============ TAG-PEOPLE SEARCH: FULL WIDTH DROPDOWN ============ */
  .tag-search-wrap,
  .tag-suggestion-dropdown {
    width: 100%;
  }

  /* ============ LEADERBOARD TABLE: HORIZONTAL SCROLL, NOT SQUASH ============ */
  .lb-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .lb-table {
    min-width: 620px;
  }

  /* ============ PODIUM: STACK INSTEAD OF 3-ACROSS ============ */
  .podium {
    grid-template-columns: 1fr !important;
  }

  /* ============ AUTH PAGES (login/register): SHOWCASE ALREADY HIDDEN, TIGHTEN FORM PANEL ============ */
  .form-panel {
    padding: 28px 20px !important;
  }

  .mobile-input .country-code {
    padding: 12px 10px;
  }

  /* ============ SIDEBAR TEAM / PEOPLE ROWS: DON'T OVERFLOW ============ */
  .team-member-card,
  .person-row,
  .pfc-creator {
    flex-wrap: wrap;
  }

  /* ============ DASHBOARD ROOT: NO STRAY HORIZONTAL SCROLL ============ */
  .dashboard {
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
  }
}

@media (max-width: 480px) {
  .banner-content {
    text-align: center;
    gap: 16px !important;
  }

  .avatar-ring {
    margin: 0 auto;
  }

  .profile-chip-row {
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .pchip {
    padding: 8px 14px !important;
  }

  .profile-action-row {
    gap: 12px !important;
    margin-top: 18px !important;
  }

  .edit-profile-btn,
  .logout-btn {
    width: 100%;
    justify-content: center;
  }

  .profile-stats {
    gap: 12px !important;
  }

  .pstat-card {
    padding: 16px 18px !important;
  }

  .profile-tabs {
    gap: 8px !important;
  }

  .avatar-ring,
  .avatar-ring:hover {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .profile-chip-row {
    gap: 10px !important;
    margin-top: 12px !important;
  }

  .pchip {
    padding: 8px 14px !important;
  }

  .social-links {
    gap: 12px !important;
  }

  .skills-hero-stats,
  .lb-summary-stats {
    gap: 14px;
  }

  .hero-stat h2,
  .lb-summary-stat h2 {
    font-size: 19px !important;
  }

  .image-grid,
  .collab-image-upload-row {
    grid-template-columns: 1fr !important;
  }

  .creator-mini-grid,
  .achievement-grid {
    grid-template-columns: 1fr !important;
  }

  .page-content {
    padding: 10px !important;
  }

  .quick-links a {
    padding: 14px 10px !important;
  }
}