/* ==========================================================
   BuddySocial v10.23 - PIMP LIVE STREAM LAYOUT FIX
   Alleen indeling van de live-stream/Pimp sectie.
   ========================================================== */

/* Give the stream tab a clean vertical flow */
body[data-page="pimp_profile"] .pimp-stream-panel,
body[data-page="admin_pimp_profile"] .pimp-stream-panel{
  display:block !important;
  width:100% !important;
  max-width:none !important;
}

/* If the existing stream settings use a grid, balance it better */
body[data-page="pimp_profile"] .stream-settings-grid,
body[data-page="admin_pimp_profile"] .stream-settings-grid{
  display:grid !important;
  grid-template-columns:minmax(340px,.9fr) minmax(420px,1.1fr) !important;
  gap:12px !important;
  align-items:start !important;
  width:100% !important;
}

/* Make cards actually fill their available column */
body[data-page="pimp_profile"] .stream-settings-grid > *,
body[data-page="admin_pimp_profile"] .stream-settings-grid > *{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Player preview should span the full center area */
body[data-page="pimp_profile"] .integrated-stream-preview,
body[data-page="admin_pimp_profile"] .integrated-stream-preview{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
  margin:12px 0 !important;
  padding:10px !important;
}

body[data-page="pimp_profile"] .integrated-stream-preview > b,
body[data-page="admin_pimp_profile"] .integrated-stream-preview > b{
  display:block !important;
  margin:0 0 8px !important;
  color:#315f80 !important;
  font-size:12px !important;
}

/* Keep the actual preview player visually centered */
body[data-page="pimp_profile"] .integrated-stream-preview .profile-player,
body[data-page="admin_pimp_profile"] .integrated-stream-preview .profile-player{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Branding section must use the full width under the player */
body[data-page="pimp_profile"] .player-branding-studio,
body[data-page="admin_pimp_profile"] .player-branding-studio{
  width:100% !important;
  max-width:none !important;
  margin:12px 0 0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* Stronger section header */
body[data-page="pimp_profile"] .player-branding-head,
body[data-page="admin_pimp_profile"] .player-branding-head{
  min-height:44px !important;
  padding:9px 12px !important;
  box-sizing:border-box !important;
}

/* Main fix: use the wide available area instead of tiny boxes */
body[data-page="pimp_profile"] .player-branding-grid,
body[data-page="admin_pimp_profile"] .player-branding-grid{
  display:grid !important;
  grid-template-columns:minmax(360px,.85fr) minmax(520px,1.35fr) !important;
  gap:14px !important;
  align-items:stretch !important;
  width:100% !important;
  padding:12px !important;
  box-sizing:border-box !important;
}

/* Left branding settings card */
body[data-page="pimp_profile"] .player-branding-form,
body[data-page="admin_pimp_profile"] .player-branding-form{
  width:100% !important;
  min-width:0 !important;
  min-height:100% !important;
  padding:12px !important;
  box-sizing:border-box !important;
}

/* Right embed card */
body[data-page="pimp_profile"] .player-embed-builder,
body[data-page="admin_pimp_profile"] .player-embed-builder{
  width:100% !important;
  min-width:0 !important;
  min-height:100% !important;
  padding:12px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
}

/* Inputs fill the card cleanly */
body[data-page="pimp_profile"] .player-branding-form input[type="text"],
body[data-page="pimp_profile"] .player-branding-form input[type="file"],
body[data-page="admin_pimp_profile"] .player-branding-form input[type="text"],
body[data-page="admin_pimp_profile"] .player-branding-form input[type="file"]{
  width:100% !important;
  box-sizing:border-box !important;
}

/* Better logo preview */
body[data-page="pimp_profile"] .player-brand-logo-preview,
body[data-page="admin_pimp_profile"] .player-brand-logo-preview{
  display:grid !important;
  grid-template-columns:86px minmax(0,1fr) !important;
  gap:10px !important;
  align-items:center !important;
  padding:8px !important;
  margin:8px 0 !important;
}

body[data-page="pimp_profile"] .player-brand-logo-preview img,
body[data-page="admin_pimp_profile"] .player-brand-logo-preview img{
  width:82px !important;
  height:58px !important;
  object-fit:contain !important;
}

/* Embed textarea: large enough to actually read/copy the HTML */
body[data-page="pimp_profile"] .player-embed-builder textarea,
body[data-page="admin_pimp_profile"] .player-embed-builder textarea{
  width:100% !important;
  min-height:128px !important;
  max-height:220px !important;
  box-sizing:border-box !important;
  resize:vertical !important;
  margin:8px 0 !important;
  padding:9px !important;
  line-height:1.45 !important;
  font-size:10px !important;
}

/* Buttons no longer cramped */
body[data-page="pimp_profile"] .player-embed-actions,
body[data-page="admin_pimp_profile"] .player-embed-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin:2px 0 8px !important;
}

body[data-page="pimp_profile"] .player-embed-actions > *,
body[data-page="admin_pimp_profile"] .player-embed-actions > *{
  min-height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Readable helper text */
body[data-page="pimp_profile"] .player-embed-builder p,
body[data-page="pimp_profile"] .player-embed-builder small,
body[data-page="admin_pimp_profile"] .player-embed-builder p,
body[data-page="admin_pimp_profile"] .player-embed-builder small{
  line-height:1.5 !important;
  color:#60798b !important;
}

/* Live station info card: clean, compact, balanced */
body[data-page="pimp_profile"] .stream-live-info,
body[data-page="admin_pimp_profile"] .stream-live-info{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

body[data-page="pimp_profile"] .stream-live-info-grid,
body[data-page="admin_pimp_profile"] .stream-live-info-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:0 !important;
}

body[data-page="pimp_profile"] .stream-live-info-grid > div,
body[data-page="admin_pimp_profile"] .stream-live-info-grid > div{
  min-width:0 !important;
  padding:8px 10px !important;
  box-sizing:border-box !important;
}

body[data-page="pimp_profile"] .stream-live-info-grid strong,
body[data-page="admin_pimp_profile"] .stream-live-info-grid strong{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Tablet: keep two columns but less aggressive */
@media(max-width:1180px){
  body[data-page="pimp_profile"] .player-branding-grid,
  body[data-page="admin_pimp_profile"] .player-branding-grid{
    grid-template-columns:minmax(300px,.9fr) minmax(380px,1.1fr) !important;
  }
}

/* Mobile/tablet: stack neatly */
@media(max-width:900px){
  body[data-page="pimp_profile"] .stream-settings-grid,
  body[data-page="admin_pimp_profile"] .stream-settings-grid,
  body[data-page="pimp_profile"] .player-branding-grid,
  body[data-page="admin_pimp_profile"] .player-branding-grid{
    grid-template-columns:1fr !important;
  }

  body[data-page="pimp_profile"] .player-branding-grid,
  body[data-page="admin_pimp_profile"] .player-branding-grid{
    padding:8px !important;
    gap:8px !important;
  }

  body[data-page="pimp_profile"] .player-embed-builder textarea,
  body[data-page="admin_pimp_profile"] .player-embed-builder textarea{
    min-height:112px !important;
  }

  body[data-page="pimp_profile"] .stream-live-info-grid,
  body[data-page="admin_pimp_profile"] .stream-live-info-grid{
    grid-template-columns:1fr 1fr !important;
  }
}

@media(max-width:560px){
  body[data-page="pimp_profile"] .stream-live-info-grid,
  body[data-page="admin_pimp_profile"] .stream-live-info-grid{
    grid-template-columns:1fr !important;
  }

  body[data-page="pimp_profile"] .player-brand-logo-preview,
  body[data-page="admin_pimp_profile"] .player-brand-logo-preview{
    grid-template-columns:64px minmax(0,1fr) !important;
  }

  body[data-page="pimp_profile"] .player-brand-logo-preview img,
  body[data-page="admin_pimp_profile"] .player-brand-logo-preview img{
    width:60px !important;
    height:46px !important;
  }
}