/* vim:set tabstop=8 softtabstop=8 shiftwidth=8 noexpandtab: */

/**
 *
 * LICENSE: GNU Affero General Public License, version 3 (AGPL-3.0-or-later)
 * Copyright Ampache.org, 2001-2024
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 */

/* --------------------------
   General style rules
   -------------------------- */

:root {
    color-scheme: dark;
    --amp-surface: hsl(0, 0%, 10%);
    --amp-raised: #2d2d2d;
    --amp-border: hsl(0, 0%, 30%);
    --amp-muted: #b0b0b0;
    --amp-accent: #ff9d00;
    --amp-accent-ink: #1a1a1a;
    accent-color: #ff9d00;
}

body {
    color: #fff;
    background-color: #222;
    height: 90%;
}

.error {
    color: #c33;
}

a {
    color: #ff9d00;
}

a:hover {
    color: #ffc466;
}

hr {
    border-top-color: #eee;
}

input[type=password],
input[type=text],
input[type=checkbox],
input[type=radio],
input[type=url],
input[type=year],
select,
textarea {
    background-color: hsl(0, 0%, 10%);
    background-image: linear-gradient(to top, hsl(0, 0%, 12%), hsl(0, 0%, 8%));
    border-color: hsl(0, 0%, 30%);
}

/* :root sets color-scheme: dark, which the popup inherits and uses to pick the highlighted */
/* row's UA text/highlight colors; opting the control back into light scheme fixes most of it, */
/* but Firefox's focused/checked row still uses its own UA selection color at higher priority */
/* than an unqualified author rule, so those two states are re-declared with !important below */
select {
    color-scheme: light;
    /* the light scheme above is for the popup rows; without this the closed control takes that scheme's
       black as its text color and disappears into the dark background declared above */
    color: #fff;
}

select option {
    background-color: #fff !important;
    color: #000 !important;
}

select option:hover,
select option:checked,
select:focus option:checked {
    background-color: #ddd !important;
    color: #000 !important;
}

button,
input[type=button],
input[type=submit],
.editdialogstyle.ui-dialog .ui-dialog-buttonset button {
    background-image: linear-gradient(to top, #ff9d00, #cc6200);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #fff;
}

button:hover,
button:focus,
input[type=button]:hover,
input[type=button]:focus,
input[type=submit]:hover,
input[type=submit]:focus,
.editdialogstyle.ui-dialog .ui-dialog-buttonset button:hover {
    background-color: #cc6200;
}

button:focus:active,
input[type=button]:focus:active,
input[type=submit]:focus:active {
    box-shadow: inset 0 0 3px #000, 0 1px 0 rgba(255, 255, 255, 0.1);
}

.edit_dialog_content input[type=text],
.edit_dialog_content select {
    color: #fff;
}

.edit_dialog_content input:focus,
.edit_dialog_content select:focus {
    color: #555;
    background: #fff;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ffc763;
}

.playlistdialogstyle.ui-dialog,
.playlistdialogstyle.ui-dialog .ui-dialog-content,
.sharedialogstyle.ui-dialog .ui-dialog-content,
.playlistdialogstyle.ui-widget-content a,
.editdialogstyle.ui-dialog.ui-widget-content a,
.broadcastsdialogstyle.ui-widget-content a,
.sharedialogstyle.ui-widget-content a {
    background-color: #222;
    color: #999;
}

.editdialogstyle.ui-dialog.ui-widget-content a,
.editdialogstyle.ui-dialog.ui-widget-content a:hover {
    background-color: unset;
}

.editdialogstyle.ui-dialog .ui-dialog-titlebar,
.editdialogstyle.ui-dialog.ui-widget-content a:hover,
.playlistdialogstyle.ui-widget-content a:hover,
.broadcastsdialogstyle.ui-widget-content a:hover,
.sharedialogstyle.ui-widget-content a:hover {
    color: #fff;
}

.ui-icon-close {
    background-color: #f0f0f0;
}

/* --------------------------
   Main
   -------------------------- */
#ajax-loading {
    color: #ff9d00;
    background-image: url('../images/ajax-loader.gif');
}

/* --------------------------
   Header
   -------------------------- */
#header {
    background-color: #000;
    border-bottom: 2px solid #2d2d2d;
    box-shadow: 0 18px 18px rgba(30, 30, 30, 0.7);
}

