/* ====================================================================
   bands.ge � Mobile-First Full Stylesheet (fonts + base + components)
   (Includes homepage 4-cards 2�2 grid + responsive typography)
   ==================================================================== */

/* -------------------- Fonts -------------------- */
/* Primary Font: BPG2017 */
@font-face {
  font-family: 'BPG2017';
  src: url('../fonts/BPG2017.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Noto Sans Georgian variable font (preferred) */
@font-face {
  font-family: 'Noto Sans Georgian';
  src: url('../fonts/NotoSansGeorgian-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Static fallbacks (bold/italic) */
@font-face {
  font-family: 'Noto Sans Georgian';
  src: url('../fonts/static/NotoSansGeorgian-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Georgian';
  src: url('../fonts/static/NotoSansGeorgian-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Georgian';
  src: url('../fonts/static/NotoSansGeorgian-Regular.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic; /* synthesized */
  font-display: swap;
}

/* Secondary Font: Exocular (fallback) */
@font-face {
  font-family: 'Exocular';
  src: url('../fonts/exocular.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

/* Georgian Display / Small Headings Font */
@font-face {
  font-family: 'BPGNinoMtavruliBold';
  src: url('../fonts/bpg_nino_mtavruli_bold.ttf') format('truetype'),
       url('../fonts/bpg_nino_mtavruli_bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Akolkhnb (OTF) */
@font-face {
  font-family: 'Akolkhnb';
  src: url('../fonts/akolkhnb.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------- Root / Variables -------------------- */
:root{
  --brand: #0c064b;      /* primary */
  --brand-2: #130c69;    /* secondary/accent */
  --brand-contrast: #fff;
  /* Site-wide border color (light theme default). User requested
    light theme border color: #9c9c9c, dark theme: #295ea9. */
  --site-border: #9c9c9c;
  /* Keep existing --border variable compatible with older rules */
  --border: var(--site-border);
  /* Ensure subtle primary backgrounds provide enough contrast with white text
     (was very light in some places causing white text to be unreadable). */
  --bs-primary-bg-subtle: #051B4A;
  --ink: #111111;
  --muted: #6b7280;
  --soft: #f7f8fa;
  --ring: rgba(0,0,0,.06);
  --main-font: 'Noto Sans Georgian', 'BPG2017', 'Exocular', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #fff;
    background-color: #17294f;
    border-color: var(--bs-nav-tabs-link-active-border-color);
}

/* Prefer variable font axis */
html, body, input, textarea, select, button { font-variation-settings: 'wght' 400; }
strong, b { font-variation-settings: 'wght' 700; font-weight: 700; }
em, i { font-style: italic; }

/* -------------------- Base -------------------- */
html { font-size: 15px; } /* larger tap targets */
body {
  background-color: #ffffff;
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: var(--main-font);
}
h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--main-font); letter-spacing: .5px; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-2); }

.active>.page-link, .page-link.active { background-color: var(--brand); border-color: var(--brand); color: #fff; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
  /* Emoji picker styling (moved from messenger view) */
  #emojiPicker.emoji-picker{ min-width:180px !important; max-width:360px !important; }
  #emojiPicker .emoji-grid{ display:grid !important; grid-template-columns: repeat(auto-fit, minmax(36px,36px)) !important; gap:.35rem !important; align-items:center; justify-content:center; width:100% !important; }
  #emojiPicker .emoji-cell{ width:36px !important; height:36px !important; padding:.25rem !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:1.1rem !important; cursor:pointer !important; border-radius:.35rem !important; box-sizing:border-box !important; }
  #emojiPicker .emoji-cell:hover{ background:#f3f4f5 !important; }
  [data-dark="1"] #emojiPicker .emoji-cell:hover{ background:#1a2030 !important; }
  @media (max-width: 575.98px){
    #emojiPicker .emoji-grid{ grid-template-columns: repeat(auto-fit, minmax(32px,32px)) !important; }
    #emojiPicker .emoji-cell{ width:32px !important; height:32px !important; }
  }
}

/* Fallback if variable axis unsupported */
@supports not (font-variation-settings: normal) {
  .form-label.small, .small-heading { font-weight:700; }
}

/* -------------------- Typography helpers -------------------- */
.navbar-brand{
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(1rem, 4vw, 1.15rem);
  white-space: normal;
  line-height: 1.1;
}

/* Site logo in navbar: clickable, with hover shadow and smooth transition */
.site-logo{
  height: 40px;
  width: auto;
  display: inline-block;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border-radius: 6px;
}
.site-logo:hover{
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  transform: translateY(-2px);
}

/* Increase navbar height by ~1.6x (increase vertical padding) */
.site-navbar{
  padding-top: 0.8rem; /* default ~0.5rem -> 0.8rem is ~1.6x */
  padding-bottom: 0.8rem;
}

/* Keep compact on very small screens if desired */
@media (max-width: 575.98px){
  .site-navbar{ padding-top: 0.6rem; padding-bottom: 0.6rem; }
}

/* Hero / About section logo (left of heading on desktop, stacked on mobile) */
.section-about .hero-logo{
  width: 610px;
  height: auto;
  display: inline-block;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border-radius: 8px;
}
.section-about .hero-logo-link{ text-decoration: none; }
.section-about .hero-logo:hover{ box-shadow: 0 12px 34px rgba(0,0,0,0.18); transform: translateY(-3px); }

/* Responsive sizing: smaller on medium, compact on phones */
@media (max-width: 991.98px){
  .section-about .hero-logo{ width: 56px; }
}
@media (max-width: 575.98px){
  .section-about .hero-logo{ width: 48px; }
  .section-about .d-flex.flex-column .hero-logo{ margin-bottom: .35rem; }
}

/* Apply Georgian bold to small labels / headings */
.form-label.small, .small-heading, .section-label, .badge, .tab-pane h6, .profile-bio-title, .band-summary .form-label.small {
  font-family: var(--main-font);
  letter-spacing: .5px;
}

/* Bio blocks: high readability in Georgian */
.bio-text, textarea[name="bio"], .user-bio, .band-bio, .profile-bio, .content-bio {
  font-family: 'BPGNinoMtavruliBold', 'BPG2017', 'Akolkhnb', 'HKolkhety', 'Fido', 'Exocular', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Georgian', sans-serif;
  line-height: 1.6;
}

/* Utility to force Akolkhnb */
.font-akolkhnb { font-family: 'Akolkhnb','BPG2017',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif !important; }

/* -------------------- Generic Components -------------------- */
.card {
  background-color: #ffffff;
  border: 1px solid var(--site-border);
  border-radius: .75rem;
  overflow: hidden;
}
.card-body { color: #242424; }
.card-title { color: #111111; }

.badge-genre { background: linear-gradient(135deg, var(--brand-2) 0%, #19a66a 100%); }

footer { background-color: #f8f9fa; color: #555; }

/* Truncate to 3 lines */
.text-truncate-3 {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Light theme utilities */
.bg-secondary-subtle { background-color: #f1f3f5 !important; }
.bg-dark-subtle { background-color: #e2e3e5 !important; }
.object-fit-cover { object-fit: cover; }

/* Subtle primary backgrounds: ensure readable white text and add a grey outline */
.bg-primary-subtle,
.badge.bg-primary-subtle,
.btn.bg-primary-subtle,
.text-bg-primary {
  background-color: var(--bs-primary-bg-subtle, #051B4A) !important;
  color: #ffffff !important;
  border: 1px solid var(--site-border) !important; /* light grey outline */
  box-shadow: none !important;
}
.bg-primary-subtle:focus,
.btn.bg-primary-subtle:focus,
.text-bg-primary:focus {
  outline: none !important;
  box-shadow: 0 0 0 .15rem rgba(5,27,74,0.12) !important;
}

/* -------------------- Static connection lines between cards -------------------- */
.section-features{ position: relative; }
.feature-static-connections{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.feature-static-svg{ width:100%; height:100%; display:block; }
.static-line{ opacity:.34; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.16)); stroke-width:4; }

/* -------------------- Feature cards (with cover mode) -------------------- */
.section-about{ background: linear-gradient(180deg,#fff,#fafbfc); }
.section-about a, .section-features a, .section-feed a { text-decoration: none !important; }
.feature-card{
  position: relative; overflow: hidden; border-radius: 1rem;
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
  aspect-ratio: auto; min-height: 64px; display: flex; height: 100%;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 .9rem 2.2rem rgba(0,0,0,.14); filter: saturate(1.02); }
.feature-card::after{
  content:""; position:absolute; inset:auto -20% -20% -20%; height:40%;
  background: radial-gradient(closest-side, rgba(255,184,0,.12), rgba(255,184,0,0));
  transition: transform .35s ease, opacity .35s ease; opacity:.7;
}
.feature-card:hover::after{ transform: translateY(-10%); opacity: 1; }

/* Add subtle glow for musician/band/studio/rehearsal cards */
.band-card, .rehearsal-space-card, .studio-card, .feature-card.cover-card {
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.band-card:hover, .rehearsal-space-card:hover, .studio-card:hover, .feature-card.cover-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,123,69,0.14), 0 6px 20px rgba(0,0,0,0.10);
  filter: drop-shadow(0 10px 30px rgba(0,123,69,0.06));
}

/* Main landing cards sizing and specific hover glow for musician/band/rehearsal/studio cards */
#card-musician.feature-card, #card-band.feature-card, #card-rehearsal.feature-card, #card-studio.feature-card {
  height: 200px; /* default for desktop */
  min-height: 160px;
  display: block; /* ensure link fills column */
}

/* Responsive sizes: smaller on mobile */
@media (max-width: 575.98px) {
  #card-musician.feature-card, #card-band.feature-card, #card-rehearsal.feature-card, #card-studio.feature-card {
    height: 140px;
    min-height: 120px;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  #card-musician.feature-card, #card-band.feature-card, #card-rehearsal.feature-card, #card-studio.feature-card {
    height: 180px;
    min-height: 150px;
  }
}

/* Add a focused glow on hover for these main cards */
#card-musician.feature-card:hover, #card-band.feature-card:hover, #card-rehearsal.feature-card:hover, #card-studio.feature-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 30px 80px rgba(0,123,69,0.18), 0 8px 30px rgba(0,0,0,0.12);
  filter: drop-shadow(0 14px 36px rgba(0,123,69,0.08));
}
.feature-icon{
  width: 3.25rem; height: 3.25rem; display: grid; place-items: center;
  border-radius: .9rem; background:#FFB8000f; font-size:1.35rem; color:#FFB800;
}
.feature-card > .card-body{
  padding: .75rem !important;
  display:flex !important; flex-direction:column; justify-content:center !important; align-items:center;
  text-align:center; height:100%;
}
.feature-card h3{
  text-align:center; display:block;
  font-size: clamp(1.1rem, 4.2vw, 1.5rem);
  line-height:1; margin: 0 .25rem .5rem;
}
.feature-card p{ text-align:center; font-size:.95rem; margin:0; color: rgb(225,225,225) !important; }

/* Cover mode */
.cover-card { color: #fff; background-color: #111; }
.cover-card .card-body{
  padding: .9rem .9rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 10%, rgba(0,0,0,0.55) 100%);
}
.feature-card.cover-card .card-body{
  /* subtle shadow on light theme so cover-cards read above page content */
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transition: box-shadow .18s ease, transform .12s ease;
}
.cover-card .feature-icon{ background: rgba(0,0,0,0.28); color: #fff; box-shadow:0 6px 18px rgba(0,0,0,0.55); }
.cover-card h3, .cover-card p{ color:#fff; text-shadow: 0 4px 14px rgba(0,0,0,0.7); }
.hero-title { color:#111; }

/* -------------------- HOMEPAGE FOUR-CARDS (2�2) -------------------- */
/* Base grid */
.cards-grid{
  display: grid !important;
  gap: .9rem !important;
}
/* Mobile: 1 column */
@media (max-width: 575.98px){
  .cards-grid{ grid-template-columns: 1fr !important; } /* 1�4 */
  .cards-grid .feature-card{ min-height: 160px; }
  .cards-grid .feature-card > .card-body{ padding: .75rem !important; }
  .cards-grid .feature-card h3{
    font-size: clamp(1.05rem, 4.4vw, 1.3rem) !important;
    line-height: 1.1 !important;
    margin-bottom: .35rem !important;
  }
  .cards-grid .feature-card p{ font-size: .95rem !important; opacity: .95; }
  .cards-grid .feature-icon{ width: 2.8rem; height: 2.8rem; font-size: 1.1rem; }
}
/* =576px: lock to 2 columns (2�2 for four items) */
@media (min-width: 576px){
  .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cards-grid .feature-card{ min-height: 210px; }
}
/* =992px: desktop typography */
@media (min-width: 992px){
  .cards-grid .feature-card{ min-height: 260px; }
  .cards-grid .feature-card > .card-body{ padding: 1rem 1.1rem !important; }
  .cards-grid .feature-card h3{
    font-size: 2rem !important;
    line-height: 1.05 !important;
  }
  .cards-grid .feature-card p{ font-size: 1.05rem !important; }
  .cards-grid .feature-icon{ width: 3.25rem; height: 3.25rem; font-size: 1.35rem; }
}
/* Cover readability in grid */
.cards-grid .cover-card .card-body{
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 10%, rgba(0,0,0,0.55) 100%) !important;
}
.cards-grid .cover-card h3,
.cards-grid .cover-card p{
  color: #fff !important; text-shadow: 0 4px 14px rgba(0,0,0,.65);
}
/* Make anchors fill height */
.cards-grid .feature-card,
.cards-grid .feature-card.card{ display:flex; }
.cards-grid .feature-card > .card-body{
  display:flex !important; flex-direction:column; justify-content:center !important; align-items:center; text-align:center;
}
/* Hover pop only on non-touch */
@media (hover:hover){
  .cards-grid .feature-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12);
  }
}

/* -------------------- Grids (generic fallbacks) -------------------- */
.gallery-grid, .section-features .row { box-sizing: border-box; /* placeholder rule to avoid empty ruleset */ }
@media (max-width: 575.98px){
  .gallery-grid { display:grid; grid-template-columns: 1fr !important; }
}
@media (min-width: 576px) and (max-width: 991.98px){
  .gallery-grid { display:grid; grid-template-columns: repeat(2,1fr); }
}

/* -------------------- Homepage feature-card height normalization -------------------- */
/* Ensure .feature-card (cover-card variants like the musician tile) matches site card sizing */
@media (min-width: 992px) {
  .feature-card, .feature-card.cover-card { min-height: 200px; }
  .feature-card > .card-body { min-height: 200px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .feature-card, .feature-card.cover-card { min-height: 180px; }
  .feature-card > .card-body { min-height: 180px; }
}
@media (max-width: 575.98px) {
  .feature-card, .feature-card.cover-card { min-height: 140px; }
  .feature-card > .card-body { min-height: 140px; }
}

/* -------------------- Band / Studio / Rehearsal Cards -------------------- */
.band-card, .rehearsal-space-card, .studio-card, .card { border-radius: .75rem; overflow: hidden; }
.band-card img, .rehearsal-cover-img, .card img { width: 100%; height: auto; object-fit: cover; transition: transform .4s ease; }
.band-card:hover img { transform: scale(1.05); }

.rehearsal-space-card { border:1px solid var(--site-border); }
.rehearsal-space-card .card-body{ padding:1rem; }
.rehearsal-cover-wrap{ position:relative; height:200px; border-top-left-radius:1rem; border-top-right-radius:1rem; overflow:hidden }
.rehearsal-cover-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-between;
  padding:1rem; background:linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(0,0,0,0.6));
}
.rating-overlay{ position:absolute; top:.6rem; right:.6rem; z-index:5; }
@media (max-width: 575.98px){ .rehearsal-cover-wrap { height: 160px; } }

/* -------------------- Rating visuals -------------------- */
.mus-rating i, .studio-card .rating i, .space-rating i { font-size: .9rem; line-height:1; }
.mus-rating .star, .studio-card .star-full, .space-rating .star-full, .mus-rating .star-full { color: #FFB800; }
.mus-rating .star-empty, .studio-card .star-empty, .space-rating .star-empty { color: #d1d1d1; }

/* YOUR rating widget (interactive) */
.profile-hero{ position: relative; }
#userRatingDisplay{
  position: relative;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: .25rem;
  background: rgba(0,0,0,0.45);
  padding: .5rem .7rem;
  border-radius: .5rem;
  color:#fff;
  z-index: 1;
}
#userRatingDisplay .row-title{ font-size:.75rem; font-weight:600; opacity:.95; margin-bottom:.15rem; white-space: nowrap; }
#userRatingDisplay .rating-stars{ display:inline-flex !important; gap: .3rem; cursor:pointer; align-items: center; }
#userRatingDisplay .star-wrapper{ position:relative; display:inline-flex !important; align-items:center; justify-content: center; padding:.1rem; cursor:pointer; transition: transform 0.2s ease; }
#userRatingDisplay .star-wrapper:hover{ transform: scale(1.15); }
#userRatingDisplay .star-wrapper i{ color:#FFB800; font-size:1.1rem; transition: color 0.2s ease; pointer-events: none; }
#userRatingDisplay .star-wrapper .fa-regular{ color: rgba(255,255,255,0.3); }
#userRatingDisplay .star-wrapper .fa-solid{ color:#FFB800; }
#userRatingDisplay .hint{ font-size:.7rem; opacity:.85; margin-top:.1rem; white-space: nowrap; }
#userRatingDisplay .star-wrapper.user-full i{ color:#FFB800 !important; filter: drop-shadow(0 0 3px rgba(255,184,0,.5)); }

@media (max-width: 575.98px){ #userRatingDisplay { width: auto; justify-content: center; } }

/* -------------------- Hero layout (profile/musician) -------------------- */
.profile-hero .hero-left{ display:block; }
.profile-hero .hero-right{ display:flex; align-items:center; gap:.5rem; justify-content:flex-end; }
@media (min-width: 768px){
  .profile-hero{ min-height:160px; }
  .profile-hero img.rounded-circle{ width:120px; height:120px; }
  .profile-hero .hero-right{ align-items:center; gap:.75rem; }
  #userRatingDisplay{ margin-left: .5rem; }
  .profile-hero .hero-left{ flex: 1 1 auto; }
  .profile-hero .hero-right{ flex: 0 0 auto; }
}
@media (max-width: 767.98px){
  .profile-hero{ min-height: 260px !important; }
  .profile-hero > .d-flex{ min-height: 260px !important; padding-bottom: .5rem; flex-direction: column; align-items: stretch; gap: .6rem; }
  .profile-hero img.rounded-circle{ width:140px !important; height:140px !important; margin-top:18px !important; border-width:4px !important; }
  .profile-hero .hero-left{ order:1; }
  .profile-hero .hero-right{ order:2; width:100%; justify-content:flex-start; gap:.6rem; flex-wrap: wrap; }
  #userRatingDisplay{ margin-right:.35rem; }
  /* Hide duplicate Bootstrap badges in the header (like 'Looking for') on small screens
     but keep the reusable status badge visible (.badge-status). */
  .profile-hero > .d-flex .text-white > .badge{ display:none; }
  .profile-hero .hero-left .badge{ display:inline-flex; }
  /* Ensure the colored status badge (from partial `status_badge`) remains visible on mobile */
  .profile-hero > .d-flex .text-white > .badge-status{ display: inline-flex !important; }
  /* Also allow the 'looking for' / primary-subtle badge to be visible on mobile
     (this targets the badge used in the hero: <span class="badge bg-primary-subtle ...">) */
  .profile-hero > .d-flex .text-white > .badge.bg-primary-subtle,
  .profile-hero > .d-flex .text-white > .badge.bg-primary-subtle.text-bg-primary {
    display: inline-flex !important;
  }
}

/* -------------------- Actions / Buttons rows -------------------- */
.actions-row, .invite-actions, .band-actions, .profile-actions, .card-actions, .hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
@media (max-width: 575.98px){
  .actions-row .btn, .invite-actions .btn, .band-actions .btn, .profile-actions .btn, .card-actions .btn, .hero-actions .btn {
    flex: 1 1 auto; min-width: calc(50% - .5rem);
  }
  .btn-group { flex-wrap: wrap; }
}

/* Profile edit button */
.profile-edit-btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .85rem; border-radius:999px;
  font-weight:700; color:#371f1f; text-decoration:none; box-shadow:0 6px 18px rgba(31,41,55,.12);
  background:linear-gradient(90deg,#ffd166,#ffb347); border:0; transition:transform .12s ease,box-shadow .12s ease;
}
.profile-edit-btn i{ font-size:.95rem; }
.profile-edit-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(31,41,55,.16); text-decoration:none }
@media (max-width:991.98px){ .profile-edit-btn{ width:100%; justify-content:center; font-size:1.05rem; padding:.65rem 1rem } }

/* Prominent main page "My profile" button */
.my-profile-btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:1rem;
  background:#051B4A; color:#f2f2f2; font-weight:800; font-size:1.05rem; text-decoration:none;
  box-shadow: 0 8px 22px rgba(5,27,74,0.18), 0 0 0 6px rgba(5,27,74,0.04) inset,;
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, filter .18s ease;
}
.my-profile-btn:hover{ color: white; transform: scale(1.05) translateY(-3px); box-shadow: 0 16px 44px rgba(5,27,74,0.28); filter:brightness(1.03); }
.my-profile-btn:active{ transform: scale(0.99); }
.my-profile-btn.glow{ box-shadow: 0 18px 60px rgba(0,123,69,0.18), 0 0 30px rgba(0,123,69,0.06); }
@media (max-width: 575.98px){ .my-profile-btn{ width:100%; justify-content:center; } }

/* Social links buttons */
.social-links .btn-social{
  --bs-btn-padding-y:.4rem; --bs-btn-padding-x:.65rem; --bs-btn-font-size:.7rem;
  font-weight:600; border:none; color:#fff; display:inline-flex; align-items:center; gap:.35rem;
  border-radius:.5rem; box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.btn-social-facebook{background:#1877F2;}
.btn-social-instagram{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);}
.btn-social-youtube{background:#FF0000;}
.btn-social-soundcloud{background:#ff7700;}
.btn-social-spotify{background:#1DB954;}
.btn-social-tiktok{background:#000;}
.btn-social-twitter{background:#1DA1F2;}
.btn-social-x{background:#111;}
.btn-social-linkedin{background:#0077b5;}
.btn-social-bandcamp{background:#629aa9;}
.btn-social-website{background:#6c757d;}
.social-links .btn-social:hover{filter:brightness(.9);text-decoration:none;}
.social-links{display:flex;flex-wrap:wrap;gap:.5rem;}

/* Override Bootstrap primary button to use site brand colors */
.btn-primary{
  background-color: #051B4A !important;
  border-color: #051B4A !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(5,27,74,0.12);
}
.btn-primary:hover,.btn-primary:focus{
  background-color: #042d56 !important; /* slightly darker */
  border-color: #042d56 !important;
  color: #ffffff !important;
}

/* Dark-theme variant for .btn-primary */
html[data-theme="dark"] .btn-primary{
  background-color: #1f59e1 !important;
  border-color: grey !important;
  color: #f1f1f1 !important;
  box-shadow: 0 6px 18px rgba(48,83,166,0.14) !important;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus{
  background-color: #23498f !important;
  border-color: #23498f !important;
  /* stronger glow on hover/focus in dark theme */
  box-shadow: 0 14px 44px rgba(48,83,166,0.24) !important;
  transform: translateY(-2px) !important;
}

/* Active state: give a clear glow (slightly inset) so pressed/active buttons
   still read as interactive without jumping as much as hover */
html[data-theme="dark"] .btn-primary:active,
html[data-theme="dark"] .btn-primary.active{
  background-color: #1b4aa0 !important; /* keep slightly darker than hover */
  border-color: #1b4aa0 !important;
  box-shadow: 0 10px 30px rgba(48,83,166,0.28), inset 0 0 18px rgba(48,83,166,0.12) !important;
  transform: translateY(0) !important;
}

/* Invitation/CTA banners */
.invite-card, .invitation-banner{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.75rem 1rem; border:1px solid var(--site-border); border-radius:.75rem; background:#fffdf5;
}
@media (max-width: 575.98px){
  .invite-card, .invitation-banner{ flex-direction:column; align-items:stretch; }
  .invitation-banner .invite-actions, .invite-card .invite-actions{ width:100%; }
}

/* Sticky action bar (optional) */
@media (max-width: 575.98px){
  .sticky-actions{
    position: sticky; bottom: 0; z-index: 1020;
    display:flex; gap:.5rem; padding:.5rem .75rem;
    background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
    box-shadow: 0 -6px 16px rgba(0,0,0,.06);
  }
  .sticky-actions .btn{ flex:1 1 auto; }
}

/* -------------------- Filters / chips -------------------- */
.mus-filters-shell, .band-filters-shell { border:1px solid var(--site-border); border-radius:.9rem; overflow:hidden; }
.filters-collapse{ display:block; overflow:hidden; transition:max-height .45s cubic-bezier(.4,.1,.2,1), opacity .35s ease; max-height:0; opacity:0; }
.filters-collapse.show{ max-height:900px; opacity:1; }
.mus-genres-chips .filter-chip, .mus-inst-chips .filter-chip, .genres-checkboxes .genre-check-item {
  border:1px solid var(--site-border); background:#f8f9fa; padding:.4rem .75rem; font-size:.7rem;
  border-radius:50rem; letter-spacing:.3px; font-weight:500; cursor:pointer; transition:.18s;
  display:inline-flex; align-items:center; gap:.35rem;
}
.mus-genres-chips .filter-chip:hover, .mus-inst-chips .filter-chip:hover, .genres-checkboxes .genre-check-item:hover{ background:#fff4e0; }
.mus-genres-chips .filter-chip.active, .mus-inst-chips .filter-chip.active{
  background:#FFB800; color:#111; border-color:#FFB800; box-shadow:0 0 0 .15rem rgba(255,184,0,.18);
}
.band-filters-shell #toggleFiltersBtn[aria-expanded="true"]{ background:#FFB800; color:#fff; }

/* Genres checkboxes + bands page specific */
.genres-checkboxes .form-check-input:checked + .form-check-label,
.genres-checkboxes .form-check-input:checked ~ .form-check-label{ font-weight:600; }
.genres-checkboxes input[type=checkbox]{ margin-right:.35rem; }
@media (max-width:575.98px){
  .band-filters-shell .form-control-lg{ font-size:.95rem; }
  #toggleFiltersBtn span{ display:none; }
  #toggleFiltersBtn .fa{ margin:0; }
  .genres-checkboxes .genre-check-item{ flex:0 0 calc(50% - .5rem); }
}

/* -------------------- Bands page multi-view -------------------- */
.band-card-wrapper .line-clamp-3{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp: 3; overflow:hidden;
}
.bands-view-list .band-card{ display:flex; flex-direction:row; }
.bands-view-list .band-card-cover{ flex:0 0 240px; width:240px; height:100%; min-height:160px; position:relative; }
.bands-view-list .band-card .card-body{ flex:1; }
.bands-view-grid .band-card-cover{ position:relative; height:220px; }

.band-card-cover{ background:#111; position:relative; overflow:hidden; }
.band-card-cover .band-cover-img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease, filter .4s ease; display:block; }
.band-card:hover .band-card-cover .band-cover-imgbadge { transform:scale(1.07); filter:brightness(1.05); }
.band-card-cover .cover-overlay{
  position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));
  opacity:0; transition:opacity .4s ease;
}
.band-card:hover .band-card-cover .cover-overlay{ opacity:1; }

/* -------------------- Musician cards (moved from musicians index) -------------------- */
.mus-card{
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform, box-shadow;
  /* make card a column flex container so cover + body sizes can be controlled and equalized */
  display: flex;
  flex-direction: column;
}
.mus-card:hover{
  transform: translateY(-6px) scale(1.01);
  /* soft drop + colored glow (matches site's purple/yellow accents) */
  box-shadow: 0 8px 30px rgba(16,24,40,0.08), 0 0 22px rgba(99,102,241,0.18);
}
.musician-avatar-img{
  transition: transform .18s ease, box-shadow .18s ease;
}
.mus-card:hover .musician-avatar-img{
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(99,102,241,0.18);
  border-radius:50%;
}
/* Social icon circle */
.social-mini .btn-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:0;font-size:14px}
.btn-icon i{font-size:14px}
.btn-social-facebook{background:#1877f2;color:#fff}
.btn-social-instagram{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);color:#fff}
.btn-social-youtube{background:#ff0000;color:#fff}
.btn-social-spotify{background:#1DB954;color:#fff}
.btn-social-soundcloud{background:#ff5500;color:#fff}
.btn-social-telegram{background:#0088cc;color:#fff}

/* Make social buttons sit above any stretched-link overlay and add hover effect */
.social-mini{ position: relative; z-index: 3; }
.social-mini .btn-icon{ cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.social-mini .btn-icon:hover{ transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 14px rgba(16,24,40,0.12), 0 0 12px rgba(99,102,241,0.18); }

.mus-card-cover {
  width:100%;
  /* prefer aspect-ratio if supported so images keep proportion and cards align */
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  display:block;
  border-top-left-radius:0.375rem;
  border-top-right-radius:0.375rem;
}
/* Slight spacing between cover and card body and allow card body to grow */
.mus-card > .card-body{ padding-top:0.75rem; flex: 1 1 auto; display: flex; flex-direction: column; }

/* Ensure the card wrapper centers children and cards have consistent height */
.musician-card-wrapper{ display: flex; }
.musician-card-wrapper .mus-card{ width:100%; }

/* List view: horizontal card layout with image on the left and content on the right */
.musicians-view-list .musician-card-wrapper{ align-items: stretch; }
.musicians-view-list .mus-card{ flex-direction: row; gap: 1rem; }
.musicians-view-list .mus-card-cover{
  /* landscape thumbnail on the left - use a wider width and a 16:9 aspect ratio */
  width: 220px;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  /* round left side corners, square on the right to align with card body */
  border-radius: .375rem 0 0 .375rem;
}
.musicians-view-list .mus-card > .card-body{ padding: .75rem; }
.musicians-view-list .musician-avatar-img{ width:48px;height:48px; }
.mus-bio{ display:none; }
.musicians-view-list .mus-bio{ display:block; }

/* List-view horizontal ordering: ensure fields appear left-to-right in requested sequence
   avatar > status > rating > city > type > instruments > genres > socmedia */
.musicians-view-list .mus-card > .card-body{
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.musicians-view-list .mus-card > .card-body .m-ava{ order: 1; flex: 0 0 auto; }
.musicians-view-list .mus-card > .card-body .m-status{ order: 2; flex: 0 0 auto; }
.musicians-view-list .mus-card > .card-body .m-rating{ order: 3; flex: 0 0 auto; }
.musicians-view-list .mus-card > .card-body .m-city{ order: 4; flex: 1 1 auto; min-width: 220px; }
.musicians-view-list .mus-card > .card-body .m-type{ order: 5; flex: 0 0 auto; }
.musicians-view-list .mus-card > .card-body .m-instruments{ order: 6; flex: 0 0 auto; }
.musicians-view-list .mus-card > .card-body .m-genres{ order: 7; flex: 0 0 auto; }
.musicians-view-list .mus-card > .card-body .m-social{ order: 8; flex: 0 0 auto; }

/* Ensure avatar image fits the circular crop consistently */
.musicians-view-list .musician-avatar-img{ width:56px !important; height:56px !important; object-fit:cover !important; border-radius:50% !important; }

/* Make sure cover images keep a consistent landscape aspect ratio */
.mus-card-cover{ aspect-ratio: 16/9; object-fit: cover; width:100%; height:auto; }

/* When in grid view, restore vertical stacking */
.musicians-view-grid .mus-card > .card-body{ flex-direction: column; }

/* Ensure stretched-link still covers the text area only and social buttons remain clickable */
.musicians-view-list .mus-card .card-body .stretched-link{ z-index:1; }


.badge-bandtype{
  position:absolute; top:.4rem; left:.45rem; z-index:2;
  font-size:.55rem; letter-spacing:.5px; padding:.25rem .5rem; border-radius:50rem;
  background:rgba(0,0,0,.55); color:#fff; font-weight:600; backdrop-filter:blur(4px);
  max-width:65%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border:1px solid rgba(255,255,255,.25); box-shadow:0 2px 4px rgba(0,0,0,.35);
}
.band-card .social-mini .badge{ background:#222; }
.band-card .social-mini a:hover .badge{ filter:brightness(1.2); }
.genre-badge{ background:#343e57; color:#fff; font-size:.55rem; font-weight:500; padding:.25rem .45rem; border-radius:.45rem; letter-spacing:.3px; }
.genre-badge-more{ background:#FFB800; color:#fff; font-size:.55rem; padding:.25rem .5rem; border-radius:.45rem; }
#bandsContainer .band-card:hover .badge-bandtype{ background:rgba(0,0,0,.7); }

/* Rating stars small */
.band-rating .star{ color:#FFB800; font-size:.8rem; }
.band-rating .star-empty{ color:#d1d1d1; }

/* Card hover effect */
#bandsContainer .band-card{ transition:box-shadow .2s, transform .2s; border:1px solid var(--site-border); border-radius:.75rem; overflow:hidden; }
#bandsContainer .band-card:hover{ box-shadow:0 .5rem 1rem rgba(0,0,0,.15); transform:translateY(-3px); }

@media (max-width: 575.98px){
  .band-card-wrapper{ width:100%; }
  .bands-view-grid .band-card-cover{ height:180px; }
  .bands-view-list .band-card-cover{ flex-basis:40%; width:40%; }
}

/* -------------------- Index cards height normalization -------------------- */
/* Make musician, band, rehearsal and studio cards visually consistent
   - Desktop (>=992px): ~200px
   - Medium (>=576px && <992px): ~180px
   - Mobile (<576px): ~140px
*/


@media (min-width: 992px) {
  .mus-card, .band-card, .studio-card, .rehearsal-space-card { min-height: 230px; }
  .mus-card .card-body { min-height: 200px; }
  .bands-view-grid .band-card-cover, .band-card-cover { height: 200px !important; }
  .rehearsal-cover-wrap { height: 200px !important; }
  .studio-card .card-media, .studio-card .card-media img, .studio-card .card-body .card-media { height: 200px !important; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .mus-card, .band-card, .studio-card, .rehearsal-space-card { min-height: 180px; }
  .mus-card .card-body { min-height: 180px; }
  .bands-view-grid .band-card-cover, .band-card-cover { height: 180px !important; }
  .rehearsal-cover-wrap { height: 180px !important; }
  .studio-card .card-media, .studio-card .card-media img { height: 180px !important; }
}

@media (max-width: 575.98px) {
  .mus-card, .band-card, .studio-card, .rehearsal-space-card { min-height: 140px; }
  .mus-card .card-body { min-height: 140px; }
  .bands-view-grid .band-card-cover, .band-card-cover { height: 140px !important; }
  .rehearsal-cover-wrap { height: 140px !important; }
  .studio-card .card-media, .studio-card .card-media img { height: 140px !important; }
}

/* Override Bootstrap .ratio>* for badge placement */
.band-card-cover > .badge-bandtype{ width:auto!important; height:auto!important; top:.4rem!important; left:.45rem!important; }

/* -------------------- Forms / Tables -------------------- */
@media (max-width: 575.98px){
  .form-control, .form-select { min-height: 42px; }
  .input-group > .btn { min-height: 42px; }
  .form-label { margin-bottom: .35rem; }
}

/* Make form controls use a soft grey background by default so placeholders sit on grey (not white) */
.form-control, .form-select, .input-group > .form-control, .input-group .form-select {
  background-color: var(--soft) !important;
  border-color: var(--site-border);
}
.autocomplete-list{position:relative;}
.autocomplete-list .item{
  position:relative; display:block; padding:.5rem .75rem; border:1px solid var(--site-border); border-top:0; background:#fff; cursor:pointer;
}
.autocomplete-list .item:first-child{border-top:1px solid var(--site-border);border-top-left-radius:.5rem;border-top-right-radius:.5rem}
.autocomplete-list .item:last-child{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}
.autocomplete-list .item:hover{background:#f8fafc}
.map-embed{border:1px solid var(--site-border);background:#f8fafc}

/* Tables: allow horizontal scroll on mobile */
.table-responsive { overflow-x: auto; }
@media (max-width: 575.98px){ table.table { min-width: 640px; } }

/* -------------------- Spacing tweaks -------------------- */
@media (max-width: 575.98px){
  section, .section-about, .section-features, .section-feed { padding-top: 1rem; padding-bottom: 1rem; }
}

/* -------------------- Misc -------------------- */
.date-pill { min-width:3.25rem; }
.dp-day{ font-weight:800; font-size:1.1rem; line-height:1; }
.dp-mon{ font-size:.75rem; color:#6c757d; text-transform:uppercase; letter-spacing:.06em; }

/* Safe links tap feedback on touch devices */
@media (hover: none){ a:active { opacity: .9; } }

/* -------------------- Dark mode Overrides -------------------- */
/* These rules are intentionally scoped to html[data-#0f1419="dark"] to
   provide safe, high-specificity overrides for static CSS that may be
   loaded before the inline theme variables in the layout. */
html[data-theme="dark"] {
  --bg: #0b0d0f;
  --text: #e6eef0;
  --muted: #8f9aa0;
  --card: #0f1112;
  /* Dark theme site border requested: #295ea9 */
  --site-border: #3562a1;
  /* Preserve existing --border variable used across the stylesheet */
  --border: var(--site-border);
}

html[data-theme="dark"] body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Primary CTAs on the homepage */
html[data-theme="dark"] .my-profile-btn{
  background-color: var(--card) !important;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: var(--brand-contrast) !important;
  border: 1px solid var(--site-border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}
html[data-theme="dark"] .my-profile-btn:hover{
  filter: brightness(1.05) !important;
}
html[data-theme="dark"] .my-profile-btn.glow{
  box-shadow: 0 18px 60px rgba(0,0,0,0.6), 0 0 30px rgba(0,0,0,0.2) !important;
}

/* Profile edit CTA */
html[data-theme="dark"] .profile-edit-btn{
  background: linear-gradient(90deg,#14663f,#0a4d2b) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important;
}

/* Banners / invite cards */
html[data-theme="dark"] .invite-card,
html[data-theme="dark"] .invitation-banner{
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--site-border) !important;
  color: var(--text) !important;
}

/* Sticky bottom action bar */
html[data-theme="dark"] .sticky-actions{
  background: rgba(8,8,8,0.6) !important;
}

/* Generic card background + borders
   Avoid overriding elements that use inline background-images (cover-card).
   Use :not(.cover-card) so cover-card's inline background-image is preserved. */
html[data-theme="dark"] .card:not(.cover-card),
html[data-theme="dark"] .band-card:not(.cover-card) {
  background: var(--card) !important;
  border-color: var(--site-border) !important;
  color: var(--text) !important;
}

/* Preserve Bootstrap contextual colors in dark mode.
   The layout applies an aggressive `color: var(--text) !important` rule,
   so we re-assert semantic utility colors with higher specificity. */
html[data-theme="dark"] .text-success { color: rgba(var(--bs-success-rgb), 1) !important; }
html[data-theme="dark"] .text-danger { color: rgba(var(--bs-danger-rgb), 1) !important; }

/* Allow contextual backgrounds/borders (used by quizzes/results) to show on cards. */
html[data-theme="dark"] .card.bg-success { background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; }
html[data-theme="dark"] .card.bg-danger { background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; }
html[data-theme="dark"] .card.border-success { border-color: rgba(var(--bs-success-rgb), 1) !important; }
html[data-theme="dark"] .card.border-danger { border-color: rgba(var(--bs-danger-rgb), 1) !important; }

/* Ensure cover-card body overlay remains dark + readable */
html[data-theme="dark"] .feature-card.cover-card .card-body{
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 10%, rgba(0,0,0,0.75) 100%) !important;
  /* neon glow in dark theme to highlight cover cards � use requested blue-ish accent */
  box-shadow: 0 6px 28px rgba(41,94,169,0.16), 0 0 48px rgba(41,94,169,0.22), inset 0 0 26px rgba(41,94,169,0.06) !important;
  transform: translateY(0) !important;
}
html[data-theme="dark"] .cover-card h3,
html[data-theme="dark"] .cover-card p{
  color: #fff !important;
  text-shadow: none !important;
}

/* Make the main homepage section dark and readable */
html[data-theme="dark"] .section-about{
  background: linear-gradient(180deg, #071014 0%, #0b0f12 60%) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .section-about h1,
html[data-theme="dark"] .section-about h2,
html[data-theme="dark"] .section-about h3,
html[data-theme="dark"] .section-about h4,
html[data-theme="dark"] .section-about h5,
html[data-theme="dark"] .section-about h6{
  color: var(--text) !important;

}

html[data-theme="dark"] .section-about p,
html[data-theme="dark"] .section-about .lead,
html[data-theme="dark"] .section-about .text-muted{
  color: var(--muted) !important;
}

/* Ensure links inside the section are visible */
html[data-theme="dark"] .section-about a{ color: var(--brand-contrast) !important; }

/* Footer dark-mode overrides */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer {
  background: linear-gradient(180deg, #07090a 0%, #0b0e11 100%) !important;
  color: var(--muted) !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
}
html[data-theme="dark"] footer a,
html[data-theme="dark"] .footer a{
  color: var(--link) !important;
}
html[data-theme="dark"] footer .small,
html[data-theme="dark"] .footer .small{ color: var(--muted) !important; }

/* Form control placeholders */
html[data-theme="dark"] .form-control::-webkit-input-placeholder { color: var(--muted) !important; opacity: 1; }
html[data-theme="dark"] .form-control::-moz-placeholder { color: var(--muted) !important; opacity: 1; }
html[data-theme="dark"] .form-control:-ms-input-placeholder { color: var(--muted) !important; opacity: 1; }
html[data-theme="dark"] .form-control::-ms-input-placeholder { color: var(--muted) !important; opacity: 1; }
html[data-theme="dark"] .form-control::placeholder { color: var(--muted) !important; opacity: 1; }

/* Ensure generic .text-secondary maps to muted in dark mode */
html[data-theme="dark"] .text-secondary { color: var(--muted) !important; }

/* Nav tabs / nav items */
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--text) !important; background: transparent !important; border-color: var(--site-border) !important; }
html[data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--link) !important; }
html[data-theme="dark"] .nav-tabs .nav-link.active { background: #004488 !important; color: var(--text) !important; border-color: var(--site-border) !important; }
html[data-theme="dark"] .nav-item .nav-link { color: var(--text) !important; }

/* Badges and chips used in musician profile */
html[data-theme="dark"] .badge.bg-secondary-subtle,
html[data-theme="dark"] .badge.bg-secondary-subtle.text-dark,
html[data-theme="dark"] .badge.bg-secondary-subtle.text-bg-primary {
  background: rgba(209, 3, 3, 0.03) !important;
  color: var(--text) !important;
  border: 1px solid var(--site-border) !important;
}

/* Filter chips */
html[data-theme="dark"] .mus-genres-chips .filter-chip,
html[data-theme="dark"] .mus-inst-chips .filter-chip,
html[data-theme="dark"] .genres-checkboxes .genre-check-item {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--site-border) !important;
  color: var(--text) !important;
}

/* Form controls / inputs background */
html[data-theme="dark"] .form-control { background: rgba(255,255,255,0.02) !important; color: var(--text) !important; border-color: var(--site-border) !important; }

/* Ensure select boxes match dark theme as well (profile edit selects were still white) */
html[data-theme="dark"] .form-select,
html[data-theme="dark"] select.form-select,
html[data-theme="dark"] .form-select.form-select-sm {
  background: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border-color: var(--site-border) !important;
}
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] select.form-select:focus {
  box-shadow: 0 0 0 .15rem rgba(0,0,0,0.35) !important;
}
/* Options dropdown background when opened (may be user-agent dependent) */
html[data-theme="dark"] .form-select option,
html[data-theme="dark"] select.form-select option {
  background: var(--card) !important;
  color: var(--text) !important;
}

/* Rehearsal room / hero overrides */
html[data-theme="dark"] .hero{ background: linear-gradient(135deg,#071018,#0b0f12) !important; }
html[data-theme="dark"] .hero__bg{ opacity: .6 !important; filter: brightness(.7) contrast(.95) !important; }
html[data-theme="dark"] .hero__overlay { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.85)) !important; }
html[data-theme="dark"] .hero__title, html[data-theme="dark"] .hero__meta { color: var(--text) !important; }
html[data-theme="dark"] .pill{ background: rgba(255, 0, 0, 0.03) !important; color: var(--text) !important; border: 1px solid var(--site-border) !important; }
html[data-theme="dark"] .pill--status-open{ background:#138445 !important; color:#fff !important; }
html[data-theme="dark"] .pill--status-closed{ background:#b91c1c !important; color:#fff !important; }
/* Consolidated schedule slot outline colors for dark theme
   - owner: slightly muted green for high contrast (#1f8a4d)
   - off: darker amber/gold for visibility (#b8860b)
   These replace per-view inline overrides and keep .slot-outline-other unchanged. */
html[data-theme="dark"] .badge.slot-outline-owner,
html[data-theme="dark"] .schedule-booked.slot-outline-owner,
html[data-theme="dark"] .schedule-pending.slot-outline-owner,
html[data-theme="dark"] .slot-outline-owner {
  border-color: #1f8a4d !important;
  color: #e6e6e6 !important;
}
html[data-theme="dark"] .badge.slot-outline-off,
html[data-theme="dark"] .schedule-booked.slot-outline-off,
html[data-theme="dark"] .schedule-pending.slot-outline-off,
html[data-theme="dark"] .slot-outline-off {
  border-color: #b8860b !important;
  color: #e6e6e6 !important;
}

/* Card-x specific tweaks for rehearsal pages */


html[data-theme="dark"] .card-x{ background: var(--card) !important; border: 1px solid var(--site-border) !important; color: var(--text) !important; }
html[data-theme="dark"] .card-x__head{ border-bottom-color: rgba(255,255,255,0.03) !important; }
html[data-theme="dark"] .gcell{ background: rgba(255,255,255,0.02) !important; border-color: var(--site-border) !important; }
html[data-theme="dark"] .gcell::after{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.03) !important; }

/* Map iframe container border */
html[data-theme="dark"] .card-x .ratio iframe{ border: 1px solid rgba(255,255,255,0.04); }

/* Equipment item background */
html[data-theme="dark"] .eqi{ background: rgba(255,255,255,0.02) !important; border-color: var(--site-border) !important; }
html[data-theme="dark"] .eqi__name{ color: var(--text) !important; }
html[data-theme="dark"] .eqi__desc{ color: var(--muted) !important; }

/* Musicians filters: dark-mode adjustments */
html[data-theme="dark"] .mus-filters-shell{
  background: var(--card) !important;
  border: 1px solid var(--site-border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .mus-filters-shell .card-body{ background: transparent !important; }
html[data-theme="dark"] .mus-filters-shell .form-label{ color: var(--muted) !important; }
html[data-theme="dark"] .mus-filters-shell .form-select,
html[data-theme="dark"] .mus-filters-shell .form-control{ background: rgba(255,255,255,0.03) !important; color: var(--text) !important; border-color: var(--site-border) !important; }
html[data-theme="dark"] .mus-filters-shell .form-select option{ background: var(--card) !important; color: var(--text) !important; }
html[data-theme="dark"] .mus-filters-shell .btn-warning{ background: linear-gradient(90deg,#143582,#3053A6) !important; color:#fff !important; border-color: rgba(0,0,0,0.15) !important; }
html[data-theme="dark"] .mus-filters-shell .btn-outline-secondary{ color: var(--text) !important; border-color: var(--site-border) !important; }
html[data-theme="dark"] .mus-filters-shell .btn-outline-secondary .badge{ background: rgba(255,255,255,0.06) !important; color: var(--text) !important; }

/* Filter chips specific styles */
html[data-theme="dark"] .mus-genres-chips .filter-chip,
html[data-theme="dark"] .mus-inst-chips .filter-chip{ background: rgba(255,255,255,0.02) !important; color: var(--text) !important; border: 1px solid var(--site-border) !important; }
html[data-theme="dark"] .mus-genres-chips .filter-chip:hover,
html[data-theme="dark"] .mus-inst-chips .filter-chip:hover{ background: rgba(255,255,255,0.04) !important; }
html[data-theme="dark"] .mus-genres-chips .filter-chip.active,
html[data-theme="dark"] .mus-inst-chips .filter-chip.active{ background: linear-gradient(90deg,var(--brand),#19a66a) !important; color: #111 !important; box-shadow: 0 8px 30px rgba(0,0,0,0.55) !important; }

/* Small helper: reset .text-secondary inside filters to muted */
html[data-theme="dark"] .mus-filters-shell .text-secondary{ color: var(--muted) !important; }

/* Flash/alert messages (success, info, warning, danger) in dark mode */
html[data-theme="dark"] .alert {
  background: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
}

html[data-theme="dark"] .alert-success {
  background: linear-gradient(90deg, rgba(16,185,129,0.06), rgba(16,185,129,0.03)) !important;
  color: #e6ffef !important;
  border-color: rgba(16,185,129,0.12) !important;
}

html[data-theme="dark"] .alert-info {
  background: linear-gradient(90deg, rgba(59,130,246,0.05), rgba(59,130,246,0.03)) !important;
  color: #e6f0ff !important;
  border-color: rgba(59,130,246,0.10) !important;
}

html[data-theme="dark"] .alert-warning {
  background: linear-gradient(90deg, rgba(245,158,11,0.05), rgba(245,158,11,0.03)) !important;
  color: #fff7e6 !important;
  border-color: rgba(245,158,11,0.10) !important;
}

html[data-theme="dark"] .alert-danger {
  background: linear-gradient(90deg, rgba(239,68,68,0.05), rgba(239,68,68,0.03)) !important;
  color: #ffe6e6 !important;
  border-color: rgba(239,68,68,0.10) !important;
}

/* Ensure close button is visible on dark alerts */
html[data-theme="dark"] .alert .btn-close {
  filter: brightness(1.6) !important;
  opacity: 0.95 !important;
}

/* Ensure tables use dark backgrounds in dark theme */
html[data-theme="dark"] {
  /* Bootstrap table variables */
  --bs-table-bg: var(--card) !important;
  --bs-table-striped-bg: rgba(255,255,255,0.02) !important;
  --bs-table-striped-color: var(--text) !important;
}

/* Ensure Bootstrap body/bg helpers map correctly in dark theme */
html[data-theme="dark"] {
  --bs-body-bg: var(--bg) !important;
}

/* Explicit `.bg-body` dark-mode override (some Bootstrap versions use this helper) */
html[data-theme="dark"] .bg-body,
body[data-theme="dark"] .bg-body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  border-color: transparent !important;
}

/* Strong enforcement for user-requested selectors: make everything dark when
   the data-theme attribute is set on html or body. This beats inline/bg-light
   styles and third-party components by using !important and includes common
   components that were showing white boxes in dark mode. */



/* Extra targeted overrides for elements that were frequently overridden */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .autocomplete-list .item {
  background-color: #121212 !important;
  color: #e6e6e6 !important;
  border-color: var(--site-border) !important;
}

/* Explicit rules for table elements to avoid third-party overrides forcing white */
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
  background: var(--bs-table-bg) !important;
  color: var(--text) !important;
  border-color: var(--site-border) !important;
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
  background: transparent !important; /* cells inherit table bg */
  color: var(--text) !important;
  border-color: var(--site-border) !important;
}

/* ------------------------------------------------------------------
   Global site-border application
   Apply the requested site border color variable to a broad set of
   commonly-bordered components so the change takes effect across the
   UI. We use !important sparingly here to ensure theme preference wins
   over inline or third-party defaults where necessary.
   ------------------------------------------------------------------ */
.card, .band-card, .rehearsal-space-card, .studio-card, .card-body, .card-title,
.form-control, .form-select, .input-group > .form-control, .input-group .form-select,
.mus-filters-shell, .invite-card, .invitation-banner, .autocomplete-list .item,
.mus-genres-chips .filter-chip, .genres-checkboxes .genre-check-item,
.table, table, .band-card-cover, .cards-grid .feature-card, .feature-card,
.badge, .pill, .band-card-cover .cover-overlay {
  border-color: var(--site-border) !important;
}

/* Ensure small UI elements that explicitly set borders in dark mode
   also pick up the site-border variable */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .genres-checkboxes .genre-check-item {
  border-color: var(--site-border) !important;
}

/* Ensure specific small, borderless tables used in profile headers/cards
   don't show a white box in dark mode. This targets the exact selector the
   UI uses and forces a transparent background and dark-mode text/borders. */
html[data-theme="dark"] .table.table-borderless.small.mb-0,
body[data-theme="dark"] .table.table-borderless.small.mb-0,
html[data-theme="dark"] .table.table-borderless.small.mb-0 th,
html[data-theme="dark"] .table.table-borderless.small.mb-0 td,
body[data-theme="dark"] .table.table-borderless.small.mb-0 th,
body[data-theme="dark"] .table.table-borderless.small.mb-0 td{
  background: transparent !important;
  color: var(--text) !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .table.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bs-table-striped-bg) !important;
}


/* Prevent profile dropdown (avatar menu) from pushing navbar height when opened.
   Apply on all screen sizes (including smartphones) so the avatar menu overlays
   instead of expanding the navbar. Keep a sensible max-width on small screens.
*/
.navbar .nav-right-profile { position: relative; }
.navbar .nav-right-profile .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1060 !important;
  will-change: transform;
  max-width: 95vw !important; /* avoid overflowing the screen on small devices */
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
}

/* Ensure dropdown items wrap nicely on tiny screens */
.navbar .nav-right-profile .dropdown-menu .dropdown-item { white-space: normal !important; }

/* Navbar toggler (hamburger) - use white lines in dark theme for visibility */
html[data-theme="dark"] .navbar-light .navbar-toggler-icon,
body[data-theme="dark"] .navbar-light .navbar-toggler-icon {
  /* SVG with white strokes */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  /* remove any filters applied elsewhere */
  filter: none !important;
}