/* ============================= */
/*        LEGACY MODE 98        */
/* ============================= */

body.legacy-mode {
    background-color: #c0c0c0 !important;
    font-family: "Courier New", monospace !important;
    image-rendering: pixelated;
}

.legacy-mode .fa-fw {
    transform: scale(1.05);
    filter: contrast(120%) saturate(80%);
}

.legacy-mode::before {
    content: "KAS LEGACY MODE ENABLED";
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: black;
    color: #00ff00;
    font-family: monospace;
    padding: 4px 8px;
    border: 2px solid #00ff00;
    z-index: 9999;
}

/* Remove modern rounded look */
.legacy-mode * {
    border-radius: 0 !important;
}

/* Buttons */
.legacy-mode .btn {
    background-color: #e0e0e0 !important;
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: inset -2px -2px 0 #808080,
    inset 2px 2px 0 #fff !important;
    color: #000 !important;
    font-weight: bold;
}

.legacy-mode .btn:hover {
    background-color: #d0d0d0 !important;
}

/* Cards */
.legacy-mode .card {
    border: 2px solid #000 !important;
    background-color: #ffffff !important;
    color: #000 !important;
}

/* Modals */
.legacy-mode .modal-content {
    border: 3px solid #000 !important;
    box-shadow: 6px 6px 0 #000 !important;
}

/* Tables */
.legacy-mode table {
    border-collapse: collapse !important;
    background: #ffffff !important;
    color: #000 !important;
}

.legacy-mode table,
.legacy-mode th,
.legacy-mode td {
    border: 1px solid #000 !important;
}

/* Forms */
.legacy-mode .form-control,
.legacy-mode .form-select {
    border: 2px solid #000 !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

.legacy-mode .form-control.is-invalid,
.legacy-mode .was-validated .form-control:invalid {
    border-color: #dc3545 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Crect x='1.5' y='1.5' width='9' height='9'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E");
}

/* Navbar */
.legacy-mode .navbar-dark {
    background-color: #000080 !important;
}

.legacy-mode .navbar .nav-link {
    border-radius: 0 !important;
    color: #000 !important;
    font-weight: bold;
}

.legacy-mode #navbarNav .nav-link.rounded {
    border-radius: 0 !important;
}

.legacy-mode main .navbar .btn {
    border-radius: 0 !important;
}

.legacy-mode .navbar.navbar-dark .navbar-text,
.legacy-mode .navbar.navbar-dark .nav-item.dropdown .nav-link {
    color: #fff !important;
}

/* Alerts */
.legacy-mode .alert {
    border: 2px solid #000 !important;
    background-color: #ffffcc !important;
    color: #000 !important;
}

/* Remove smooth transitions */
.legacy-mode * {
    transition: none !important;
}

/* Scrollbar (Webkit only) */
.legacy-mode ::-webkit-scrollbar {
    width: 16px;
}

.legacy-mode ::-webkit-scrollbar-thumb {
    background: #808080;
    border: 2px solid #000;
}

/* Inputs */
.legacy-mode input {
    background-color: #ffffff !important;
    color: #000 !important;
}

/* Nav Tabs */
.legacy-mode .nav-tabs {
    border-bottom: 2px solid #000 !important;
}

.legacy-mode .nav-tabs .nav-link {
    background: #c0c0c0 !important;
    border: 2px solid #000 !important;
    border-bottom: none !important;
    margin-right: 4px;
    color: #000 !important;
    font-weight: bold;
    padding: 4px 10px;
    box-shadow:
            inset -2px -2px 0 #808080,
            inset 2px 2px 0 #fff;
}

/* inactive tabs look pushed down */
.legacy-mode .nav-tabs .nav-link:not(.active) {
    /*border-bottom: 2px solid #000 !important;*/
    background: #a0a0a0 !important;
    position: relative;
    top: 2px;
}

/* active tab merges with content */
.legacy-mode .nav-tabs .nav-link.active {
    background: #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
}

/* tab hover */
.legacy-mode .nav-tabs .nav-link:hover {
    background: #d0d0d0 !important;
}

/* tab content area */
.legacy-mode .tab-content {
    border: 2px solid #000 !important;
    background: #ffffff !important;
    padding: 12px;
}


/* CRT Flicker Effect (optional) */
.legacy-mode::after {
    content: "";
    pointer-events: none;
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.03),
            rgba(0,0,0,0.03) 1px,
            transparent 1px,
            transparent 2px
    );
}

.legacy-mode .modal-header {
    background: linear-gradient(to right, #000080, #0000cd);
    color: white;
    font-weight: bold;
    border-bottom: 2px solid black !important;
}

/* Bootscreen */
.legacy-bios{
    position:fixed;
    inset:0;
    background:#000;
    color:#aaa;
    font-family:monospace;
    font-size:16px;
    padding:25px;
}

.legacy-bios div{
    margin:2px 0;
}

.bios-cursor{
    margin-left:2px;
    animation: blinkCursor 1s steps(1) infinite;
}

@keyframes blinkCursor{
    50%{
        opacity:0;
    }
}

.bsod{
    position:fixed;
    inset:0;
    background:#0078d7;
    color:white;
    font-family: "Segoe UI", sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
}

.bsod-content{
    width:500px;
}

.bsod h1{
    font-size:60px;
    margin-bottom:20px;
}

.bsod-small{
    margin:10px 0;
    opacity:0.9;
}

.bsod-progress{
    width:100%;
    height:6px;
    background:rgba(255,255,255,0.2);
    margin:20px 0;
}

#bsodBar{
    height:100%;
    width:0;
    background:white;
}

.legacy-terminal{
    position:fixed;
    inset:0;
    background:black;
    color:#00ff00;
    font-family:monospace;
    padding:30px;
}

.legacy-terminal .line{
    margin:3px 0;
}

.legacy-terminal .error{
    color:#ff4444;
}

.boot-logo{
    font-size:42px;
    margin-bottom:40px;
}

.legacy-boot{
    position:fixed;
    inset:0;
    background:#000;
    color:#00ff00;
    font-family:monospace;
    text-align:center;
    padding-top:20vh;
}

.progress{
    width:400px;
    height:20px;
    border:2px solid #00ff00;
    margin-top:20px;
}

.boot-bar{
    width:400px;
    height:20px;
    border:2px solid #00ff00;
    margin:0 auto 30px auto;
}

#bootProgress{
    height:100%;
    width:0;
    background:#00ff00;
    transition:width 0.4s;
}

#bootMessages p{
    margin:3px;
}
/* Bootscreen Ende */