/* StreetNoise Mobile Responsive Layer V51
   Desktop rules are untouched. These overrides activate only on tablets/phones. */

@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  *, *::before, *::after { min-width: 0; }
  img, video, iframe, canvas, svg { max-width: 100%; height: auto; }

  .wrap, .container, .shell, .page, .pageWrap, .mainWrap, .dashboard,
  .dashboardWrap, .profileWrap, .contentWrap, main { width: 100% !important; max-width: 100% !important; }

  .hero, .layout, .content, .mainGrid, .pageGrid, .dashboardGrid,
  .profileGrid, .accountGrid, .adminGrid, .twoCol, .threeCol,
  .heroInner, .heroContent, .accountCard, .snLabelAccountGrid,
  .snLabelControlGrid, .snLabelCatalogGrid, .snLabelRosterGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .topbar, .topBar, .top, .header, .siteHeader, .nav, .navbar,
  .navLinks, .navActions, .tabs, .tabbar, .department-tabs,
  .departmentTabs, .hubNav, .profileNav, .adminNav {
    max-width: 100%;
  }

  .metrics, .statsGrid, .metricGrid, .summaryGrid, .cardGrid,
  .command-grid, .commandGrid, .analyticsGrid, .salesGrid,
  .royaltyGrid, .financialGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .heroLeft, .heroRight, .heroCopy, .heroContent, .heroInner { min-height: auto !important; }
  .heroRight { order: 2; }
  .heroLeft { order: 1; }

  table { max-width: 100%; }
}

