/* public/style.css */

/* Definition von Farben und Schriftart */
:root {
    --color-dark-blue: #1f3044; /* Haupt-Hintergrundfarbe (Navy/Dunkelblau) */
    --color-white: #ffffff;
    --color-orange: #f97316; /* Akzentfarbe (Orange) */
}

body {
    /* Schriftart Segoe UI mit Web-sicheren Alternativen */
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
    background-color: var(--color-dark-blue);
    color: var(--color-white); /* Standardmäßig weißer Text */
    
    /* Layout: Zentriert den gesamten Inhalt (main-container und Statusmeldung) */
    display: flex;
    flex-direction: column; 
    justify-content: center; /* Vertikal zentrieren */
    align-items: center; /* Horizontal zentrieren */
    
    min-height: 100vh;
    margin: 0;
    padding-top: 0;
    padding-bottom: 50px;
     /* Polsterung um den Inhalt herum */
}

/* Stil für den Haupt-Container des Zwei-Spalten-Layouts */
.main-container {
    display: flex;
    align-items: center; /* Zentriert Logo und Karte vertikal */
    justify-content: center;
    gap: 80px; /* Abstand zwischen Logo und Karte */
    max-width: 1200px; /* Begrenzt die Gesamtbreite */
    width: 90%;

    margin-top: 100px;
}

/* Stil für das Haupt-Logo (Columna Izquierda) */
.main-logo {
    display: block;
    width: 250px; /* Größe des Logos */
    height: auto;
    margin: 30px 0 0 0; /* Entfernt alle Ränder */
}

/* Die zentrale Karte (Card) ist nun transparent (Columna Derecha) */
.card {
    background: transparent;
    padding: 30px;
    border-radius: 8px;
    box-shadow: none; 
    width: 100%;
    max-width: 500px;
    text-align: center; /* Text innerhalb der Karte zentrieren */
    
    /* Entfernt alle absoluten Positionierungen */
    position: relative; 
    transform: none; 
    top: auto;
    left: auto;
    margin: 0;
}

h1, .subtitle {
    color: var(--color-white); /* Sicherstellen, dass der Text weiß ist */
}

/* Drop-Area Stil (Gepunktete weiße Linie) */
.drop-area {
    border: 2px dashed var(--color-white); 
    background-color: rgba(255, 255, 255, 0.05); 
    padding: 40px 20px;
    margin-bottom: 20px;
    transition: border-color 0.3s;
}

.drop-area.highlight {
    border-color: var(--color-orange); 
    background-color: rgba(255, 255, 255, 0.1);
}

/* Auswahl-Button */
.btn-select {
    background-color: var(--color-white);
    color: var(--color-dark-blue);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.btn-select:hover {
    background-color: #e0e0e0;
}

/* Hochladen-Button */
.btn-upload {
    background-color: #ccc; 
    color: var(--color-dark-blue);
    border: none;
    padding: 10px 30px;
    border-radius: 5px;
    cursor: not-allowed;
    font-size: 1rem;
    margin-top: 10px;
    transition: background-color 0.3s, cursor 0.3s;
}

.btn-upload.active {
    background-color: var(--color-orange); 
    color: var(--color-white);
    cursor: pointer;
}

.btn-upload.active:hover {
    background-color: #d8620e;
}

/* Container für die Dateiliste */
#file-list-container {
    text-align: left;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid var(--color-white);
    background-color: rgba(255, 255, 255, 0.05);
    min-height: 30px;
    border-radius: 4px;
}

.file-item {
    font-size: 0.9rem;
    color: var(--color-white);
    padding: 3px 0;
}

/* Statusmeldungen (Position unterhalb des main-container) */
.status-message {
    margin-top: 30px; /* Abstand zum main-container */
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    display: block;
    width: 100%; 
    max-width: 500px;
}

.status-message.success {
    /* Stil: Orange/Weiß */
    background-color: rgba(249, 115, 22, 0.5);  
    color: var(--color-white) !important;    
    border: 1px solid #f97316;
}

.status-message.error {
    /* Stil: Rot wie zuvor */
   color: #dc3545 !important;        /* Dunkelroter Text */
    background-color: rgba(220, 53, 69, 0.15); /* Rot mit 15% Transparenz */
    border: 1px solid #dc3545;
}

.footer-copyright {
    position: fixed; 
    bottom: 10px;    
    left: 0;
    right: 0;
    text-align: center;
    color: var(--color-white); 
    font-size: 0.75rem; 
    opacity: 0.7; 
    padding: 5px;
}