#sb_Subsearch input[type=text]:focus {
    border-color: #ff9d00;
}

/* --------------------------
   Login
   -------------------------- */
#loginPage {
    background-color: #000;
}

#loginPage #maincontainer { /* , #registerPage #maincontainer */
    background-color: rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
}

#loginPage #loginbox {
    color: #999;
}

#loginPage #loginbox div,
#registerPage #registerbox div {
    text-shadow: 0 1px 0 #000;
    color: #999;
}

#loginPage #loginbox #usernamefield input:focus,
#loginPage #loginbox #emailfield input:focus,
#loginPage #loginbox #passwordfield input:focus {
    border-color: #f1b720;
    box-shadow: 0 0 10px #9ecaed;
}

#loginPage #loginbox #remembermefield {
    color: #eee;
}

/* the openid link is presented as a button, see #oidcbutton in default.css */
#loginPage #oidcbutton {
    border-color: #cc6200;
}

#loginPage #oidcbutton:hover,
#loginPage #oidcbutton:focus {
    background-color: #cc6200;
    color: #fff;
}

.formValidation input {
    color: #fff;
}

#loginPage span.error {
    background: #f99;
    border-color: #c33;
    color: #900;
}

#loginPage #footer {
    color: #888;
}

#loginPage #footer a {
    color: #555;
}

#loginPage #footer #donate {
    color: #ff9d00;
}

/* --------------------------
   Sidebar
   -------------------------- */
#sidebar {
    color: #999;
}

#sidebar-header {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    color: #999;
}

#sidebar-header:hover {
    color: #ffc466;
}

#sidebar_home,
#sidebar_localplay,
#sidebar_preferences,
#sidebar_admin,
#sidebar_logout {
    color: #fff;
}

#sidebar_home:hover,
#sidebar_localplay:hover,
#sidebar_preferences:hover,
#sidebar_admin:hover,
#sidebar_logout:hover {
    color: #ffc466;
}

#sidebar-content,
#sidebar-content-light,
#sidebar-light {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    background-color: #1a1a1a;
}

#sidebar-light-default {
    border-color: hsl(0, 0%, 30%);
    background: #1a1a1a;
}
/* Tabs content */
#sidebar-page {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
}

#sidebar-tabs .active > a {
    color: #ff9d00;
}

#sidebar-tabs .sb2 li h4 {
    color: #fff;
    background-color: #262626;
    border-bottom-color: #0f0f0f;
    box-shadow: 0 1px 0 #2a2a2a, inset 0 1px 1px #000;
}

#sidebar-tabs .sb2 li ul li a {
    color: #999;
}

#sidebar-tabs .sb2 li ul li a:hover {
    color: #fff;
}

#sidebar-tabs .sb2 #browse_filters #multi_alpha_filter {
    border-color: #bbb;
}

.topmenu_item span {
    color: #ff9d00;
}

.topmenu_item:hover {
    border: 2px solid #ff9d00;
}

.image-topmenu-album,
.image-topmenu-artist,
.image-topmenu-favorite,
.image-topmenu-home,
.image-topmenu-logout,
.image-topmenu-playlist,
.image-topmenu-radio,
.image-topmenu-smartlist,
.image-topmenu-tagcloud,
.image-topmenu-upload {
  fill: #ff9d00;
}

.image-topmenu-album:hover,
.image-topmenu-artist:hover,
.image-topmenu-favorite:hover,
.image-topmenu-home:hover,
.image-topmenu-logout:hover,
.image-topmenu-playlist:hover,
.image-topmenu-radio:hover,
.image-topmenu-smartlist:hover,
.image-topmenu-tagcloud:hover,
.image-topmenu-upload:hover {
  fill: #ffc466;
}

/* Localplay */
.active_instance {
    border-color: #fff;
}

/* --------------------------
   Rightbar
   -------------------------- */
#rightbar {
    background-color: #222;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    color: #fff;
}

#rightbar #rb_action {
    color: #ff9d00;
}

#rightbar #rb_current_playlist li {
    color: #fff;
}

#rightbar #rb_current_playlist li a {
    color: #eee;
}

#rightbar #rb_current_playlist li a:hover,
#rightbar #rb_current_playlist li a:focus {
    color: #fff;
    background-color: #c85a00;
    background-image: linear-gradient(to top, #cc6200, #c24d00);
}

#rightbar .submenu {
    background-color: #222;
    border-color: silver;
}

