/* --- Globale Variablen --- */
:root {
    --win-gray: #c0c0c0;
    --win-dark-gray: #808080;
    --win-white: #ffffff;
    --win-black: #000000;
    --win-blue: #000080;
    --accent-green: #008000;
}

/* Dark Mode Variablen */
body.mode-dark {
    --win-gray: #2b2b2b;
    --win-dark-gray: #1a1a1a;
    --win-white: #d4d4d4;
    --win-black: #ffffff;
    --win-blue: #404040;
    --accent-green: #32cd32;
    background-color: #000;
    color: var(--win-black);
}

/* --- Basis-Layout --- */
body {
    background-color: #008080; /* Klassischer Windows Desktop Hintergrund */
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    margin: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-interface {
    background-color: var(--win-gray);
    width: 100%;
    max-width: 800px;
    padding: 15px;
    /* Typischer Windows 3D-Rahmen (Outset) */
    border-top: 2px solid var(--win-white);
    border-left: 2px solid var(--win-white);
    border-bottom: 2px solid var(--win-dark-gray);
    border-right: 2px solid var(--win-dark-gray);
    box-shadow: 1px 1px 0px var(--win-black);
}

/* --- Header & Title Bar --- */
.app-header {
    width: 100%;
    max-width: 800px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-bar {
    background-color: var(--win-blue);
    color: white;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid var(--win-gray);
}

/* --- Buttons --- */
button {
    font-family: inherit;
    background-color: var(--win-gray);
    color: var(--win-black);
    border-top: 2px solid var(--win-white);
    border-left: 2px solid var(--win-white);
    border-bottom: 2px solid var(--win-dark-gray);
    border-right: 2px solid var(--win-dark-gray);
    padding: 5px 15px;
    cursor: pointer;
    font-weight: bold;
}

button:active {
    border-top: 2px solid var(--win-dark-gray);
    border-left: 2px solid var(--win-dark-gray);
    border-bottom: 2px solid var(--win-white);
    border-right: 2px solid var(--win-white);
    padding: 6px 14px 4px 16px; /* Simuliert das Herunterdrücken */
}

.win-btn-large { width: 48%; padding: 10px; margin: 5px 1%; }
.win-btn-wide { width: 100%; margin: 10px 0; }
.win-btn-export { width: 31%; margin: 5px 1%; }
.win-btn-small { padding: 2px 5px; }

/* Grüner Akzent für aktiven Filter */
.filter-active {
    color: var(--accent-green);
    border: 2px inset var(--accent-green);
}

/* --- Eingabefelder & Datenbereich --- */
.search-area { margin: 15px 0; }
.win-input-main {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    /* Typischer Windows Eingabe-Rahmen (Inset) */
    border-top: 2px solid var(--win-dark-gray);
    border-left: 2px solid var(--win-dark-gray);
    border-bottom: 2px solid var(--win-white);
    border-right: 2px solid var(--win-white);
    background-color: var(--win-white);
    color: var(--win-black);
}

.win-data-frame {
    background-color: var(--win-white);
    min-height: 300px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 10px;
    border-top: 2px solid var(--win-dark-gray);
    border-left: 2px solid var(--win-dark-gray);
    border-bottom: 2px solid var(--win-white);
    border-right: 2px solid var(--win-white);
}

table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid var(--win-gray); padding: 4px; text-align: left; }
th { background-color: var(--win-gray); }

/* --- Modal (Pop-up) --- */
.hidden { display: none !important; }
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex; justify-content: center; align-items: center;
}
.modal-box {
    background-color: var(--win-gray);
    width: 90%; max-width: 400px;
    border-top: 2px solid var(--win-white);
    border-left: 2px solid var(--win-white);
    border-bottom: 2px solid var(--win-dark-gray);
    border-right: 2px solid var(--win-dark-gray);
}
.win-title-bar {
    background-color: var(--win-blue); color: white;
    padding: 3px 5px; display: flex; justify-content: space-between;
}
.modal-content { padding: 15px; }
.tag {
    display: inline-block; background: var(--win-white); border: 1px solid var(--win-dark-gray);
    padding: 2px 5px; margin: 2px;
}