/*
// SD-8516 CPU / VC-3 Computer System
// Copyright (C) 2025 Appledog Hu
//
// SPDX-License-Identifier: GPL-2.0-only WITH SD-8516-runtime-exception
// See LICENSE file for full text.
//
*/

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;  /* Center horizontally */
    align-items: center;      /* Center vertically */
    background-color: black;
    color: #4CAF50;
    font-family: 'Courier New', monospace;

    /* no scroll */
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

#autotyper, #display-controls {
    width: 250px;
    box-sizing: border-box;
    overflow-y: auto;
}

#auto-type-input {
    background: #030B06 !important;
    color: #2E6B2A !important;
    border: none;
}

#display-controls {
    /*border-left: 2px solid #444;*/
    /*background: #030B06;*/
}

canvas {
    flex: 0;
    display: block;
    border: none;
    margin-left: 20px;
    margin-right: 20px;
    align-self: center;
}

.crt {
    transform: scaleY(1.2);
    transform-origin: top;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: brightness(0.9) contrast(1.1);
}

h3 {
    color: #7CFF9A;
    font-size: 14px;
    text-transform: uppercase;
}

.text-success {
    color: #7CFF9A !important;
}

.bg-dark {
    background-color: #202020 !important;
}

.text-light {
    color: #777 !important;
}

.text-norm {
    color: #4CAF50 !important;
}

.text-muted {
    color: #2E6B2A !important;
}


/* Dim the slider track */
.form-range {
    background: #030B06 !important;  /* Dark gray track */
}

/* Style the slider thumb */
.form-range::-webkit-slider-thumb {
    background: #2E6B2A;  /* Green thumb to match theme */
}

.form-range::-moz-range-thumb {
    background: #2E6B2A;
}

/* Style the filled portion of the track (Chrome/Safari) */
.form-range::-webkit-slider-runnable-track {
    background: #030B06;
}

/* Style the filled portion of the track (Firefox) */
.form-range::-moz-range-track {
    background: #030B06;
}

/* Darken the progress/filled part */
.form-range::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #2E6B2A 0%, #2E6B2A var(--value), #333 var(--value), #333 100%);
}


/* Reset button styling */
#reset-display {
    background-color: #000000;
    border: 1px solid #2E6B2A;
    color: #3FAF5A;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 8px;
    transition: background-color 0.2s;
}

#reset-display:hover {
    background-color: #1F4F2A;  /* Slightly darker on hover */
}

#reset-display:active {
    background-color: #06160C;  /* Even darker when clicked */
}

/* no blue border */
#auto-type-input:focus {
    outline: none !important;
    border-color: inherit;
    box-shadow: none !important;
}

.form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: #4CAF50;  /* Optional accent color */
}