#rightbar .submenu a {
    border-bottom-color: #ddd;
    color: #eee;
}

#rightbar .submenu a:hover {
    color: #ff9d00;
}

/* --------------------------
   Content
   -------------------------- */
#content {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    color: #fff;
}

.list-header,
.list-header a {
    color: #999;
}

.list-header a:hover,
.list-header a:focus {
    color: #fff;
}

span.page-nb {
    color: #ff9d00;
}

table.tabledata {
    color: #eee;
}

span.page-text,
table.tabledata a {
    color: #eee;
}

#catalog_type_fields table.tabledata a {
    color: #ff9d00;
}

table.tabledata a:hover,
table.tabledata a:focus {
    color: #ffc466;
}

table.tabledata thead .th-top,
table.tabledata tfoot .th-bottom {
    background-color: #262626;
    box-shadow: 0 1px 0 #2a2a2a, inset 0 1px 1px #000;
}

table.tabledata thead .th-top {
    border-bottom-color: #0f0f0f;
}

table.tabledata tfoot .th-bottom {
    border-top-color: #0f0f0f;
}

table.tabledata th a {
    color: #ff9d00;
}

table.tabledata tr:hover,
table.tabledata tr:focus {
    background-color: #c85a00;
    background-image: linear-gradient(to top, #cc6200, #c24d00);
}

table.tabledata .th-top:hover,
table.tabledata .th-bottom:hover,
table.tabledata .th-top:focus,
table.tabledata .th-bottom:focus {
    color: #fff;
    background-color: #262626;
}

table.striped-rows tbody tr:nth-child(odd),
ul.striped-rows > li:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.1);
}

table.tabledata tbody .cel_cover img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

table.tabledata tbody .cel_cover img:hover {
    border-color: #ff9d00;
}

input:invalid {
    border: 4px solid red;
}

/* --------------------------
   Content (info-box)
   -------------------------- */
.random_selection .random_album .art_album img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

.random_selection .random_video .art_album img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

.random_selection .random_album .art_album img:hover {
    border-color: #ff9d00;
}

#content .missing_art {
    background-image: url('../images/missing.png');
}

/* --------------------------
    Content (now playing)
   -------------------------- */
#now_playing .cel_albumart img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

#now_playing .cel_lyrics a:hover {
    color: #09c;
}

/* --------------------------
    Content (Tag cloud)
   -------------------------- */
span.fatalerror {
    color: #c60;
}

.box-content #tag_filter .tag_button,
.box-content #mood_filter .tag_button {
    color: #fff;
}

.box-content #tag_filter .tag_button span:hover,
.box-content #mood_filter .tag_button span:hover {
    background-color: #c85a00;
    background-image: linear-gradient(to top, #cc6200, #c24d00);
}

/* --------------------------
    Content (information-actions)
   -------------------------- */
.item_properties {
    color: #999;
}

.item_art .item_art_play .item_art_play_icon,
.item_art .item_art_play_150 .item_art_play_icon {
    background-image: url('../images/videoplay.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.item_art .item_art_actions {
    background-color: rgba(0, 0, 0, 0.6);
}

.item_art img {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

.item_art:hover {
    color: #ff9d00;
}

#information_actions ul li {
    color: #999;
}

#information_actions a:hover,
#information_actions li:hover {
    color: #fff;
}

.item_inactive {
    color: #fff;
}

.multiselect-actions {
    background-color: #262626;
    color: #ccc;
}

/* outranks both the striped-row background and the tr:hover gradient, so a selected row always reads as selected */
table.tabledata tbody tr.selected,
table.tabledata tbody tr.selected:hover {
    background-color: rgba(255, 157, 0, 0.28);
    background-image: none;
}

.multiselect-actions a:hover {
    color: #fff;
}

/* ------------------------
    Styles for ratings / user flags
   ------------------------ */
.star-rating .global-rating {
    color: #999;
}

/* --------------------------
   Content (Track view)
   -------------------------- */
dl.media_details dt {
    color: #c60;
}

/* --------------------------
   Footer
   -------------------------- */
#footer a:hover {
    color: #09c;
}

#ampache_link {
    color: #555;
}

/* --------------------------
   Web Player
   -------------------------- */
div.jp-audio,
div.jp-audio-stream,
div.jp-video {
    color: #999;
    border: 1px solid #191919;
}

