/* ==========================================================
   BuddySocial v10.25 - STREAM STUDIO GRID FIX
   Gerichte fix voor het Live stream Pimp-gedeelte.
   ========================================================== */

/* This is the real parent layout of the stream tab. */
body[data-page="pimp_profile"] .stream-studio,
body[data-page="admin_pimp_profile"] .stream-studio{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:14px !important;
  align-items:start !important;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}

/* Settings left */
body[data-page="pimp_profile"] .stream-studio > .stream-main-form,
body[data-page="admin_pimp_profile"] .stream-studio > .stream-main-form{
  grid-column:1 !important;
  grid-row:1 !important;
  min-width:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
}

/* Metadata right */
body[data-page="pimp_profile"] .stream-studio > .stream-meta-card,
body[data-page="admin_pimp_profile"] .stream-studio > .stream-meta-card{
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
}

/* Preview must span full width */
body[data-page="pimp_profile"] .stream-studio > .integrated-stream-preview,
body[data-page="admin_pimp_profile"] .stream-studio > .integrated-stream-preview{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  margin:0 !important;
}

/* Player Studio must ALSO span full width: this is the key fix. */
body[data-page="pimp_profile"] .stream-studio > .player-branding-studio,
body[data-page="admin_pimp_profile"] .stream-studio > .player-branding-studio{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  margin:0 !important;
  justify-self:stretch !important;
}

/* Make the studio itself use the broad space properly */
body[data-page="pimp_profile"] .stream-studio > .player-branding-studio .player-studio-grid,
body[data-page="admin_pimp_profile"] .stream-studio > .player-branding-studio .player-studio-grid{
  display:grid !important;
  grid-template-columns:minmax(360px,.9fr) minmax(0,1.45fr) !important;
  gap:16px !important;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}

/* Prevent inherited widths from shrinking either card */
body[data-page="pimp_profile"] .player-studio-grid > .player-studio-card,
body[data-page="admin_pimp_profile"] .player-studio-grid > .player-studio-card{
  min-width:0 !important;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}

/* Give the embed side more useful horizontal space */
body[data-page="pimp_profile"] .player-studio-grid > .embed-card,
body[data-page="admin_pimp_profile"] .player-studio-grid > .embed-card{
  min-width:0 !important;
}

