/* WAVESTREAM CUSTOMER DASHBOARD V2 */
/* Customer-only. Uses existing theme variables. */

body[data-customer-role="1"] .cafe-dashboard-theme-scope {
  --cv2-surface: var(--theme-surface, var(--surface));
  --cv2-surface2: var(--theme-surface-2, var(--surface));
  --cv2-text: var(--theme-text, var(--text));
  --cv2-accent: var(--theme-accent, var(--accent));
  --cv2-border: var(--theme-border, rgba(128,128,128,.25));
}

body[data-customer-role="1"] .customer-shell {
  max-width: 1480px;
  margin-inline: auto;
}

body[data-customer-role="1"] .customer-head {
  padding: 26px 28px;
  border: 1px solid var(--cv2-border);
  border-radius: 20px;
  background: var(--cv2-surface);
  color: var(--cv2-text);
  margin-bottom: 20px;
}

body[data-customer-role="1"] .customer-head h1 {
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -.035em;
  margin-top: 7px;
}

body[data-customer-role="1"] .player-card {
  background: var(--cv2-surface) !important;
  color: var(--cv2-text) !important;
  border: 1px solid var(--cv2-border);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 20px;
  text-align: center;
}

body[data-customer-role="1"] .player-card h2 {
  font-size: clamp(23px, 2.5vw, 32px);
  color: var(--cv2-text);
}

body[data-customer-role="1"] .customer-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0;
}

body[data-customer-role="1"] .customer-channel-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px !important;
  border-radius: 18px !important;
  background: var(--cv2-surface) !important;
  color: var(--cv2-text) !important;
  border: 1px solid var(--cv2-border);
  transition: transform .18s, box-shadow .18s;
}

body[data-customer-role="1"] .customer-channel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

body[data-customer-role="1"] .customer-channel-card h3 {
  font-size: 22px;
  letter-spacing: -.025em;
  color: var(--cv2-text);
}

body[data-customer-role="1"] .customer-channel-card.default-channel {
  border-color: var(--cv2-accent);
  border-width: 2px;
}

body[data-customer-role="1"] .channel-health-content {
  flex: 1;
  min-height: 76px;
  overflow-wrap: anywhere;
}

body[data-customer-role="1"] .channel-player-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

body[data-customer-role="1"] .channel-player-actions form {
  flex: 1 1 130px;
  min-width: 0;
}

body[data-customer-role="1"] .channel-player-actions button {
  width: 100%;
  min-height: 43px;
}

body[data-customer-role="1"] .inline-cafe-player {
  border-radius: 20px !important;
  background: var(--cv2-surface) !important;
  color: var(--cv2-text) !important;
  border: 1px solid var(--cv2-accent);
  padding: 24px !important;
  margin: 20px 0;
}

body[data-customer-role="1"] .schedule-dashboard-entry {
  background: var(--cv2-surface) !important;
  color: var(--cv2-text) !important;
  border-radius: 18px !important;
  border: 1px solid var(--cv2-border);
  padding: 24px !important;
}

body[data-customer-role="1"] .customer-grid > .card {
  background: var(--cv2-surface) !important;
  color: var(--cv2-text) !important;
  border: 1px solid var(--cv2-border);
  border-radius: 18px !important;
}

body[data-customer-role="1"] .cafe-dashboard-theme-scope
:is(.customer-channel-card, .player-card, .customer-head)
:is(h1,h2,h3,strong) {
  color: var(--cv2-text);
}

