/* Variables for Siemens color theme */

:root {

    --siemens-turquoise: #009999; /* A vibrant turquoise */

    --siemens-deep-blue: #003366; /* Deep blue for CTAs */

    --siemens-light-gray: #f0f0f0; /* Light background gray */

    --siemens-medium-gray: #cccccc; /* Border and subtle elements */

    --siemens-dark-gray: #333333; /* Text color */

    --white: #ffffff;

    --red-error: #cc0000;

    --green-success: #009900;

}
 
/* General Body Styles */

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    background-color: var(--siemens-light-gray);

    color: var(--siemens-dark-gray);

    line-height: 1.6;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}
 
/* Header */

header {

    background-color: var(--siemens-deep-blue);

    color: var(--white);

    padding: 1.5rem 1rem;

    text-align: center;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}
 
header h1 {

    margin: 0;

    font-size: 2.2rem;

}
 
/* Main Container */

.container {

    max-width: 900px;

    margin: 2rem auto;

    padding: 1rem;

    flex-grow: 1;

}
 
/* Card Styles */

.card {

    background-color: var(--white);

    padding: 2rem;

    margin-bottom: 1.5rem;

    border-radius: 8px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.08);

}
 
.section-title {

    color: var(--siemens-deep-blue);

    margin-top: 0;

    margin-bottom: 1.5rem;

    font-size: 1.8rem;

    border-bottom: 2px solid var(--siemens-turquoise);

    padding-bottom: 0.5rem;

}
 
/* Drag and Drop Area */

.drag-drop-area {

    border: 3px dashed var(--siemens-medium-gray);

    border-radius: 10px;

    padding: 3rem 1.5rem;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    background-color: rgba(0, 153, 153, 0.05); /* Light tint of turquoise */

}
 
.drag-drop-area:hover,

.drag-drop-area.drag-over {

    border-color: var(--siemens-turquoise);

    background-color: rgba(0, 153, 153, 0.1);

}
 
.drag-drop-area p {

    margin-bottom: 1rem;

    color: var(--siemens-dark-gray);

    font-size: 1.1rem;

}
 
/* Buttons */

.btn {

    padding: 0.8rem 1.5rem;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    font-size: 1rem;

    font-weight: bold;

    transition: background-color 0.3s ease, transform 0.2s ease;

    text-decoration: none; /* For download button */

    display: inline-block; /* For download button */

    text-align: center;

}
 
.btn-primary {

    background-color: var(--siemens-turquoise);

    color: var(--white);

}
 
.btn-primary:hover {

    background-color: #007777; /* Darker turquoise */

    transform: translateY(-2px);

}
 
.btn-cta {

    background-color: var(--siemens-deep-blue);

    color: var(--white);

}
 
.btn-cta:hover {

    background-color: #002244; /* Darker deep blue */

    transform: translateY(-2px);

}
 
.btn-secondary {

    background-color: var(--siemens-medium-gray);

    color: var(--siemens-dark-gray);

}
 
.btn-secondary:hover {

    background-color: #bbbbbb;

    transform: translateY(-2px);

}
 
.button-group {

    display: flex;

    gap: 1rem;

    margin-top: 1.5rem;

    flex-wrap: wrap; /* For mobile responsiveness */

}
 
/* File Info */

.file-info {

    margin-top: 1rem;

    font-style: italic;

    color: var(--siemens-dark-gray);

}
 
/* Input Group */

.input-group {

    margin-bottom: 1rem;

}
 
.input-group label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: bold;

    color: var(--siemens-dark-gray);

}
 
.input-group input[type="number"] {

    width: 100%;

    padding: 0.8rem;

    border: 1px solid var(--siemens-medium-gray);

    border-radius: 5px;

    font-size: 1rem;

    box-sizing: border-box; /* Include padding in width */

}
 
/* Loading Overlay */

.loading-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(255, 255, 255, 0.9);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    z-index: 1000;

    backdrop-filter: blur(5px);

}
 
.spinner {

    border: 6px solid var(--siemens-light-gray);

    border-top: 6px solid var(--siemens-turquoise);

    border-radius: 50%;

    width: 50px;

    height: 50px;

    animation: spin 1s linear infinite;

    margin-bottom: 1rem;

}
 
@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}
 
/* Notifications */

#notification-container {

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 1001;

    display: flex;

    flex-direction: column-reverse; /* New notifications appear on top */

    gap: 10px;

}
 
.notification {

    padding: 1rem 1.5rem;

    border-radius: 8px;

    color: var(--white);

    font-weight: bold;

    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

    opacity: 0;

    transform: translateY(20px);

    animation: fadeInSlideUp 0.5s forwards, fadeOut 0.5s forwards 4.5s; /* Fade in, then fade out after 4.5s (total 5s display) */

}
 
.notification.success {

    background-color: var(--green-success);

}
 
.notification.error {

    background-color: var(--red-error);

}
 
@keyframes fadeInSlideUp {

    from { opacity: 0; transform: translateY(20px); }

    to { opacity: 1; transform: translateY(0); }

}
 
@keyframes fadeOut {

    from { opacity: 1; }

    to { opacity: 0; }

}
 
/* Utility Class */

.hidden {

    display: none;

}
 
/* Footer */

footer {

    text-align: center;

    padding: 1.5rem 1rem;

    background-color: var(--siemens-deep-blue);

    color: var(--white);

    margin-top: 2rem;

    box-shadow: 0 -2px 4px rgba(0,0,0,0.1);

}
 
/* Mobile Responsiveness */

@media (max-width: 768px) {

    .container {

        margin: 1rem;

        padding: 0.5rem;

    }
 
    header h1 {

        font-size: 1.8rem;

    }
 
    .card {

        padding: 1.5rem;

    }
 
    .section-title {

        font-size: 1.5rem;

    }
 
    .btn {

        width: 100%;

        margin-bottom: 0.8rem;

    }
 
    .button-group {

        flex-direction: column;

    }
 
    .input-group label {

        font-size: 0.95rem;

    }
 
    .drag-drop-area {

        padding: 2rem 1rem;

    }

}
 
@media (max-width: 480px) {

    header h1 {

        font-size: 1.5rem;

    }
 
    .card {

        padding: 1rem;

    }
 
    .section-title {

        font-size: 1.3rem;

    }
 
    .notification {

        padding: 0.8rem 1rem;

        font-size: 0.9rem;

    }
 
    #notification-container {

        bottom: 10px;

        right: 10px;

    }

}