/* Code area should visibly use the available width */
body[data-page="pimp_profile"] .embed-card .player-code-card,
body[data-page="admin_pimp_profile"] .embed-card .player-code-card,
body[data-page="pimp_profile"] .embed-card textarea,
body[data-page="admin_pimp_profile"] .embed-card textarea{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Keep the 3 steps even and readable */
body[data-page="pimp_profile"] .embed-card .player-embed-steps,
body[data-page="admin_pimp_profile"] .embed-card .player-embed-steps{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  width:100% !important;
}

/* Give stream settings form a cleaner internal width */
body[data-page="pimp_profile"] .stream-main-form input,
body[data-page="pimp_profile"] .stream-main-form textarea,
body[data-page="pimp_profile"] .stream-main-form select,
body[data-page="admin_pimp_profile"] .stream-main-form input,
body[data-page="admin_pimp_profile"] .stream-main-form textarea,
body[data-page="admin_pimp_profile"] .stream-main-form select{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* Tablet */
@media(max-width:1100px){
  body[data-page="pimp_profile"] .stream-studio > .player-branding-studio .player-studio-grid,
  body[data-page="admin_pimp_profile"] .stream-studio > .player-branding-studio .player-studio-grid{
    grid-template-columns:minmax(300px,.95fr) minmax(0,1.2fr) !important;
  }
}

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

  body[data-page="pimp_profile"] .stream-studio > .stream-main-form,
  body[data-page="pimp_profile"] .stream-studio > .stream-meta-card,
  body[data-page="pimp_profile"] .stream-studio > .integrated-stream-preview,
  body[data-page="pimp_profile"] .stream-studio > .player-branding-studio,
  body[data-page="admin_pimp_profile"] .stream-studio > .stream-main-form,
  body[data-page="admin_pimp_profile"] .stream-studio > .stream-meta-card,
  body[data-page="admin_pimp_profile"] .stream-studio > .integrated-stream-preview,
  body[data-page="admin_pimp_profile"] .stream-studio > .player-branding-studio{
    grid-column:1 !important;
    grid-row:auto !important;
  }

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

@media(max-width:600px){
  body[data-page="pimp_profile"] .embed-card .player-embed-steps,
  body[data-page="admin_pimp_profile"] .embed-card .player-embed-steps{
    grid-template-columns:1fr !important;
  }
}


/* ==========================================================
   BuddySocial v10.29 - STREAM COLLAPSE LAYOUT HOTFIX
   No empty left column when Stream settings is collapsed.
   ========================================================== */

/* Default/collapsed layout: one clean vertical column. */
body[data-page="pimp_profile"] .stream-studio.stream-settings-collapsed,
body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-collapsed{
  grid-template-columns:1fr !important;
  gap:12px !important;
}

/* Compact Stream settings bar spans the full width. */
body[data-page="pimp_profile"] .stream-studio.stream-settings-collapsed > .stream-main-form,
body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-collapsed > .stream-main-form{
  grid-column:1 !important;
  grid-row:auto !important;
  width:100% !important;
  min-height:0 !important;
  align-self:start !important;
}

/* Live metadata moves directly underneath instead of keeping a tall empty row. */
body[data-page="pimp_profile"] .stream-studio.stream-settings-collapsed > .stream-meta-card,
body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-collapsed > .stream-meta-card{
  grid-column:1 !important;
  grid-row:auto !important;
  width:100% !important;
}

/* Preview and Player Studio naturally follow underneath, full width. */
body[data-page="pimp_profile"] .stream-studio.stream-settings-collapsed > .integrated-stream-preview,
body[data-page="pimp_profile"] .stream-studio.stream-settings-collapsed > .player-branding-studio,
body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-collapsed > .integrated-stream-preview,
body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-collapsed > .player-branding-studio{
  grid-column:1 !important;
  grid-row:auto !important;
  width:100% !important;
}

/* Open layout: settings left, metadata right as intended. */
body[data-page="pimp_profile"] .stream-studio.stream-settings-expanded,
body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-expanded{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:14px !important;
  align-items:start !important;
}

body[data-page="pimp_profile"] .stream-studio.stream-settings-expanded > .stream-main-form,
body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-expanded > .stream-main-form{
  grid-column:1 !important;
  grid-row:1 !important;
}

body[data-page="pimp_profile"] .stream-studio.stream-settings-expanded > .stream-meta-card,
body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-expanded > .stream-meta-card{
  grid-column:2 !important;
  grid-row:1 !important;
}

body[data-page="pimp_profile"] .stream-studio.stream-settings-expanded > .integrated-stream-preview,
body[data-page="pimp_profile"] .stream-studio.stream-settings-expanded > .player-branding-studio,
body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-expanded > .integrated-stream-preview,
body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-expanded > .player-branding-studio{
  grid-column:1 / -1 !important;
  grid-row:auto !important;
}

/* Make the collapsed bar visibly compact. */
body[data-page="pimp_profile"] .stream-main-form.is-collapsed,
body[data-page="admin_pimp_profile"] .stream-main-form.is-collapsed{
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
}

body[data-page="pimp_profile"] .stream-main-form.is-collapsed > .pimp-generated-accordion-head,
body[data-page="admin_pimp_profile"] .stream-main-form.is-collapsed > .pimp-generated-accordion-head{
  min-height:44px !important;
  margin:0 !important;
  border-bottom:0 !important;
  border-radius:10px !important;
}

/* Metadata looks better full-width while settings are closed. */
body[data-page="pimp_profile"] .stream-studio.stream-settings-collapsed > .stream-meta-card .stream-meta-grid,
body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-collapsed > .stream-meta-card .stream-meta-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

/* Avoid giant blank space caused by previous explicit row placement. */
body[data-page="pimp_profile"] .stream-studio.stream-settings-collapsed > *,
body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-collapsed > *{
  min-height:0 !important;
  align-self:start !important;
}

/* On smaller screens always use the clean single-column version. */
@media(max-width:900px){
  body[data-page="pimp_profile"] .stream-studio.stream-settings-expanded,
  body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-expanded{
    grid-template-columns:1fr !important;
  }

  body[data-page="pimp_profile"] .stream-studio.stream-settings-expanded > .stream-main-form,
  body[data-page="pimp_profile"] .stream-studio.stream-settings-expanded > .stream-meta-card,
  body[data-page="pimp_profile"] .stream-studio.stream-settings-expanded > .integrated-stream-preview,
  body[data-page="pimp_profile"] .stream-studio.stream-settings-expanded > .player-branding-studio,
  body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-expanded > .stream-main-form,
  body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-expanded > .stream-meta-card,
  body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-expanded > .integrated-stream-preview,
  body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-expanded > .player-branding-studio{
    grid-column:1 !important;
    grid-row:auto !important;
  }

  body[data-page="pimp_profile"] .stream-studio.stream-settings-collapsed > .stream-meta-card .stream-meta-grid,
  body[data-page="admin_pimp_profile"] .stream-studio.stream-settings-collapsed > .stream-meta-card .stream-meta-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

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