/*Canopy - The next generation of stoner streaming software
Copyright (C) 2024-2025 Rainbownapkin and the TTN Community

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/>.*/

/* Theme Variables */
:root{
    --main-font: "open-sans", system-ui;
    --bg0: rgb(158, 158, 158);
    --bg0-alpha0: rgba(158, 158, 158, 0.4);
    --bg0-alpha1: rgba(158, 158, 158, 0.75);
    --bg1: rgb(70, 70, 70);
    --bg2: rgb(220, 220, 220);
    --bg1-alt0: rgb(30, 30, 30);
    --bg2-alt0: rgb(200, 200, 200);
    --bg2-alt1: rgb(180, 180, 180);

    --accent0: rgb(47, 47, 47);
    --accent0-alt0: rgb(34, 34, 34);
    --accent0-alt1: rgb(70, 70, 70);
    --accent1: rgb(245, 245, 245);
    --accent1-alt0: rgb(185, 185, 185);
    --accent1-alt1: rgb(124, 124, 124);
    --accent2: var(--accent0-alt0);

    --focus0: rgb(51, 153, 51);
    --focus0-alt0: rgb(229, 255, 229);
    --focus0-alt1: rgb(12, 85, 12);
    --focus-glow0: 2px 2px 3px var(--focus0), -2px 2px 3px var(--focus0), 2px -2px 3px var(--focus0), -2px -2px 3px var(--focus0);
    --focus-glow0-inset: 2px 2px 3px var(--focus0) inset, -2px 2px 3px var(--focus0) inset, 2px -2px 3px var(--focus0) inset, -2px -2px 3px var(--focus0) inset;
    --focus-glow0-alt0: 2px 2px 3px var(--focus0-alt0), -2px 2px 3px var(--focus0-alt0), 2px -2px 3px var(--focus0-alt0), -2px -2px 3px var(--focus0-alt0);
    --focus-glow0-alt0-inset: 2px 2px 3px var(--focus0-alt0) inset, -2px 2px 3px var(--focus0-alt0) inset, 2px -2px 3px var(--focus0-alt0) inset, -2px -2px 3px var(--focus0-alt0) inset;

    --danger0: firebrick;
    --danger0-alt0: rgb(121, 11, 11);
    --danger0-alt1: rgb(255, 105, 105);
    --danger0-alt2: rgb(242, 189, 189);
    --danger-glow0: 2px 2px 3px var(--danger0), -2px 2px 3px var(--danger0), 2px -2px 3px var(--danger0), -2px -2px 3px var(--danger0);
    --danger-glow0-alt1: 2px 2px 3px var(--danger0-alt1), -2px 2px 3px var(--danger0-alt1), 2px -2px 3px var(--danger0-alt1), -2px -2px 3px var(--danger0-alt1);
    --danger-glow0-smol: 2px 2px -1px var(--danger0), -2px 2px -1px var(--danger0), 2px -2px -1px var(--danger0), -2px -2px -1px var(--danger0);

    --timer-glow: -2px 1px 3px var(--danger0-alt1), 2px -1px 3px var(--danger0-alt1);

    --userlist-color0:rgb(63, 121, 71);
    --userlist-color1:rgb(143, 46, 26);
    --userlist-color2:rgb(51, 101, 161);
    --userlist-color3:rgb(110, 94, 13);
    --userlist-color4:rgb(129, 43, 43);
    --userlist-color5:rgb(150, 64, 6);
    --userlist-color6:rgb(111, 61, 204);

    --userlist-contrast-glow: 2px 2px 3px var(--bg0), 2px -2px 3px var(--bg0), -2px 2px 3px var(--bg0), -2px -2px 3px var(--bg0);

    --media-header-gradient: linear-gradient(180deg, var(--bg1-alt0) 0%, #FFFFFF00 76%);

    --background-panel-effect-pretty: blur(4px);
    --background-panel-effect-fast: none;

    /* altcha theming */
    --altcha-border-width: 1px;
    --altcha-border-radius: 1em;
    --altcha-color-base: var(--bg1);
    --altcha-color-border: var(--accent1);
    --altcha-color-text: var(--accent1);
    --altcha-color-error-text: var(--danger0);
    --altcha-max-width: 260px;
}

/* global */
body{
    background-color: var(--bg0);
    font-family: var(--main-font);
    color: var(--accent0);
    background-image: url('/img/background.png');
    background-size: 5em;
    scrollbar-color: var(--accent0-alt1) transparent;
}

a{
    text-decoration: none;
    color: var(--accent0);
}

/* NOT! -Wayne */
a:hover, i:hover:not(button i), .interactive:hover{
    color: var(--focus0-alt0);
    text-shadow: var(--focus-glow0);
}

a:active, i:active:not(button i), .interactive:active{
    color: var(--focus0-alt1);
    text-shadow: var(--focus-glow0-alt0);
}

div.interactive:hover{
    background-color: var(--bg2);
}

div.interactive:active{
    background-color: var(--bg1);
}

button i{
    margin: 0.05em;
    text-wrap: nowrap;
}

select{
    background-color: var(--bg2);
    border-radius: 0.5em;
    border: none;
}

button{
    background-color: var(--bg0);
    color: var(--accent0);
    border: none;
    border-radius: 0.5em;
}

button:hover:not([disabled]){
    color: var(--focus0-alt1);
    background-color: var(--focus0-alt0);
    box-shadow: var(--focus-glow0);
}

button:active:not([disabled]){
    color: var(--focus0-alt0);
    background-color: var(--focus0-alt1);
    box-shadow: var(--focus-glow0-alt0);
}

input:focus, textarea:focus{
    outline: none;
    box-shadow: var(--focus-glow0);
}

input:checked{
    accent-color: var(--focus0-alt0);
    box-shadow: var(--focus-glow0);
}

input:not([type='checkbox']):not(.navbar-item), textarea {    
    border-radius: 1em;
    border: none;
    padding: 0.1em 0.5em;
}

textarea{
    border-bottom-right-radius: 0;
}

.positive{
    color: var(--focus0-alt0);
    text-shadow: var(--focus-glow0);
}

.positive-inverse{
    color: var(--focus0);
    text-shadow: var(--focus-glow0-alt0);
}

.positive-low{
    color: var(--focus0);
}

.positive-afterglow{
    text-shadow: var(--focus-glow0-alt0);
}

.inactive{
    color: var(--accent1-alt1);
}

.danger-button{
    background-color: var(--danger0);
    color: var(--accent1);
}

.danger-button:hover:not([disabled]), .critical-danger-button, .critical-danger-button:hover{
    background-color: var(--danger0-alt1);
    color: var(--danger0-alt0);
    box-shadow: var(--danger-glow0);
}

.critical-danger-button:hover:not([disabled]){
    background-color: var(--danger0-alt2);
}

.danger-button:active, .critical-danger-button:active{
    background-color: var(--danger0-alt0);
    color: var(--accent0-alt0);
    box-shadow: var(--danger-glow0-alt1);
}

.critical-danger-text{
    color: var(--danger0-alt1);
    text-shadow: var(--danger-glow0);
}

.danger-link, .danger-text{
    color: var(--danger0);
}

.danger-link:hover{
    color: var(--danger0-alt1);
    text-shadow: var(--danger-glow0);
}

.danger-link:active{
    color: var(--danger0-alt0);
    text-shadow: var(--danger-glow0-alt1);
}

.positive-button:not([disabled]){
    background-color: var(--focus0);
    color: white;
}

.positive-button:hover:not([disabled]){
    color: var(--focus0-alt1);
    background-color: var(--focus0-alt0);
}

.positive-button:active:not([disabled]){
    color: var(--focus0-alt0);
    background-color: var(--focus0-alt1);
}

.dynamic-container{
    background-color: var(--bg1);
    color: var(--accent1);
}

.nested-dynamic-container{
    border: 1px var(--accent1) solid;
    background-color: var(--bg0);
    color: var(--accent0);
}

.dynamic-container, .nested-dynamic-container{
    box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
    border-radius: 1em;
}

.dynamic-container a{
    color: var(--accent1);
}


tr{
    box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em;
}

td.not-first-col{
    box-shadow: var(--accent1) 1em 0px 1px -2em, var(--accent1) -1em 0px 1px -1em;
}

a.admin-list-entry-item{
    color: var(--accent1);
}

div.control-prompt{
    border-radius: 1em;
    background-color: white;
}

div.control-prompt:focus-within{
    box-shadow: var(--focus-glow0);
}

input.control-prompt, input.control-prompt:focus{
    border: none;
    outline: none;
    box-shadow: none;
}


.seperator{
    background-color: var(--accent0);
}

/* navbar */
#navbar{
    background-color: var(--bg1);
}