div.jp-video div.jp-interface {
    border-top: 1px solid #191919;
}

div.jp-title,
div.jp-playlist {
    background-color: #202020;
    border-top: 1px solid #191919;
}

.jp-no-solution {
    background: linear-gradient(to bottom, #3b3b3b, #111212);
    border-top: 1px solid #191919;
}

#webplayer {
    background-color: #191919 !important;
}

.jp-type-playlist {
    background-color: #191919;
}

#equalizer {
    background-color: rgba(25, 25, 25, 0.96);
}

#equalizer .eq-band {
    color: #ccc;
}

.playing_info,
div.playing_title a,
div.playing_artist a,
div.playing_album a,
div.playing_lyrics a {
    color: #eee;
}

div.jp-interface {
    background-color: #191919;
}

div.jp-playlist li {
    border-bottom: 1px solid #121212;
}

.jp-type-playlist .jp-playlist a {
    color: #fff;
}

.jp-type-playlist .jp-playlist a:hover,
.jp-type-playlist .jp-playlist a:active,
.jp-type-playlist .jp-playlist a:focus {
    color: #ff9d00;
}

.jp-type-playlist .jp-playlist a.jp-playlist-current {
    color: #ff9d00;
}

/* ------------------------
   Wunderbaum tree
   ------------------------ */
.wunderbaum {
    --wb-node-text-color: #fff;
    --wb-background-color: #222;
    --wb-alternate-row-color: #292929;
    --wb-alternate-row-color-hover: var(--wb-hover-color);
    --wb-focus-border-color: var(--wb-active-color);
    --wb-drop-source-color: var(--wb-hover-color);
    --wb-drop-target-color: var(--wb-active-color);
    --wb-hover-color: hsl(29, 100%, 20%);
    --wb-active-color: hsl(29, 100%, 40%);
    --wb-active-hover-color: var(--wb-active-color);
    --wb-active-color-grayscale: var(--wb-active-color);
    --wb-active-hover-color-grayscale: var(--wb-active-color);
}

/* --------------------------
   Other
   -------------------------- */
.jscroll-next {
    border-color: #ccc;
    background-color: #eee;
    color: #999;
}

.followbtn {
    background-color: #363f4a;
}

.missing_album {
    color: #bbb !important;
}

.user_online {
    background: #0f0;
}

.user_offline {
    background: #7f0000;
}

.user_disabled {
    background: #ccc;
}

.list-header-navmenu-border {
    border-color: #1d1d1d;
}

span.item-count,
span.item-duration,
span.query-count {
    color: #999;
}

a.option-list:hover {
    border-color: #1d1d1d;
}

.editdialogstyle.ui-dialog {
    background-image: url('../../../images/background.png') !important;
}

#tabs li a {
    color: #ff9d00;
}

#tabs li a:hover {
    color: #ffc466;
}

#tabs li.tab_active a {
    color: #fff;
}

/* Mobile off-canvas drawers need a solid (opaque) panel background so the
   dim backdrop behind them doesn't show through. See the off-canvas block in default.css.
   @see //REBORN_MEDIA and keep in sync with default.css (portrait phones + short landscape phones). */
@media (max-width: 768px), (orientation: landscape) and (max-height: 540px) and (max-width: 1024px) {
    #sidebar,
    #rightbar {
        background-color: #222;
    }

    /* Loading toast blends into the header (matches #header bg). */
    #ajax-loading {
        background-color: #000;
    }
}

/* The confirm dialog is plain text and two buttons, so it owns its whole surface here. Reusing the
   edit dialog's selectors left the title bar and the button pane on jQuery UI's own light palette,
   which stacked three different backgrounds. Structure lives in default.css, colours only here. */
.confirmdialogstyle.ui-dialog {
    background-color: hsl(0, 0%, 13%);
    border-color: hsl(0, 0%, 30%);
}

.confirmdialogstyle.ui-dialog .ui-dialog-titlebar {
    background: hsl(0, 0%, 18%);
    border-bottom-color: hsl(0, 0%, 28%);
    color: #fff;
}

.confirmdialogstyle.ui-dialog .ui-dialog-content {
    background-color: hsl(0, 0%, 13%);
    color: #ddd;
}

.confirmdialogstyle.ui-dialog .ui-dialog-buttonpane {
    background-color: hsl(0, 0%, 13%);
    border-top-color: hsl(0, 0%, 28%);
}

