/* ============================================================
   theme-98.css
   Tema Clássico 98 - Player98
   Inspirado no Windows Media Player 6.4 (o player nativo do 98)
   Bevels 3D, paleta cinza do sistema, tela preta de vídeo/visualização.
   ============================================================ */

:root {
    --w98-face: #c0c0c0;
    --w98-face-dark: #808080;
    --w98-face-darker: #404040;
    --w98-face-light: #ffffff;
    --w98-titlebar-start: #000080;
    --w98-titlebar-end: #a6caf8;
    --w98-highlight: #0a246a;
    --w98-text: #000000;
}

body {
    background: #008080; /* área de trabalho 98 */
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
}

.player-window {
    background: var(--w98-face);
    border-top: 2px solid var(--w98-face-light);
    border-left: 2px solid var(--w98-face-light);
    border-right: 2px solid var(--w98-face-darker);
    border-bottom: 2px solid var(--w98-face-darker);
}

/* ---------- Barra de título ---------- */
.title-bar {
    background: linear-gradient(90deg, var(--w98-titlebar-start) 0%, var(--w98-titlebar-end) 100%);
    border-bottom: 1px solid #000000;
}

.title-text {
    color: #ffffff;
    font-weight: bold;
}

/* ---------- Barra de menu ---------- */
.menu-bar {
    background: var(--w98-face);
    border-bottom: 1px solid var(--w98-face-dark);
}

.menu-item {
    color: var(--w98-text);
}

.menu-item:hover {
    background: var(--w98-highlight);
    color: #ffffff;
}

.dropdown-menu,
.dropdown-submenu {
    background: var(--w98-face);
    border: 2px outset var(--w98-face);
}

.menu-option {
    color: var(--w98-text);
}

.menu-option:hover {
    background: var(--w98-highlight);
    color: #ffffff;
}

.menu-option.disabled {
    color: var(--w98-face-dark);
    pointer-events: none;
}

.menu-separator {
    background: var(--w98-face-dark);
    border-bottom: 1px solid var(--w98-face-light);
}

/* ---------- Corpo principal ---------- */
.main-content {
    background: var(--w98-face);
}

/* Tela principal (área de vídeo/visualização) - estilo WMP 6.4 */
.screen-area {
    background: #000000;
    border: 2px inset var(--w98-face);
}

.visualizer-canvas {
    background: #000000;
}

.screen-video {
    background: #000000;
}

.screen-idle-logo {
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.15));
}

.screen-idle-text {
    color: #9a9a9a;
    font-weight: bold;
    text-transform: uppercase;
}

.screen-track-title {
    color: #cfcfcf;
    background: rgba(0,0,0,0.55);
    font-family: Tahoma, sans-serif;
}

.screen-track-title.lcd-error {
    color: #ff6b6b;
}

.time-label {
    color: var(--w98-text);
}

.format-row span {
    color: var(--w98-face-darker);
}

/* Painel de playlist - estilo lista clássica (fundo preto, monoespaçado) */
.playlist-panel {
    background: #000000;
    border: 2px inset var(--w98-face);
}

.playlist-header {
    background: var(--w98-face);
    border-bottom: 1px solid var(--w98-face-darker);
    color: var(--w98-text);
    font-weight: bold;
}

.playlist-item {
    color: #c0c0c0;
    font-family: 'Lucida Console', 'Courier New', monospace;
    border-bottom: 1px solid #202020;
}

.playlist-item:hover {
    background: #202020;
}

.playlist-item.active {
    background: var(--w98-highlight);
    color: #ffffff;
}

.playlist-item-index {
    color: #808080;
}

.playlist-item.active .playlist-item-index {
    color: #cfe0ff;
}

.playlist-item-duration {
    color: #808080;
}

.playlist-item-remove {
    color: #808080;
}

.playlist-item-remove:hover {
    color: #ff6b6b;
}

