/* Windows-98-Look: Desktop, Fenster, Taskleiste, Startmenü, Startbildschirm */

@font-face {
    font-family: 'W95FA';
    src: url('../media/fonts/w95fa.woff2') format('woff2');
    font-display: swap;
}

:root {
    --w98-face: #c0c0c0;
    --w98-navy: #000080;
    --w98-desktop: #008080;
    --w98-title: linear-gradient(90deg, #000080, #1084d0);
    --w98-title-inactive: linear-gradient(90deg, #808080, #b5b5b5);
    --w98-font: 'W95FA', 'MS Sans Serif', Tahoma, Arial, sans-serif;
    --w98-content-font: Arial, Helvetica, sans-serif;
    --w98-raised: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
    --w98-pressed: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
    --w98-sunken: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    --w98-field: inset -1px -1px #ffffff, inset 1px 1px #808080;
    --taskbar-h: 32px;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--w98-desktop);
    color: #000;
    font-family: var(--w98-font);
    font-size: 16px;
}

body, #graph {
    cursor: url("../media/Cursor.ico"), auto;
}

#graph {
    width: 100%;
    height: 100%;
}

button {
    font-family: inherit;
    font-size: inherit;
    color: #000;
}

img[data-icon], .title-icon, .icon-item img, .taskbar-btn img, #start-button img,
.start-item img, .address-field img, .dialog-icon, .inline-icon {
    image-rendering: pixelated;
}

/* ─── Knöpfe ────────────────────────────────────────────────────────────── */

.w98-btn {
    min-width: 75px;
    min-height: 26px;
    padding: 0 12px;
    border: none;
    border-radius: 0;
    background: var(--w98-face);
    box-shadow: var(--w98-raised);
    cursor: pointer;
}

.w98-btn:active {
    box-shadow: var(--w98-pressed);
}

.w98-btn:focus-visible,
.w98-btn:focus {
    outline: 1px dotted #000;
    outline-offset: -5px;
}

/* ─── Fenster ───────────────────────────────────────────────────────────── */

#windows {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--taskbar-h);
    z-index: 100;
    pointer-events: none;
}

.win98-window {
    position: absolute;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 3px;
    background: var(--w98-face);
    box-shadow: var(--w98-raised);
    pointer-events: auto;
    max-width: calc(100% - 16px);
}

.win98-window[hidden] {
    display: none;
}

.win98-window.maximized {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100%;
    max-width: none;
    max-height: none !important;
}

.title-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
    height: 22px;
    padding: 0 2px 0 3px;
    background: var(--w98-title-inactive);
    color: #dfdfdf;
    font-weight: bold;
    user-select: none;
    touch-action: none;
}

.win98-window.active .title-bar {
    background: var(--w98-title);
    color: #fff;
}

.title-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.title-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    letter-spacing: 0.5px;
}

.title-controls {
    display: flex;
    flex: none;
}

.tb-btn {
    width: 18px;
    height: 16px;
    margin-left: 2px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--w98-face) center / auto no-repeat;
    box-shadow: var(--w98-raised);
    cursor: pointer;
}

.tb-btn:active {
    box-shadow: var(--w98-pressed);
    background-position: calc(50% + 1px) calc(50% + 1px);
}

.tb-min {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='9'%3E%3Crect x='0' y='7' width='6' height='2'/%3E%3C/svg%3E");
}

.tb-max {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath fill-rule='evenodd' d='M0 0h9v9H0zM1 2h7v6H1z'/%3E%3C/svg%3E");
}

.tb-max.tb-restore {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath fill-rule='evenodd' d='M2 0h7v6H7V2H3v1H2zM0 3h7v6H0zM1 5h5v3H1z'/%3E%3C/svg%3E");
}

.tb-close {
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0z'/%3E%3C/svg%3E");
}

.menu-bar {
    display: flex;
    gap: 14px;
    flex: none;
    padding: 3px 6px 2px;
    font-size: 14px;
    user-select: none;
}

.address-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 3px 2px;
    border-top: 1px solid #808080;
    box-shadow: inset 0 1px #fff;
    font-size: 14px;
}

.address-label {
    color: #404040;
    padding-left: 4px;
}

.address-field {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    height: 22px;
    padding: 0 6px;
    background: #fff;
    box-shadow: var(--w98-sunken);
    white-space: nowrap;
    overflow: hidden;
}

.address-field img {
    width: 16px;
    height: 16px;
    flex: none;
}

.address-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.window-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    margin-top: 2px;
    padding: 14px 18px;
    background: #fff;
    box-shadow: var(--w98-sunken);
    font-family: var(--w98-content-font);
    font-size: 16px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    -webkit-overflow-scrolling: touch;
}

.window-body.folder-view {
    font-family: var(--w98-font);
}