/* Both buttons are set outright rather than left to whatever jQuery UI puts on them: the cancel
   button was picking up a pale background while keeping white text, which made it unreadable. */
.confirmdialogstyle.ui-dialog .ui-dialog-buttonset button {
    background: hsl(0, 0%, 26%);
    background-image: none;
    border: 1px solid hsl(0, 0%, 38%);
    color: #fff;
    text-shadow: none;
}

.confirmdialogstyle.ui-dialog .ui-dialog-buttonset button:hover,
.confirmdialogstyle.ui-dialog .ui-dialog-buttonset button:focus {
    background: hsl(0, 0%, 33%);
    border-color: hsl(0, 0%, 48%);
}

/* accept is the primary action, so it keeps the theme's orange */
.confirmdialogstyle.ui-dialog .ui-dialog-buttonset button:first-child {
    background-image: linear-gradient(to top, #ff9d00, #cc6200);
    border-color: #cc6200;
}

.confirmdialogstyle.ui-dialog .ui-dialog-buttonset button:first-child:hover,
.confirmdialogstyle.ui-dialog .ui-dialog-buttonset button:first-child:focus {
    background-image: linear-gradient(to top, #ffad20, #d96900);
    border-color: #ff9d00;
}
/* Sam's Music — wallpaper-matched frosted login. Scoped to the login page. */
#loginPage {
    --glass-ink: #f2f7fa;
    --glass-muted: #bed0dc;
    --glass-sky: #a2d7f3;
    --glass-amber: #edbc78;
    color-scheme: dark;
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    box-sizing: border-box;
    padding: 40px 20px 18px;
    gap: 24px;
    background-color: #101e29;
    background-attachment: fixed;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--glass-ink);
    isolation: isolate;
}

/* A light tint leaves the scenery visible outside the card. */
#loginPage::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(135deg, rgba(9, 24, 34, .16), rgba(10, 22, 31, .08) 45%, rgba(7, 18, 26, .24));
}

#loginPage #maincontainer {
    position: relative;
    flex: 0 0 auto;
    width: min(100%, 430px);
    max-width: 430px;
    margin: auto;
    padding: 30px 34px 26px;
    box-sizing: border-box;
    border: 1px solid rgba(207, 230, 241, .23);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(27, 48, 62, .77), rgba(12, 27, 38, .84));
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    backdrop-filter: blur(24px) saturate(125%);
    box-shadow: 0 24px 80px rgba(3, 13, 22, .36), inset 0 1px 0 rgba(236, 248, 255, .15);
}

/* Tiny static grain; no image request, animation, or pointer interception. */
#loginPage #maincontainer::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

#loginPage #header {
    position: static;
    width: 86px;
    height: 86px;
    min-height: 0;
    margin: 0 auto 18px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#loginPage #logo {
    display: block;
    width: 86px;
    height: 86px;
    padding: 0;
}

#loginPage #header #logo img {
    display: block;
    width: 86px;
    height: 86px;
    max-height: none;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18));
}

#loginPage #loginbox { max-width: 100%; color: var(--glass-ink); }
#loginPage #loginbox h2 {
    display: block;
    margin: 0 0 22px;
    padding: 0;
    color: var(--glass-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
    letter-spacing: .01em;
}
#loginPage #loginbox div { color: var(--glass-ink); text-shadow: none; font-size: 14px; }
#loginPage #loginbox .loginfield { padding: 0; margin: 0 0 18px; overflow: visible; }
#loginPage #loginbox label { color: #d7e4ed; font-size: 13px; font-weight: 500; }
#loginPage #usernamefield label,
#loginPage #passwordfield label { display: block; margin: 0 0 8px; }

#loginPage #loginbox input[type="text"],
#loginPage #loginbox input[type="password"] {
    display: block;
    width: 100%;
    height: 46px;
    min-width: 0;
    padding: 0 14px;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid rgba(180, 210, 226, .27);
    border-radius: 12px;
    background: rgba(7, 20, 29, .58);
    color: var(--glass-ink);
    font: inherit;
    font-size: 16px;
    text-shadow: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
    transition: border-color .16s, box-shadow .16s;
}

#loginPage #loginbox input[type="text"]:focus,
#loginPage #loginbox input[type="password"]:focus,
#loginPage #loginbox #usernamefield input:focus,
#loginPage #loginbox #passwordfield input:focus {
    outline: 2px solid rgba(162, 215, 243, .7);
    outline-offset: 2px;
    border-color: var(--glass-sky);
    box-shadow: 0 0 0 4px rgba(132, 196, 227, .12);
}