@media(max-width:1100px) {
  body[data-customer-role="1"] .customer-channel-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media(max-width:650px) {
  body[data-customer-role="1"] .customer-channel-grid {
    grid-template-columns: 1fr;
  }
  body[data-customer-role="1"] .customer-head,
  body[data-customer-role="1"] .player-card,
  body[data-customer-role="1"] .customer-channel-card {
    padding: 18px !important;
  }
}

@media(prefers-reduced-motion:reduce) {
  body[data-customer-role="1"] .customer-channel-card {
    transition: none;
  }
  body[data-customer-role="1"] .customer-channel-card:hover {
    transform: none;
  }
}


/* WS_CUSTOMER_LAYOUT_V21 */
body[data-customer-role="1"] .ws-customer-quicknav {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:22px 0 26px;
}

body[data-customer-role="1"] .ws-customer-quicknav a {
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:20px;
  text-decoration:none;
  color:var(--theme-text,var(--text));
  background:var(--theme-surface,var(--surface));
  border:1px solid var(--theme-border,#77889955);
  border-radius:16px;
  min-width:0;
  transition:transform .15s ease;
}

body[data-customer-role="1"] .ws-customer-quicknav a:hover {
  transform:translateY(-2px);
  border-color:var(--theme-accent,var(--accent));
}

body[data-customer-role="1"] .ws-customer-quicknav a span {
  font-size:25px;
  color:var(--theme-accent,var(--accent));
}

body[data-customer-role="1"] .ws-customer-quicknav a strong {
  font-size:16px;
  color:inherit;
}

body[data-customer-role="1"] .ws-customer-quicknav a small {
  color:var(--theme-text,var(--text));
  opacity:.72;
}

body[data-customer-role="1"] .ws-music-section-head {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:30px 0 14px;
}

body[data-customer-role="1"] .ws-music-section-head h2 {
  margin:7px 0;
  color:var(--theme-text,var(--text));
}

body[data-customer-role="1"] .ws-channel-count {
  padding:10px 15px;
  border-radius:30px;
  color:var(--theme-text,var(--text));
  background:var(--theme-accent-soft,#77889922);
  font-weight:700;
}

body[data-customer-role="1"] #ws-music-channels,
body[data-customer-role="1"] #ws-music-schedule {
  scroll-margin-top:85px;
}

@media(max-width:650px) {
  body[data-customer-role="1"] .ws-customer-quicknav {
    grid-template-columns:1fr;
    gap:10px;
  }
  body[data-customer-role="1"] .ws-customer-quicknav a {
    padding:14px 17px;
  }
}

@media(prefers-reduced-motion:reduce) {
  body[data-customer-role="1"] .ws-customer-quicknav a {
    transition:none;
  }
}


/* WS_CUSTOMER_PLAYER_V22 */

/* Music player */
body[data-customer-role="1"] .inline-cafe-player:not([hidden]) {
  display:block;
  border:2px solid var(--theme-accent,var(--accent)) !important;
  border-radius:20px;
  padding:26px !important;
  background:var(--theme-surface,var(--surface)) !important;
  color:var(--theme-text,var(--text)) !important;
  box-shadow:0 14px 35px rgba(0,0,0,.10);
}

body[data-customer-role="1"] .inline-cafe-player[hidden] {
  display:none !important;
}

body[data-customer-role="1"] .inline-player-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:18px;
}

body[data-customer-role="1"] #inline-player-title {
  font-size:clamp(22px,2.5vw,30px);
  letter-spacing:-.035em;
  overflow-wrap:anywhere;
}

body[data-customer-role="1"] #inline-player-artist {
  font-size:15px;
  overflow-wrap:anywhere;
}

body[data-customer-role="1"] #inline-dashboard-audio {
  width:100%;
  max-width:100%;
  min-height:50px;
  border-radius:12px;
}

body[data-customer-role="1"] .inline-player-live {
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  color:var(--theme-text,var(--text));
}

body[data-customer-role="1"] .inline-live-dot {
  background:#16b989;
  box-shadow:0 0 0 4px rgba(22,185,137,.15);
}

/* Channel cards */
body[data-customer-role="1"] .customer-channel-card {
  position:relative;
  gap:14px;
  overflow:hidden;
  box-shadow:0 5px 18px rgba(0,0,0,.045);
}

body[data-customer-role="1"] .customer-channel-card.default-channel {
  border-color:var(--theme-accent,var(--accent)) !important;
  border-width:2px !important;
}

body[data-customer-role="1"] .channel-card-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

body[data-customer-role="1"] .channel-card-top h3 {
  margin:7px 0 0;
  font-size:clamp(20px,2vw,25px);
  line-height:1.2;
  overflow-wrap:anywhere;
}

body[data-customer-role="1"] .channel-health-content {
  padding:16px;
  border-radius:12px;
  background:var(--theme-muted-surface,var(--theme-surface-2));
  color:var(--theme-text,var(--text));
  min-height:80px;
}

body[data-customer-role="1"] .channel-health-now-playing {
  margin:0;
  line-height:1.65;
  overflow-wrap:anywhere;
}

body[data-customer-role="1"] .channel-health-artist {
  font-size:15px;
  font-weight:750;
}

body[data-customer-role="1"] .channel-health-title {
  font-size:14px;
  opacity:.83;
}

body[data-customer-role="1"] .channel-player-actions {
  margin-top:auto;
  padding-top:10px;
}

body[data-customer-role="1"] .channel-play-button {
  min-height:46px;
  border-radius:11px;
  font-weight:700;
  white-space:normal;
}

body[data-customer-role="1"] .customer-channel-card
.channel-player-actions button:focus-visible {
  outline:3px solid var(--theme-accent,var(--accent));
  outline-offset:3px;
}

/* General customer card consistency */
body[data-customer-role="1"] .cafe-dashboard-theme-scope
:is(.customer-channel-card,.inline-cafe-player,.schedule-dashboard-entry)
.muted {
  color:var(--theme-muted,var(--muted));
}

@media(max-width:650px) {
  body[data-customer-role="1"] .inline-cafe-player:not([hidden]) {
    padding:18px !important;
  }

  body[data-customer-role="1"] .channel-card-top {
    flex-wrap:wrap;
  }

  body[data-customer-role="1"] .channel-player-actions {
    flex-direction:column;
  }

  body[data-customer-role="1"] .channel-player-actions form {
    flex:0 0 auto;
    width:100%;
  }
}