.navbar-item{
    color: var(--accent1);
    border: hidden;
}

.navbar-item input{
    background-color: var(--bg1-alt0);
}

/* index */
.channel-guide-entry{
    background-color: var(--bg1);
    color: var(--accent1);
}

div.channel-guide-entry{
    border-radius: 0.3em;
    box-shadow: 0.2em 0.2em 0.1em var(--bg1-alt0) inset;
}

span.channel-guide-entry-item{
    background-color: var(--bg1-alt0);
    box-shadow: 0.2em 0.2em 0.1em black inset;
    border-radius: 0.3em;
    margin: 0 0.1em 0 0.1em;
}


p.channel-guide-entry-item{
    background-color: var(--bg1-alt0);
}

/* channel settings */
.channel-info-label{
    color: var(--accent1-alt0);
}

/* channel */
#media-panel-div{
    background-color: black;
}

#chat-panel-buffer-div{
    background-color: var(--bg2);
}

#chat-area{
    background-color: var(--bg2);
}
#chat-panel-head-div{
    background-color: var(--bg0);
}

#chat-panel-head-spacer-span, #chat-panel-users-div{
    background-color: var(--bg0);
    background-image: url("/img/background.png");
    background-size: 2.3em
}

#chat-panel-prompt-autocomplete{
    color: var(--accent0-alt1);
    text-shadow: var(--focus-glow0-alt0);
}