#loginPage #loginbox #remembermefield {
    display: flex;
    float: none;
    align-items: center;
    gap: 9px;
    padding: 0;
    margin: 2px 0 18px;
    color: var(--glass-muted);
}
#loginPage #remembermefield label { order: 1; cursor: pointer; font-weight: 400; }
#loginPage #loginbox #remembermefield input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    accent-color: var(--glass-sky);
}
#loginPage #loginbox .formValidation { float: none !important; width: 100%; }

#loginPage #loginbutton {
    display: block;
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    padding: 0 16px;
    margin: 0;
    border: 1px solid rgba(255, 229, 189, .45);
    border-radius: 12px;
    background: linear-gradient(120deg, #edc58d, #e9ad61);
    color: #241b10;
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    text-shadow: none;
    box-shadow: 0 5px 18px rgba(224, 163, 79, .16), inset 0 1px 0 rgba(255, 255, 255, .25);
    cursor: pointer;
}
#loginPage #loginbutton:hover { background: linear-gradient(120deg, #f6d29f, #efbd7d); }

#loginPage #loginbox .loginoptions {
    display: flex;
    gap: 14px;
    padding: 0;
    margin-top: 20px;
}
#loginPage #loginbox .loginoptions a { color: var(--glass-sky); text-shadow: none; }
#loginPage #miniplayerbutton,
#loginPage #lostpasswordbutton,
#loginPage #registerbutton {
    min-width: 0;
    padding: 3px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.5;
}
#loginPage #miniplayerbutton.selected { color: #d0e5b4; text-decoration: underline; }
#loginPage #loginbox #oidcbutton {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid rgba(161, 210, 237, .42);
    border-radius: 12px;
    background: rgba(96, 158, 190, .12);
    color: #cfebfb;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: background-color .16s, border-color .16s;
}
#loginPage #loginbox #oidcbutton:hover { background: rgba(128, 195, 225, .22); border-color: var(--glass-sky); }
#loginPage a:focus-visible,
#loginPage input[type="submit"]:focus-visible,
#loginPage input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--glass-sky);
    outline-offset: 4px;
}
#loginPage span.error,
#loginPage #loginbox .alert {
    color: #ffe2d9;
    background: rgba(106, 36, 32, .8);
    border: 1px solid #e99b83;
    border-radius: 10px;
    padding: 10px 12px;
    text-shadow: none;
}
#loginPage #footer {
    position: static;
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    padding: 7px 13px;
    margin: 0 auto;
    border-radius: 20px;
    background: rgba(9, 24, 34, .7);
    color: #d0dce4;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    text-shadow: none;
}
#loginPage #footer a,
#loginPage #footer #donate { color: #f2cd99; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #loginPage #maincontainer { background: rgba(14, 30, 42, .96); }
}
@media (max-width: 480px) {
    #loginPage { padding: 24px 16px 14px; gap: 20px; background-attachment: scroll; }
    #loginPage #maincontainer { padding: 26px 24px 24px; border-radius: 22px; }
    #loginPage #header,
    #loginPage #logo,
    #loginPage #header #logo img { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
    #loginPage #loginbox input, #loginPage #loginbox a { transition: none; }
}

/* Sam's Music: readable wallpaper-matched surfaces for the signed-in app. */
#main-page {
    --amp-surface: #122331;
    --amp-raised: #243b4c;
    --amp-border: #4c6577;
    --amp-muted: #c0d0dc;
    --amp-accent: #a9d9f3;
    --amp-accent-ink: #10212c;
    --music-text: #f0f5f8;
    --music-sky: #aedcf6;
    --music-warm: #edc58d;
    min-height: 100vh;
    height: auto;
    background-color: #10202d;
    background-attachment: fixed;
    color: var(--music-text);
    color-scheme: dark;
    accent-color: #acd9ef;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
}