/* Barra de progresso */
.seek-bar {
    -webkit-appearance: none;
    appearance: none;
    height: 14px;
    background: var(--w98-face);
    border: 2px inset var(--w98-face);
    cursor: pointer;
}

.seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 16px;
    background: var(--w98-face);
    border-top: 2px solid var(--w98-face-light);
    border-left: 2px solid var(--w98-face-light);
    border-right: 2px solid var(--w98-face-darker);
    border-bottom: 2px solid var(--w98-face-darker);
    cursor: pointer;
}

.seek-bar::-moz-range-thumb {
    width: 14px;
    height: 16px;
    background: var(--w98-face);
    border-top: 2px solid var(--w98-face-light);
    border-left: 2px solid var(--w98-face-light);
    border-right: 2px solid var(--w98-face-darker);
    border-bottom: 2px solid var(--w98-face-darker);
    cursor: pointer;
    border-radius: 0;
}

.seek-bar::-moz-range-track {
    height: 10px;
    background: var(--w98-face);
}

/* Controles de transporte */
.transport-btn {
    background: var(--w98-face);
    border-top: 2px solid var(--w98-face-light);
    border-left: 2px solid var(--w98-face-light);
    border-right: 2px solid var(--w98-face-darker);
    border-bottom: 2px solid var(--w98-face-darker);
    color: var(--w98-text);
}

.transport-btn:active {
    border-top: 2px solid var(--w98-face-darker);
    border-left: 2px solid var(--w98-face-darker);
    border-right: 2px solid var(--w98-face-light);
    border-bottom: 2px solid var(--w98-face-light);
}

.transport-btn:disabled {
    opacity: 0.4;
}

.transport-btn:disabled:active {
    border-top: 2px solid var(--w98-face-light);
    border-left: 2px solid var(--w98-face-light);
    border-right: 2px solid var(--w98-face-darker);
    border-bottom: 2px solid var(--w98-face-darker);
}

.menu-option.disabled:hover {
    background: none;
    color: var(--w98-face-dark);
}

/* ---------- Ícones desenhados em CSS puro (sem emoji, monocromático) ---------- */

/* Play: triangulo apontando p/ direita */
.icon-play {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid var(--w98-text);
}

/* Pause: duas barras verticais */
.icon-pause {
    width: 10px;
    height: 12px;
}
.icon-pause::before,
.icon-pause::after {
    content: '';
    position: absolute;
    top: 0;
    width: 3px;
    height: 12px;
    background: var(--w98-text);
}
.icon-pause::before { left: 0; }
.icon-pause::after { left: 7px; }

/* Stop: quadrado solido */
.icon-stop {
    width: 11px;
    height: 11px;
    background: var(--w98-text);
}

/* Next: dois triangulos + barra vertical */
.icon-next {
    width: 13px;
    height: 12px;
}
.icon-next::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--w98-text);
}
.icon-next::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
    height: 12px;
    background: var(--w98-text);
}

/* Prev: espelho do next */
.icon-prev {
    width: 13px;
    height: 12px;
}
.icon-prev::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid var(--w98-text);
}
.icon-prev::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 12px;
    background: var(--w98-text);
}

/* Volume: alto-falante simplificado (corpo + cone) */
.icon-volume {
    background: var(--w98-text);
    clip-path: polygon(0% 35%, 35% 35%, 65% 10%, 65% 90%, 35% 65%, 0% 65%);
}

#playBtn .icon-play {
    border-left-color: #006600;
}
#stopBtn .icon-stop {
    background: #660000;
}

.volume-bar {
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    background: var(--w98-face);
    border: 2px inset var(--w98-face);
    cursor: pointer;
}

.volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 14px;
    background: var(--w98-face);
    border-top: 2px solid var(--w98-face-light);
    border-left: 2px solid var(--w98-face-light);
    border-right: 2px solid var(--w98-face-darker);
    border-bottom: 2px solid var(--w98-face-darker);
    cursor: pointer;
}

