/* 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;
    --amp-text: #fff;
    --amp-bg: #222;
    --amp-accent-hover: #ffc466;
    --amp-accent-dark: #cc6200;
    --amp-header-bg: #000;
    --amp-panel-bg: #222;
    --amp-panel-text: #999;
    --amp-row-hover-start: #cc6200;
    --amp-row-hover-end: #c24d00;
    --amp-field-grad-top: hsl(0, 0%, 12%);
    --amp-field-grad-bottom: hsl(0, 0%, 8%);
    --amp-webplayer-bg: #191919;
    --amp-webplayer-raised: #202020;
    --amp-login-focus-border: #f1b720;
    --amp-sidebar-link: #b0b0b0;
}

/* :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;
}

.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: var(--amp-panel-bg);
    color: var(--amp-panel-text);
}

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

/* --------------------------
   Login
   -------------------------- */

#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 #footer a {
    color: #555;
}

/* --------------------------
   Sidebar
   -------------------------- */

#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: var(--amp-panel-text);
}

#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: var(--amp-border);
    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 .sb2 li ul li a:hover {
    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: var(--amp-text);
}

#rightbar .submenu {
    background-color: var(--amp-bg);
    border-color: silver;
}

#rightbar .submenu a {
    border-bottom-color: #ddd;
    color: var(--amp-text);
}

/* --------------------------
   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: var(--amp-text);
}

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

table.tabledata {
    color: var(--amp-text);
}

span.page-text,
table.tabledata a {
    color: var(--amp-text);
}

table.tabledata th a {
    color: var(--amp-accent);
}

table.tabledata .th-top:hover,
table.tabledata .th-bottom:hover,
table.tabledata .th-top:focus,
table.tabledata .th-bottom:focus {
    color: var(--amp-text);
    background-color: var(--amp-raised);
}

/* --------------------------
    Content (information-actions)
   -------------------------- */

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

.item_inactive {
    color: #fff;
}

/* 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;
}

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

#ampache_link {
    color: #555;
}

/* --------------------------
   Web Player
   -------------------------- */
div.jp-audio,
div.jp-audio-stream,
div.jp-video {
    color: var(--amp-panel-text);
    border: 1px solid var(--amp-webplayer-bg);
}

div.jp-title,
div.jp-playlist {
    background-color: var(--amp-webplayer-raised);
    border-top: 1px solid var(--amp-webplayer-bg);
}

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

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

/* ------------------------
   Wunderbaum tree
   ------------------------ */
.wunderbaum {
    --wb-node-text-color: var(--amp-text);
    --wb-background-color: var(--amp-bg);
    --wb-alternate-row-color: var(--amp-raised);
    --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
   -------------------------- */

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

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

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

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

/* 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: var(--amp-bg);
    }

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

/* 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 accent color */
.confirmdialogstyle.ui-dialog .ui-dialog-buttonset button:first-child {
    background-image: linear-gradient(to top, var(--amp-accent), var(--amp-accent-dark));
    border-color: var(--amp-accent-dark);
}