/* ================================================================
   artists/static/css/artists.css
   ---------------------------------------------------------------
   Styles specific to the artist dashboard/page.
   ================================================================ */
/* ================================================================
   ARTISTS — PAGE POLISH (MATCH PROFILE + AUTH)
   ----------------------------------------------------------------
   Purpose:
   - Keep Artist pages visually identical to Profile/Auth styling
   - Avoid redefining Bootstrap cards/forms
   - Only add small layout tuning and list-group polish
   ================================================================ */


/* ================================================================
   1) PAGE WRAPPER SPACING
   ================================================================ */
.artists-page .container{
  padding-bottom: 1.5rem;
}


/* ================================================================
   2) HEADER AREA (AVATAR + BUTTONS)
   ================================================================ */

/* Avatar consistency */
#avatarPreview,
#avatarFallback{
  border: 1px solid rgba(0,0,0,0.08);
}

/* Button row under avatar */
.artists-avatar-actions{
  gap: 0.5rem;
}


/* ================================================================
   3) FORMS — RHYTHM + NORMALIZATION
   ================================================================ */

/* Prevent textarea resize chaos */
textarea.form-control{
  resize: vertical;
}

/* Help text consistency */
.form-text{
  font-size: 0.95rem;
}

/* Match select height to inputs */
.form-select{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}


/* ================================================================
   4) CHECKBOX ROW ALIGNMENT
   ================================================================ */
.form-check{
  align-items: center;
}

.form-check-label{
  line-height: 1.2;
}


/* ================================================================
   5) DISCOGRAPHY LIST (LIST-GROUP)
   ================================================================ */
.list-group{
  gap: 10px;
}

.list-group .list-group-item{
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: none;
}

/* Mobile padding */
@media (max-width: 576px){
  .list-group .list-group-item{
    padding: 0.9rem;
  }
}

.list-group-item .btn{
  white-space: nowrap;
}


/* ================================================================
   6) HIDDEN FILE INPUT SAFETY
   ================================================================ */
.d-none input[type="file"]{
  display: none !important;
}


/* ================================================================
   ARTISTS: GALLERIES (matches global BH system)
   - Uses .thumb from harmonies_site.css
   - Keep this file minimal: rely on global cards/buttons/forms
   ================================================================ */

#galleryGrid .card{
  border: 1px solid var(--bh-surface-border);
  border-radius: 14px;
}

#galleryGrid .card-body .btn{
  padding: 0.35rem 0.6rem; /* slightly tighter for tile controls */
  border-radius: 12px;
}

#galleryGrid .small.text-muted{
  max-width: 65%;
}

/* Upload selection preview thumbnails */
.bh-upload-preview {
  min-height: 44px;
}

.bh-upload-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

.bh-upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* artists.css */
.bh-upload-preview__item{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
}

.bh-upload-preview__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ================================================================
   7) DASHBOARD LIST ROW ALIGNMENT (Discography / Media / Galleries)
   ---------------------------------------------------------------
   Fixes:
   - button group vertical alignment
   - long text wrapping without pushing buttons
   - keep list-group-flush truly flush inside cards
   ================================================================ */

/* Only affect dashboard cards (not every list-group in the site) */
.artists-page .bh-dashboard-card .list-group{
  gap: 0; /* IMPORTANT: restore flush behavior inside cards */
}

/* Keep flush rows clean + consistent */
.artists-page .bh-dashboard-card .list-group-flush > .list-group-item{
  border-left: 0;
  border-right: 0;
  border-radius: 0; /* flush rows */
  border-color: rgba(0,0,0,0.08);
}

/* First/last row borders for flush lists inside card */
.artists-page .bh-dashboard-card .list-group-flush > .list-group-item:first-child{
  border-top: 1px solid rgba(0,0,0,0.08);
}
.artists-page .bh-dashboard-card .list-group-flush > .list-group-item:last-child{
  border-bottom: 0;
}

/* Row layout: keep content + buttons aligned */
.artists-page .bh-dashboard-card .list-group-item{
  display: flex;
  align-items: center !important;   /* overrides align-items-start in markup */
  justify-content: space-between;
  gap: 12px;
}

/* Left side: allow shrinking so buttons stay visible */
.artists-page .bh-dashboard-card .bh-list-row{
  flex: 1 1 auto;
  min-width: 0; /* enables text-truncate */
}

/* Text blocks: prevent overflow from pushing buttons */
.artists-page .bh-dashboard-card .bh-list-row .fw-semibold,
.artists-page .bh-dashboard-card .bh-list-row .small{
  min-width: 0;
}

/* Right-side buttons: always on one line, vertically centered */
.artists-page .bh-dashboard-card .list-group-item > .d-flex{
  flex: 0 0 auto;
  align-items: center;
}

/* Buttons consistent sizing in lists */
.artists-page .bh-dashboard-card .list-group-item .btn{
  line-height: 1.2;
}

/* Optional: make the inline thumbnail match the rest of your UI */
.artists-page .bh-inline-thumb{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  flex: 0 0 auto;
}

/* ================================================================
   ARTISTS DIRECTORY (public index)
   Matches Event index layout & card geometry
   ================================================================ */

/* ---------- Header / filter panel ---------- */

.bh-directory-hero{
  padding: 0.75rem 1rem;
  color: #fff;
}

.bh-directory-search{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bh-directory-search .form-control{
  height: 36px;
  min-width: min(420px, 72vw);
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.95) !important;
}

.bh-directory-search .btn{
  height: 36px;
  padding: 0.35rem 0.9rem;
  font-size: 0.9rem;
  border-radius: 10px;
}

/* =========================================================
   ARTIST CARD — IDENTICAL TO EVENT CARD
   (single source of truth)
   ========================================================= */

.bh-artist-card{
  background: transparent;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(0,0,0,0.18);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.bh-artist-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.22);
}

/* ---------- Image (event-style) ---------- */

.bh-artist-card__img{
  width: 100%;
  height: 200px;
  object-fit: contain;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

@media (max-width: 768px){
  .bh-artist-card__img{
    height: 180px;
  }
}

/* ---------- Body ---------- */

.bh-artist-card .card-body{
  background: #fff;
  padding: 14px 14px 10px;
}

/* ---------- Footer ---------- */

.bh-artist-card__footer{
  background: #fff;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.bh-artist-card__cta{
  background: #000;
  color: #fff;
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}
.bh-artist-card__cta:hover{
  background: rgba(255,255,255,0.12);
  color: #fff;
}