.chat-entry{
    background-color: var(--bg2);
    border-bottom: 1px solid var(--bg2-alt1);
}

.serverwhisper{
    color: var(--accent0-alt1)
}

.userlist-color0{/*green0*/
     color: var(--userlist-color0);
}

.userlist-color1{/*red0*/
     color: var(--userlist-color1);
}

.userlist-color2{/*blue0*/
     color: var(--userlist-color2);
}

.userlist-color3{/*tan0*/
     color: var(--userlist-color3);
}

.userlist-color4{/*pink0*/
     color: var(--userlist-color4);
}

.userlist-color5{/*orange*/
     color: var(--userlist-color5);
}

.userlist-color6{/*violet*/
     color: var(--userlist-color6);
}

[class*="userlist-color"].chat-panel-users{
     text-shadow: var(--userlist-contrast-glow);
}

.high-level{
    text-shadow: 1px 1px 1px white, -1px -1px 1px white, 1px 1px 1px white, -1px 1px 1px white, 1px -1px 1px white;
}

#media-panel-head-div{
    background: rgb(2,0,36);
    background: var(--media-header-gradient);
    color: var(--accent1-alt0);
}

select.panel-head-element{
    height: 1.2em;
    margin: auto;
}

#cpanel-active-div{
    background-color: var(--bg0-alpha1);
    backdrop-filter: var(--background-panel-effect-fast);
}

.cpanel-div{
    background-color: var(--bg0);
}


.cpanel-header-div{
    border-bottom: solid 1px var(--accent0);
}

.announcement-title{
    background-color: var(--danger0-alt0);
    color: var(--accent1);
}

.chat-link{
    color: var(--focus0);
    user-select: all;
}

.chat-dead-link{
    text-decoration: line-through;
    text-decoration-color: var(--danger0-alt0);
}

/* popup */

.popup-backer{
    background-color: var(--bg0-alpha1);
    backdrop-filter: var(--background-panel-effect-fast);
}

.popup-div{
    background-color: var(--bg1);
    color: var(--accent1);
    box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
    border-radius: 1em;
    border: var(--accent1) solid 1px;
}

#delete-account-popup-title, #delete-channel-popup-title{
    color: var(--danger0);
}

.popup-div a{
    color: var(--accent1);
}

