/* WS3_ADMIN_MUSIC_V1 */

/* Only Music Channels / AzuraCast Servers */
body[data-admin-role="1"].ws3-admin-music {
  --music-panel:#14282a;
  --music-border:#35564b;
  --music-muted:#a7c4b5;
}

body.ws3-admin-music .content {
  min-width:0;
  max-width:100%;
}

body.ws3-admin-music .content > h1,
body.ws3-admin-music .content > .page-head h1 {
  font-size:clamp(27px,3vw,36px);
  letter-spacing:-.8px;
  font-weight:750;
  margin-bottom:10px;
}

body.ws3-admin-music .content > p,
body.ws3-admin-music .content .muted {
  color:var(--music-muted) !important;
  line-height:1.6;
}

/* Existing cards and management panels */
body.ws3-admin-music .content :is(
  .card,.panel,.form-card,.server-card,
  .channel-card,.station-card,.ws-card
) {
  background:var(--music-panel) !important;
  color:#eaf8ef !important;
  border:1px solid var(--music-border) !important;
  border-radius:15px !important;
  box-shadow:none !important;
  min-width:0;
  max-width:100%;
}

body.ws3-admin-music .content :is(
  .card,.panel,.form-card
) {
  padding:20px;
}

body.ws3-admin-music .content :is(
  .grid,.form-grid,.cards,.card-grid
) {
  min-width:0;
  max-width:100%;
}

body.ws3-admin-music .content :is(
  .grid,.form-grid,.cards,.card-grid
) > * {
  min-width:0;
}

/* Headings */
body.ws3-admin-music .content h2 {
  color:#eefaf3;
  font-size:19px;
  letter-spacing:-.3px;
}

body.ws3-admin-music .content h3 {
  color:#e8f7ee;
  font-size:15px;
}

/* Channel and server tables */
body.ws3-admin-music .ws3-music-table-scroll {
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:#527666 transparent;
  border:1px solid #35554b;
  border-radius:13px;
  margin:15px 0;
}

body.ws3-admin-music .content table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  background:#14282a !important;
}

body.ws3-admin-music .content th {
  background:#1d3933 !important;
  color:#a9cabc !important;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:10px;
  font-weight:750;
  white-space:nowrap;
  padding:13px 12px !important;
}

body.ws3-admin-music .content td {
  color:#e8f6ed !important;
  padding:13px 12px !important;
  border-color:#304d43 !important;
  vertical-align:middle;
}

body.ws3-admin-music .content tbody tr:hover td {
  background:#1b3531 !important;
}

body.ws3-admin-music .content td small {
  color:#acc7ba !important;
}

/* Forms and configuration */
body.ws3-admin-music .content label {
  color:#c7ded1;
  font-size:12px;
  font-weight:650;
}

body.ws3-admin-music .content :is(
  input:not([type=checkbox]):not([type=radio]),
  select,textarea
) {
  max-width:100%;
  min-width:0;
  background:#102326 !important;
  color:#f1faf3 !important;
  border:1px solid #486b5e !important;
  border-radius:9px !important;
  padding:10px 12px;
}

body.ws3-admin-music .content input::placeholder,
body.ws3-admin-music .content textarea::placeholder {
  color:#8daea0;
}

body.ws3-admin-music .content input:focus,
body.ws3-admin-music .content select:focus,
body.ws3-admin-music .content textarea:focus {
  outline:2px solid #9fe4c5;
  outline-offset:1px;
}

body.ws3-admin-music .content :is(
  input[type=checkbox],input[type=radio]
) {
  accent-color:#a6e8cd;
}

/* Preserve original action forms and endpoints */
body.ws3-admin-music .content :is(
  button,.button,.btn
) {
  border-radius:9px;
  font-weight:650;
}

body.ws3-admin-music .content :is(
  button,.button,.btn
):focus-visible {
  outline:2px solid #b4f3d7;
  outline-offset:2px;
}

body.ws3-admin-music .content .actions,
body.ws3-admin-music .content .row-actions,
body.ws3-admin-music .content .page-actions {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* Status badges */
body.ws3-admin-music .content :is(
  .badge,.pill,.status,.status-badge
) {
  border-radius:30px;
  font-size:11px;
  font-weight:700;
  padding:5px 10px;
  white-space:nowrap;
}

body.ws3-admin-music .content
:is(.badge,.pill,.status,.status-badge)
:is(.online,.active,.connected,.enabled),
body.ws3-admin-music .content
:is(.badge,.pill,.status,.status-badge).online,
body.ws3-admin-music .content
:is(.badge,.pill,.status,.status-badge).active,
body.ws3-admin-music .content
:is(.badge,.pill,.status,.status-badge).connected {
  background:#20503b !important;
  color:#b7f4d4 !important;
}

body.ws3-admin-music .content
:is(.badge,.pill,.status,.status-badge).offline,
body.ws3-admin-music .content
:is(.badge,.pill,.status,.status-badge).disabled {
  background:#482d32 !important;
  color:#f2bbbd !important;
}

/* Explicitly prevent long URLs or technical IDs
   from enlarging the entire page. */
body.ws3-admin-music .content :is(
  pre,code,.endpoint,.server-url
) {
  overflow-wrap:anywhere;
  max-width:100%;
}

body.ws3-admin-music .content pre {
  overflow-x:auto;
}

/* Tablet */
@media(max-width:1050px) {
  body.ws3-admin-music .content :is(
    .form-grid,.grid
  ) {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobile */
@media(max-width:760px) {
  body.ws3-admin-music .content {
    padding:19px 12px 55px !important;
  }

  body.ws3-admin-music .content :is(
    .card,.panel,.form-card
  ) {
    padding:15px !important;
  }

  body.ws3-admin-music .content :is(
    .form-grid,.grid,.cards,.card-grid
  ) {
    grid-template-columns:minmax(0,1fr) !important;
  }

  body.ws3-admin-music .content
  :is(input:not([type=checkbox]):not([type=radio]),
       select,textarea) {
    max-width:100% !important;
  }

  body.ws3-admin-music .content table {
    font-size:11px;
  }

  body.ws3-admin-music .content td,
  body.ws3-admin-music .content th {
    padding:10px !important;
  }
}