/* 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(220, 8%, 20%);
    --amp-raised: hsl(220, 8%, 26%);
    --amp-border: hsl(220, 8%, 38%);
    --amp-muted: #c7cbd1;
    --amp-accent: #ff9d00;
    --amp-accent-ink: #1a1a1a;
    accent-color: #ff9d00;
    --amp-text: #fff;
    --amp-bg: hsl(220, 10%, 18%);
    --amp-accent-hover: #ffc466;
    --amp-accent-dark: #cc6200;
    --amp-header-bg: hsl(220, 10%, 10%);
    --amp-panel-bg: hsl(220, 10%, 18%);
    --amp-panel-text: #a8acb3;
    --amp-row-hover-start: #cc6200;
    --amp-row-hover-end: #c24d00;
    --amp-field-grad-top: hsl(220, 8%, 24%);
    --amp-field-grad-bottom: hsl(220, 8%, 16%);
    --amp-webplayer-bg: hsl(220, 10%, 14%);
    --amp-webplayer-raised: hsl(220, 10%, 17%);
    --amp-login-focus-border: #f1b720;
    --amp-sidebar-link: #c7cbd1;
}

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

/* --------------------------
   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: hsl(220, 10%, 15%);
}

#sidebar-light-default {
    border-color: var(--amp-border);
    background: hsl(220, 10%, 15%);
}
/* 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: var(--amp-bg);
    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: #777;
}

/* --------------------------
   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: hsl(220, 10%, 20%);
}

a.option-list:hover {
    border-color: hsl(220, 10%, 20%);
}

.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. Dusk
   analogue of dark.css's block, same structure at Dusk's own (lighter, blue-grey) lightness steps.
   Structure lives in default.css, colours only here. */
.confirmdialogstyle.ui-dialog {
    background-color: hsl(220, 8%, 24%);
    border-color: hsl(220, 8%, 42%);
}

.confirmdialogstyle.ui-dialog .ui-dialog-titlebar {
    background: hsl(220, 8%, 29%);
    border-bottom-color: hsl(220, 8%, 40%);
    color: #fff;
}

.confirmdialogstyle.ui-dialog .ui-dialog-content {
    background-color: hsl(220, 8%, 24%);
    color: #ececec;
}

.confirmdialogstyle.ui-dialog .ui-dialog-buttonpane {
    background-color: hsl(220, 8%, 24%);
    border-top-color: hsl(220, 8%, 40%);
}

/* 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(220, 8%, 38%);
    background-image: none;
    border: 1px solid hsl(220, 8%, 50%);
    color: #fff;
    text-shadow: none;
}

.confirmdialogstyle.ui-dialog .ui-dialog-buttonset button:hover,
.confirmdialogstyle.ui-dialog .ui-dialog-buttonset button:focus {
    background: hsl(220, 8%, 45%);
    border-color: hsl(220, 8%, 60%);
}

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

.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, var(--amp-accent-hover), var(--amp-accent));
    border-color: var(--amp-accent);
}