/* One substantial tint per surface; scenery stays visible through the glass. */
#main-page #header {
    background: rgba(12, 27, 39, .94);
    border-bottom: 1px solid rgba(185, 214, 231, .28);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
    box-shadow: 0 5px 22px rgba(0, 9, 17, .26);
    color: var(--music-text);
}
#main-page #content {
    position: relative;
    z-index: 1;
    background: linear-gradient(145deg, rgba(23, 43, 58, .93), rgba(12, 28, 40, .94));
    border: 1px solid rgba(192, 220, 236, .24);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(22px) saturate(115%);
    backdrop-filter: blur(22px) saturate(115%);
    box-shadow: 0 12px 36px rgba(0, 10, 19, .28), inset 0 1px 0 rgba(236, 248, 255, .07);
    color: var(--music-text);
}
#main-page #sidebar-page,
#main-page #sidebar-content,
#main-page #sidebar-content-light,
#main-page #sidebar-light,
#main-page #sidebar-light-default,
#main-page #sidebar-header {
    background: rgba(13, 29, 42, .94);
    border-color: rgba(181, 211, 230, .24);
    box-shadow: none;
    color: #d6e4ee;
}
#main-page #sidebar-content,
#main-page #sidebar-content-light { border-radius: 12px 12px 0 0; }
#main-page #sidebar-page { border-radius: 0 0 12px 12px; }
#main-page #sidebar-header { border-radius: 10px; }
#main-page #sidebar-tabs .sb2 li h4 {
    background: #263e50;
    color: #edf5fa;
    border: 0;
    border-bottom: 1px solid #4a6171;
    box-shadow: none;
    font-size: 13px;
    font-weight: 650;
}
#main-page #sidebar-tabs .sb2 li ul li a {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #d2e2ed;
    font-size: 13px;
    text-shadow: none;
}
#main-page #sidebar-tabs .sb2 li ul li a:hover,
#main-page #sidebar-tabs .sb2 li ul li a:focus-visible {
    background: #324f63;
    color: #fff;
    border-radius: 5px;
}
#main-page #sidebar-tabs .active > a { color: #f2cd98; }
#main-page #rightbar,
#main-page #rightbar .submenu {
    background: rgba(14, 31, 44, .97);
    border: 1px solid #506b7d;
    border-radius: 12px;
    color: var(--music-text);
    box-shadow: 0 12px 32px rgba(0, 9, 17, .3);
}
#main-page #rightbar #rb_action { color: var(--music-sky); }
#main-page #rightbar #rb_current_playlist li a { color: #e7f1f7; }
#main-page #rightbar #rb_current_playlist li a:hover,
#main-page #rightbar #rb_current_playlist li a:focus {
    color: #fff;
    background: #324f63;
}

#main-page a { color: var(--music-sky); text-shadow: none; }
#main-page a:hover { color: #d5efff; }
#main-page :is(h1, h2, h3, h4, h5, label, legend) { color: #f0f5f8; text-shadow: none; }
#main-page #content .box-title {
    color: #f0f5f8;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(187, 214, 230, .2);
    overflow-wrap: anywhere;
}
#main-page #content :is(.item_properties, .list-header, .page-text, .object-header-kind) {
    color: var(--amp-muted);
}
#main-page #information_actions ul li { color: #d2e0ea; }
#main-page dl.media_details dt { color: #bdd5e6; font-weight: 600; }
#main-page dl.media_details dd { color: #f0f5f8; overflow-wrap: anywhere; }
#main-page .status-online { color: #b9dfad; }
#main-page .status-offline { color: #c2ced7; }
#main-page #content .user_avatar { margin: 0 0 20px 24px; }
#main-page #content .user_avatar :is(img, svg) {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border: 1px solid #506a7c;
    border-radius: 18px;
    background: #263e50;
}

#main-page :is(input[type="text"], input[type="password"], input[type="search"], input[type="url"], input[type="email"], input[type="number"], input[type="year"], select, textarea) {
    background: #102330;
    color: #f0f5f8;
    border: 1px solid #607b8e;
    border-radius: 8px;
    box-sizing: border-box;
    min-height: 34px;
    font-size: 14px;
    text-shadow: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
}
#main-page input::placeholder,
#main-page textarea::placeholder { color: #b7cbd9; opacity: 1; }
#main-page select { color-scheme: dark; }
#main-page select option { background: #162d3d !important; color: #f0f5f8 !important; }
#main-page select option:checked { background: #3c6079 !important; color: #fff !important; }
#main-page :is(button, input[type="submit"], input[type="button"]) {
    background: linear-gradient(120deg, #edc58d, #e6b06d);
    color: #241b10;
    border: 1px solid #efd1a3;
    border-radius: 8px;
    min-height: 34px;
    font-size: 14px;
    font-weight: 650;
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
#main-page :is(button, input[type="submit"], input[type="button"]):hover {
    background: #f4d3a4;
    color: #241b10;
}
#main-page :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid #b6e5ff;
    outline-offset: 3px;
}