.volume-bar::-moz-range-thumb {
    width: 10px;
    height: 14px;
    background: var(--w98-face);
    border: 2px outset var(--w98-face);
    cursor: pointer;
    border-radius: 0;
}

/* ---------- Barra de status ---------- */
.status-bar {
    background: var(--w98-face);
    border-top: 1px solid var(--w98-face-darker);
}

.status-section {
    border-top: 1px solid var(--w98-face-darker);
    border-left: 1px solid var(--w98-face-darker);
    border-bottom: 1px solid var(--w98-face-light);
    border-right: 1px solid var(--w98-face-light);
    margin: 2px 1px;
}

.status-item {
    color: var(--w98-text);
}

/* ---------- Modo Teatro / Tela cheia ---------- */

/* Ícones: mesma cor dos demais no modo normal (ficam na toolbar cinza) */
.icon-theater {
    width: 18px;
    height: 12px;
    border: 2px solid var(--w98-text);
    box-sizing: border-box;
}

.icon-fullscreen {
    width: 14px;
    height: 14px;
}

.view-controls::before {
    background: var(--w98-face-dark);
}

.icon-fullscreen::before,
.icon-fullscreen::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 2px solid var(--w98-text);
}

.icon-fullscreen::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.icon-fullscreen::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

/* Estado ativo (Modo Teatro ligado / já em tela cheia) */
.transport-btn.is-active {
    background: var(--w98-highlight);
}

.transport-btn.is-active .icon-theater {
    border-color: #ffffff;
}

.transport-btn.is-active .icon-fullscreen::before,
.transport-btn.is-active .icon-fullscreen::after {
    border-color: #ffffff;
}

.theater-bottom-scrim {
    background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
}

/* Dentro do modo teatro os controles perdem o bevel 3D e ficam
   flutuando direto sobre o gradiente, estilo YouTube */
body.theater-mode .transport-btn {
    background: transparent;
    border: none;
}

body.theater-mode .transport-btn:active {
    border: none;
    transform: scale(0.92);
}

body.theater-mode .icon-play,
body.theater-mode #playBtn .icon-play {
    border-left-color: #ffffff;
}

body.theater-mode .icon-pause::before,
body.theater-mode .icon-pause::after,
body.theater-mode .icon-stop,
body.theater-mode .icon-next::after,
body.theater-mode .icon-prev::after,
body.theater-mode .icon-volume {
    background: #ffffff;
}

body.theater-mode #stopBtn .icon-stop {
    background: #ff6b6b;
}

body.theater-mode .icon-next::before {
    border-left-color: #ffffff;
}

body.theater-mode .icon-prev::before {
    border-right-color: #ffffff;
}

body.theater-mode .icon-theater {
    border-color: #ffffff;
}

body.theater-mode .icon-fullscreen::before,
body.theater-mode .icon-fullscreen::after {
    border-color: #ffffff;
}

body.theater-mode .view-controls::before {
    background: rgba(255,255,255,0.3);
}

body.theater-mode .time-label {
    color: #e0e0e0;
}

body.theater-mode .format-row span {
    color: #b0b0b0;
}

body.theater-mode .seek-bar {
    background: transparent;
    border: none;
    height: 4px;
}

body.theater-mode .seek-bar::-webkit-slider-thumb {
    background: #ffffff;
    border: none;
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

body.theater-mode .seek-bar::-moz-range-thumb {
    background: #ffffff;
    border: none;
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

body.theater-mode .seek-bar::-moz-range-track {
    background: rgba(255,255,255,0.3);
    height: 4px;
}

body.theater-mode .volume-bar {
    background: transparent;
    border: none;
    height: 4px;
}

body.theater-mode .volume-bar::-webkit-slider-thumb {
    background: #ffffff;
    border: none;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

body.theater-mode .volume-bar::-moz-range-thumb {
    background: #ffffff;
    border: none;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}