/* psa */
#psa-container{
    border: 3px solid var(--danger0);
    background-color: var(--danger0-alt2);
}

/* tooltip */
div.tooltip{
    background-color: var(--bg1);
    color: var(--accent1);
    border: 1px solid var(--accent1);
    box-shadow: 4px 4px 1px var(--bg1-alt0) inset;
    border-radius: 1em;
}

/* panel containers */
.cpanel-body{
    background-image: none;
}

.title-filler-span{
    background-color: var(--accent0);
}

/* panels */
/* emote panel */
span.emote-panel-list-emote{
    border: 1px solid var(--accent0);
}

span.emote-panel-list-emote:hover, span.emote-list-trash-icon:hover{
    color: var(--focus0-alt0);
    border: 1px solid var(--focus0-alt0);
    text-shadow: var(--focus-glow0);
    box-shadow: var(--focus-glow0), var(--focus-glow0-inset);
}

span.emote-panel-list-emote:active, span.emote-list-trash-icon:active{
    color: var(--focus0-alt1);
    text-shadow: var(--focus-glow0-alt0);
    border: 1px solid var(--focus0-alt1);
    box-shadow: var(--focus-glow0-alt0), var(--focus-glow0-alt0-inset);
}

span.emote-list-trash-icon{
    background-color: var(--bg2);
    border: 1px solid var(--accent0)
}

/* queue panel */
#queue-controls{
    background-color: var(--bg0-alpha1);
}

span.queue-marker{
    background-color: var(--accent0);
}

#time-marker{
    background-color: var(--danger0);
    box-shadow: var(--timer-glow);
}



div.queue-entry{
    margin: 0.2em;
    padding: 0 0.7em;
    border-radius: 0.3em;
    background-color: var(--bg1);
    border: 1px solid var(--accent1);
}

.queue-entry p{
    color: var(--accent1);
    margin: 0;
    text-align: center;
}

div.queue-entry.live {
    background-color: var(--danger0);
    border: 1px solid var(--danger0-alt0);
    box-shadow: 0px 9px 10px -3px var(--danger0-alt1);
}


.queue-entry.live p{
    color: var(--danger0-alt2);
}

.media-tooltip{
    font-family: monospace;
}

#queue-control-buttons button:not(:hover, .danger-button, .critical-danger-button, .positive-button){
    background-color: var(--bg2-alt1);
}

div.started-yesterday{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px dashed var(--accent1);
}

div.ends-tomorrow{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px dashed var(--accent1);
}

div.started-late{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px dashed var(--danger0-alt1);
}

div.ended-early{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px dashed var(--danger0-alt1);
}

div.now-playing{
    color: var(--focus0);
    box-shadow: var(--focus-glow0);
    text-shadow: var(--focus-glow0);
}

div.archived p{
    color: var(--bg2-alt1);
}

.queue-playlists-div{
    background-color: var(--bg1);
    color: var(--accent1);
    border-block: var(--accent1) solid 1px;
}


.queue-playlist-media-container-div{
    background-color: var(--bg1-alt0);
    border-block: var(--accent1) solid 1px;
}

.queue-playlist-span.not-first{
    border-top: var(--bg1-alt0) solid 1px;
}

.queue-playlist-count{
    color: var(--accent1-alt0);
}

.queue-playlist-control:not(.danger-text, .positive-button, .critical-danger-button, .danger-button, :hover){
    background-color: var(--bg1-alt0);
    color: var(--accent1);
}

.queue-playlist-media-div.not-first{
    border-top: var(--bg1) solid 1px;
}

.queue-playlist-control.not-first{
    border-left: var(--accent1-alt0) solid 1px;
}

/* PM Panel */
#pm-panel-sesh-container{
    border-left: 1px solid var(--accent0);
}

#pm-panel-start-sesh, div.pm-panel-sesh-list-entry{
    border-bottom: 1px solid var(--accent0);
}

span.pm-panel-sesh-entry{
    border-bottom: 1px solid var(--accent1-alt1);
}

/* altcha theming*/
div.altcha{
    box-shadow: 4px 4px 1px var(--bg1-alt0) inset;
}

altcha-widget a{
    color: var(--accent1);
}