/* Tables keep solid dark headers and restrained, readable row states. */
#main-page table.tabledata { color: #edf4f8; background: rgba(8, 22, 33, .24); font-size: 14px; line-height: 1.5; }
#main-page table.tabledata a { color: #d2eafa; }
#main-page table.tabledata :is(thead .th-top, tfoot .th-bottom),
#main-page table.tabledata th {
    background: #263f52;
    color: #ecf5fb;
    border-color: #506b7e;
    box-shadow: none;
    font-weight: 600;
}
#main-page table.tabledata th a { color: #c7e6fa; }
#main-page table.tabledata td { border-color: rgba(187, 215, 232, .13); }
#main-page table.striped-rows tbody tr:nth-child(odd),
#main-page ul.striped-rows > li:nth-child(odd) { background: rgba(153, 195, 221, .07); }
#main-page table.tabledata tbody tr:hover,
#main-page table.tabledata tbody tr:focus-within { background: #304c61; color: #fff; }
#main-page table.tabledata tbody tr.selected,
#main-page table.tabledata tbody tr.selected:hover { background: #435d64; color: #fff; }
#main-page .multiselect-actions { background: #2c4556; color: #edf4f8; }
#main-page .list-header-navmenu-border { border-color: #607b8e; border-radius: 8px; }
#main-page :is(.page-nb, .topmenu_item span) { color: #f2ce98; }
#main-page #tabs { display: flex; flex-wrap: wrap; gap: 5px; border-bottom: 1px solid #536e81; }
#main-page #tabs li { margin: 0; }
#main-page #tabs li a {
    display: inline-block;
    padding: 9px 14px;
    border-radius: 8px 8px 0 0;
    color: #c2d9e9;
    background: transparent;
    text-shadow: none;
}
#main-page #tabs li.tab_active a,
#main-page #tabs li a:hover { background: #345369; color: #fff; }

/* Menus and dialogs are opaque enough to read above any part of the wallpaper. */
#main-page :is(.ui-dialog, .ui-dialog-content, .ui-autocomplete, .context-menu-list, .context-menu-item, .tagit-choice, .dropdown-menu) {
    background: #162e3f;
    color: #eef5fa;
    border-color: #607e92;
    text-shadow: none;
}
#main-page :is(.ui-dialog-titlebar, .ui-widget-header, .context-menu-item.context-menu-hover) {
    background: #304d62;
    color: #fff;
    border-color: #607e92;
}
#main-page .ui-dialog a { color: #c6e8fc; }
#main-page #notification { background: #183a4c; color: #eff7fb; border-color: #83b4cf; }
#main-page :is(.error, .fatalerror) { color: #ffccc0; }

/* Player shell and its built-in widgets share the same dark palette. */
#main-page #webplayer { background: #102431 !important; border-top: 1px solid #5d788b; }
#main-page :is(.jp-type-playlist, .jp-interface, .jp-title, .jp-playlist, .jp-audio, .jp-video) {
    background: #102431;
    color: #e9f3f9;
    border-color: #4c687b;
}
#main-page :is(.playing_info, .playing_title a, .playing_artist a, .playing_album a, .playing_lyrics a) { color: #e8f3fa; }
#main-page #equalizer { background: #122b3b; color: #e5f2fa; }
#main-page #footer {
    color: #e0ebf2;
    text-shadow: none;
    background: rgba(10, 25, 36, .9);
    border-radius: 10px;
    padding: 8px 12px;
    box-sizing: border-box;
}
#main-page #footer a { color: #f0cc97; }

@media (max-width: 768px) {
    #main-page #sidebar { background: #112737; border-right: 1px solid #658094; }
    #main-page #content { border-radius: 12px; padding: 16px 12px 28px; }
    #main-page #content .user_avatar { margin: 0 0 16px 14px; }
    #main-page #content .user_avatar :is(img, svg) { width: 80px; height: 80px; border-radius: 12px; }
    #main-page #tabs li a { padding: 8px 10px; font-size: 13px; }
    #main-page #rightbar { background: #142c3d; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #main-page #content { background: #142a3b; }
}