@media (max-width: 768px) {
  :root { --sn-mobile-pad: 12px; }

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-size: 14px; }

  .wrap, .container, .shell, .page, .pageWrap, .mainWrap, .dashboard,
  .dashboardWrap, .profileWrap, .contentWrap, main {
    padding-left: var(--sn-mobile-pad) !important;
    padding-right: var(--sn-mobile-pad) !important;
  }

  .panel, .card, .command-card, .section, .module, .box,
  .snLabelCard, .snLabelPanel, .accountCard, .heroGate {
    border-radius: 12px !important;
  }

  .panel, .card, .command-card, .section, .module, .box,
  .snLabelCard, .snLabelPanel, .accountCard {
    padding: 12px !important;
  }

  h1 { font-size: clamp(30px, 10vw, 46px) !important; line-height: 1 !important; letter-spacing: -1px !important; overflow-wrap: anywhere; }
  h2 { font-size: clamp(20px, 6vw, 30px) !important; overflow-wrap: anywhere; }
  h3 { overflow-wrap: anywhere; }
  p, li, td, th, label, small, span { overflow-wrap: anywhere; }

  /* Phone navigation stays usable without crushing every button. */
  .topbar, .topBar, .top, .siteHeader, .navbar, .nav, .navLinks,
  .navActions, .tabs, .tabbar, .department-tabs, .departmentTabs,
  .hubNav, .profileNav, .adminNav, header nav {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .topbar > *, .topBar > *, .navbar > *, .nav > *, .navLinks > *,
  .navActions > *, .tabs > *, .tabbar > *, .department-tabs > *,
  .departmentTabs > *, header nav > * { flex: 0 0 auto; }

  .tab, .btn, button, input[type="submit"], input[type="button"],
  .command-btn, .smallBtn, .navActionBtn, .snLabelBtn {
    min-height: 42px !important;
    max-width: 100%;
    white-space: normal !important;
    line-height: 1.15 !important;
  }

  input, select, textarea, button { font-size: 16px !important; }
  input, select, textarea { width: 100% !important; max-width: 100% !important; }
  textarea { min-height: 110px; }

  form, fieldset { max-width: 100%; }
  .grid, .formGrid, .form-grid, .fields, .fieldGrid, .inputGrid,
  .rules, .statsGrid, .metrics, .metricGrid, .summaryGrid,
  .cardGrid, .command-grid, .commandGrid, .analyticsGrid,
  .salesGrid, .royaltyGrid, .financialGrid, .galleryGrid,
  .releaseGrid, .productGrid, .beatGrid, .leaseGrid,
  .accountGuideSteps, .snLabelControlGrid, .snLabelCatalogGrid,
  .snLabelRosterGrid, .snLabelFormGrid, .snUpgradeTop,
  .snUpgradeActions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .field.full, .sectionTitle { grid-column: auto !important; }

  .hero, .heroInner, .heroContent, .profileHero, .profileHeader,
  .accountGuideIntro, .sn-header, .playerHeader, .accountCard {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .heroContent, .heroInner, .heroCopy { padding: 22px 14px !important; text-align: left; }
  .heroLogo { width: min(150px, 55vw) !important; }
  .profilePhoto, .profileImage, .avatar, .artistPhoto {
    width: min(170px, 48vw) !important;
    height: min(170px, 48vw) !important;
    align-self: flex-start;
  }

  .content, .layout, .mainGrid, .pageGrid, .dashboardGrid,
  .profileGrid, .accountGrid, .adminGrid, .twoCol, .threeCol {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .beat, .product, .releaseCard, .catalogCard, .trackCard {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .beat img, .product img, .releaseCard img, .catalogCard img,
  .trackCard img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; }

  #snPlayer, .player, .universalPlayer { width: 100% !important; }
  .sn-header, .playerHeader { gap: 12px !important; }
  .sn-artwork, .playerArtwork { width: 120px !important; height: 120px !important; }
  #sn-title, .playerTitle { font-size: 22px !important; }
  .sn-progress-wrap, .sn-volume, .playerProgress, .playerVolume { width: 100% !important; }
  #sn-volume { width: 100% !important; }
  .sn-controls, .sn-actions, .beatActions, .actions, .gateActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
  }
  .sn-controls > *, .sn-actions > *, .beatActions > *, .actions > *, .gateActions > * { width: 100% !important; margin: 0 !important; }

  /* Tables scroll inside themselves instead of widening the whole page. */
  table, .table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table th, table td, .table th, .table td { padding: 9px 8px !important; }

  /* Command Center mobile shell. */
  body .layout { padding: 10px !important; }
  .sn-mobile-command-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(5,5,5,.96);
    backdrop-filter: blur(8px);
  }
  .sn-mobile-command-tools button {
    background: #171717;
    color: #fff;
    border: 1px solid #444;
    border-radius: 9px;
    font-weight: 900;
    text-transform: uppercase;
  }
  .sn-mobile-side-panel { display: none !important; }
  .sn-mobile-side-panel.sn-mobile-panel-open { display: block !important; }
  .sn-mobile-main-panel { display: block !important; width: 100% !important; }

  /* Account backends */
  .sidebar, aside { max-width: 100% !important; }
  .content { padding: 0 !important; }
  .profileImage { flex-shrink: 0; }

  /* Hard Copy and checkout */
  .heroGate { padding: 20px 14px !important; }
  .heroGate h1 { font-size: 36px !important; }
  .rules { gap: 10px !important; }

  /* Prevent long IDs, emails and URLs from forcing overflow. */
  code, pre, .mono, [class*="Id"], [class*="Code"] { overflow-wrap: anywhere; word-break: break-word; }
}

@media (max-width: 480px) {
  :root { --sn-mobile-pad: 9px; }
  body { font-size: 13px; }
  .panel, .card, .command-card, .section, .module, .box,
  .snLabelCard, .snLabelPanel, .accountCard { padding: 10px !important; }
  .metrics, .statsGrid, .metricGrid, .summaryGrid, .cardGrid,
  .command-grid, .commandGrid { grid-template-columns: minmax(0, 1fr) !important; }
  .sn-controls, .sn-actions, .beatActions, .actions, .gateActions { grid-template-columns: minmax(0, 1fr) !important; }
  .profilePhoto, .profileImage, .avatar, .artistPhoto { width: 132px !important; height: 132px !important; }
  .sn-artwork, .playerArtwork { width: 105px !important; height: 105px !important; }
  .heroContent, .heroInner, .heroCopy { padding: 18px 10px !important; }
}