.status-bar {
    display: flex;
    gap: 2px;
    flex: none;
    margin-top: 2px;
    font-size: 13px;
}

.status-bar > span {
    flex: 1;
    padding: 1px 6px;
    box-shadow: var(--w98-field);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-bar > .status-right {
    flex: 0 0 auto;
}

/* Win98-Scrollbalken */
.window-body::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

.window-body::-webkit-scrollbar-track {
    background: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0 / 2px 2px;
}

.window-body::-webkit-scrollbar-thumb {
    background: var(--w98-face);
    box-shadow: var(--w98-raised);
}

.window-body::-webkit-scrollbar-button:single-button {
    display: block;
    height: 16px;
    width: 16px;
    background: var(--w98-face);
    box-shadow: var(--w98-raised);
}

/* ─── Inhalte in Fenstern ───────────────────────────────────────────────── */

.node-content > :first-child {
    margin-top: 0;
}

.node-tooltip {
    color: #404040;
}

.window-body a {
    color: #0000ee;
}

.window-body a:visited {
    color: #551a8b;
}

.window-body h1, .window-body h2, .window-body h3, .window-body h4 {
    font-family: var(--w98-font);
    font-weight: normal;
    line-height: 1.25;
    margin: 1em 0 0.5em;
}

.window-body h1 { font-size: 28px; }
.window-body h2 { font-size: 24px; }
.window-body h3 { font-size: 20px; }
.window-body h4 { font-size: 18px; }

.window-body img,
.window-body video {
    max-width: 100%;
    height: auto;
}

.window-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
}

.window-body th,
.window-body td {
    padding: 6px 10px;
    border: 1px solid #808080;
    text-align: left;
}

.window-body th {
    background: #dfdfdf;
}

.inline-icon {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
}

.responsive-embed {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin: 10px 0;
    background: #000;
    box-shadow: var(--w98-sunken);
    overflow: hidden;
}

.responsive-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.responsive-embed.audio-compact {
    padding-bottom: 0;
    height: 120px;
}

/* Icon-Raster (Ordneransicht und „Verknüpft“) */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px 4px;
    font-family: var(--w98-font);
    font-size: 14px;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: center;
}

.icon-item img {
    width: 32px;
    height: 32px;
}

.icon-item span {
    padding: 0 2px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.icon-item:focus-visible span,
.icon-item:active span {
    background: var(--w98-navy);
    color: #fff;
    outline: 1px dotted #ffff80;
}

.icon-item:focus {
    outline: none;
}

.icon-item:focus-visible img,
.icon-item:active img {
    filter: brightness(0.75) sepia(1) hue-rotate(190deg) saturate(4);
}

/* Hover nur bei echter Maus, sonst bleibt die Markierung nach dem Antippen hängen */
@media (hover: hover) {
    .icon-item:hover span {
        background: var(--w98-navy);
        color: #fff;
        outline: 1px dotted #ffff80;
    }

    .icon-item:hover img {
        filter: brightness(0.75) sepia(1) hue-rotate(190deg) saturate(4);
    }

    .start-item:hover {
        background: var(--w98-navy);
        color: #fff;
    }
}

.icon-grid-small {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    font-size: 13px;
}

.linked {
    margin-top: 22px;
    padding-top: 10px;
    border-top: 1px solid #808080;
    box-shadow: 0 1px 0 #fff inset;
}

.linked-title {
    margin-bottom: 8px;
    font-family: var(--w98-font);
    font-size: 14px;
    color: #404040;
}

/* ─── Taskleiste ────────────────────────────────────────────────────────── */

#taskbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: 4px;
    height: var(--taskbar-h);
    box-sizing: border-box;
    padding: 3px 2px 2px;
    background: var(--w98-face);
    box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff;
}

#start-button {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: none;
    height: 100%;
    padding: 0 8px 0 5px;
    border: none;
    border-radius: 0;
    background: var(--w98-face);
    box-shadow: var(--w98-raised);
    font-weight: bold;
    cursor: pointer;
}

#start-button[aria-expanded="true"] {
    box-shadow: var(--w98-pressed);
}

#start-button img {
    width: 16px;
    height: 16px;
}

.taskbar-items {
    display: flex;
    gap: 3px;
    flex: 1;
    min-width: 0;
    height: 100%;
    padding-left: 6px;
    border-left: 1px solid #808080;
    box-shadow: inset 1px 0 #fff;
    overflow: hidden;
}

.taskbar-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 1 170px;
    min-width: 36px;
    height: 100%;
    padding: 0 6px;
    border: none;
    border-radius: 0;
    background: var(--w98-face);
    box-shadow: var(--w98-raised);
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.taskbar-btn img {
    width: 16px;
    height: 16px;
    flex: none;
}

.taskbar-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.taskbar-btn.active {
    box-shadow: var(--w98-pressed);
    background: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0 / 2px 2px;
    font-weight: bold;
}

#tray {
    display: flex;
    align-items: center;
    flex: none;
    height: 100%;
    padding: 0 10px;
    box-shadow: var(--w98-field);
    font-size: 14px;
}

/* ─── Startmenü ─────────────────────────────────────────────────────────── */

#start-menu {
    position: fixed;
    left: 2px;
    bottom: calc(var(--taskbar-h) - 3px);
    z-index: 5000;
    display: flex;
    min-width: 230px;
    padding: 3px;
    background: var(--w98-face);
    box-shadow: var(--w98-raised);
}

#start-menu[hidden] {
    display: none;
}

.start-banner {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 28px;
    padding-bottom: 8px;
    background: linear-gradient(0deg, #000080, #1084d0);
}

.start-banner span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
}

.start-items {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.start-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 24px 5px 8px;
    border: none;
    background: none;
    color: #000;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.start-item img {
    width: 24px;
    height: 24px;
    flex: none;
}

.start-item:focus {
    outline: none;
}

.start-item:focus-visible,
.start-item:active {
    background: var(--w98-navy);
    color: #fff;
}

.start-sep {
    margin: 3px 2px;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
}

/* ─── Startbildschirm ───────────────────────────────────────────────────── */

#boot {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(180deg, #06124a 0%, #1d4fb3 55%, #7fa9e8 100%);
    color: #fff;
    transition: opacity 0.45s;
}

#boot.closing {
    opacity: 0;
    pointer-events: none;
}

.boot-logo {
    font-size: clamp(56px, 16vw, 128px);
    line-height: 1;
    letter-spacing: 3px;
    text-shadow: 4px 4px 0 #000040;
}

.boot-sub {
    margin-top: 10px;
    font-size: 18px;
    color: #dbe6ff;
}

.boot-progress {
    display: flex;
    gap: 2px;
    width: min(330px, 80vw);
    height: 24px;
    margin-top: 56px;
    padding: 4px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: var(--w98-sunken);
}

.boot-progress i {
    width: calc((100% - 34px) / 18);
    background: var(--w98-navy);
}

#boot.show-dialog .boot-progress {
    display: none;
}

.boot-dialog {
    position: relative;
    width: min(380px, 92vw);
    margin-top: 40px;
    color: #000;
}

.dialog-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 16px 8px;
}

.dialog-body p {
    margin: 0 0 6px;
}

.dialog-icon {
    width: 32px;
    height: 32px;
    flex: none;
}

.dialog-actions {
    display: flex;
    justify-content: center;
    padding: 8px 0 12px;
}

/* ─── Lade- und Fehleranzeige ───────────────────────────────────────────── */

#loadingIndicator,
#errorMessage {
    position: fixed;
    z-index: 300;
    display: none;
    width: min(280px, 90vw);
    padding: 3px;
    box-sizing: border-box;
    background: var(--w98-face);
    box-shadow: var(--w98-raised);
}

#loadingIndicator {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

#errorMessage {
    top: 16px;
    right: 16px;
}

#loadingIndicator .title-bar {
    background: var(--w98-title);
    color: #fff;
}

#errorMessage .title-bar {
    background: linear-gradient(90deg, #800000, #d04040);
    color: #fff;
}

.indicator-body {
    padding: 14px 12px;
    font-size: 15px;
}

.spinner {
    width: 20px;
    height: 20px;
    margin: 0 auto 10px;
    border: 2px solid #dfdfdf;
    border-top-color: var(--w98-navy);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ─── Handy ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    :root {
        --taskbar-h: 42px;
    }

    /* Fenster immer bildschirmfüllend, das oberste ist sichtbar */
    .win98-window:not(.boot-dialog) {
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100%;
        max-width: none;
        max-height: none !important;
    }

    .title-bar {
        height: 34px;
        font-size: 17px;
    }

    .title-icon {
        width: 20px;
        height: 20px;
    }

    .tb-btn {
        width: 34px;
        height: 28px;
    }

    .tb-max,
    .menu-bar {
        display: none;
    }

    .window-body {
        padding: 12px 14px;
        font-size: 17px;
    }

    #start-button {
        padding: 0 12px 0 8px;
        font-size: 17px;
    }

    #start-button img {
        width: 20px;
        height: 20px;
    }

    .taskbar-btn {
        flex-basis: 130px;
    }

    #start-menu {
        min-width: min(300px, 86vw);
    }

    .start-item {
        padding: 9px 24px 9px 10px;
        font-size: 18px;
    }

    .start-item img {
        width: 28px;
        height: 28px;
    }

    .icon-item img {
        width: 40px;
        height: 40px;
    }

    .icon-grid {
        font-size: 15px;
    }
}