@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
    --primary-color: #007bff;
    --hover-color: #0056b3;
    --text-color: #333;
    --background-color: #f0f0f0;
    --font-family: 'Roboto', sans-serif;
    --border-radius: 10px;
    --transition-speed: 0.3s;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    color: var(--text-color);
    font-size: 16px;
    background-color: var(--background-color);
}

#simulateButton {
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
}

#simulateButton:hover,
#simulateButton:focus {
    background-color: var(--hover-color);
    outline: none;
}

.container {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

.charts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.statssmall {
    font-size: 12px; /* Slightly larger for better readability */
}

.center-text  {
    text-align: center;
}

.chart-group {
    flex: 1;
    min-width: 300px; /* Adjust based on your preference */
    text-align: center;
    margin-bottom: 20px;
}

.aggregated-info {
    text-align: center;
    margin-top: 20px;
}

.chart-container {
    width: 100%;
    margin: 20px 0;
}

.info-boxes {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
}

.box {
    border: 2px solid #000;
    padding: 10px;
    width: 45%;
    border-radius: var(--border-radius);
    transition: transform var(--transition-speed) ease;
}

.box:hover {
    transform: scale(1.05);
}

.wheelchair-info p {
    margin: 10px 0;
}

.wheelchair-info span {
    font-weight: bold;
}

/*
.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; 
    width: 100vw; 
    background-image: url('{{ url_for('static', filename='background.jpg') }}'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 

}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px; 
    box-sizing: border-box; 
    width: 90%; 
}

*/

.login-container h2 {
    color: var(--text-color);
    margin-bottom: 20px;
}

#email, #password {
    width: calc(100% - 20px); /* Full width minus padding */
    padding: 10px;
    margin-bottom: 15px; /* Space between inputs */
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-size: 16px; /* Larger font size for better readability */
}

#login-button {
    background-color: #007bff; /* Primary color */
    color: white; /* Text color */
    padding: 12px 24px; /* Padding */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.button-hover {
    background-color: #0056b3; /* Darker shade for hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */
    transform: scale(1.05); /* Slightly increase size */
}

.button-pressed {
    background-color: #004085; /* Even darker shade for the pressed state */
    transform: scale(0.95); /* Slightly decrease size to simulate pressing */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Adjust shadow for depth */
}


/* CSS for user-table */
#user-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #f9f9f9; /* Light gray background */
    border: 1px solid #ddd; /* Light gray border */
}

/* Header styles */
#user-table th {
    background-color: #4CAF50; /* Dark green header background */
    color: white; /* White text color */
    padding: 8px; /* Padding around header cells */
    text-align: left; /* Align text to the left */
    border: 1px solid #ddd; /* Border for header cells */
}

#user-table td {
    padding: 8px; /* Padding for table cells */
    border: 1px solid #ddd; /* Border for table cells */
}

/* Alternating row colors for better readability */
#user-table tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Light gray background for even rows */
}

/* Hover effect for table rows */
#user-table tbody tr:hover {
    background-color: #ddd; /* Dark gray background on hover */
}



/* Additional styles for error messages or flash messages */
.flash-message {
    color: #d9534f; /* Bootstrap's `btn-danger` color for errors */
    margin-top: 15px;
}



.user-info-box {
    position: absolute;
    top: 0;
    right: 0;
    padding: 20px;
    background-color: #f0f0f0; /* Light grey background */
    border-bottom-left-radius: 10px; /* Rounded corner */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: adds shadow for depth */
}

/* Style adjustments for readability */
.user-info-box p {
    margin: 5px 0; /* Reduces space between paragraphs */
    font-size: 14px; /* Adjusts font size for space */
}


#user-table ul {
    list-style-type: none; /* Removes the default bullet points */
    padding-left: 0; /* Removes the default padding */
    margin-bottom: 0; /* Removes the default bottom margin */
}

#user-table li {
    font-size: 0.9em; /* Adjust based on your preference */
    margin-bottom: 5px; /* Reduces space between list items */
}


#data-stream table {
    width : 100%;
    border-collapse: collapse;
    background-color: #f9f9f9; /* Light gray background */
    border: 1px solid #DDD; /* Light gray border */
}

#data-stream table td {
    border: 2px solid #EEE; /* Light gray border */
    height: 300px;
}

#data-stream canvas {
    width: 48%; /* Sets the canvas width to approximately 45% of the total page width */
    height: auto;
    display: block;
/*    height: 280px; /* Example height, adjust as necessary */
}


.button-active {
    background-color: #4CAF50; /* Green background for active state */
    color: white; /* White text color for better visibility */
    border: none; /* Optional: removes the border */
}


.dashboard-center-container {
    display: flex;
    flex-direction: column;  /* Stack children vertically */
    align-items: center;      /* Center children horizontally */
    justify-content: center;  /* Center children vertically */
    text-align: center;       /* Center text within each child div, if needed */
}

#historicalvalues, #calibrationHistory {
    width: 90%;               /* Set width to 80% of the parent container, adjust as needed */
    margin: 10px 0;           /* Spacing between the divs */
    padding: 20px;            /* Padding inside the divs for content spacing */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: adds shadow for better visibility */
    background-color: white;  /* Background color for the content divs */
}


/* iPhone Specific Styles */
@media (max-width: 768px) {
    body, html {
        font-size: 14px;
    }

    .login-container {
        padding: 20px; /* Reduces padding on smaller screens */
    }

    .info-boxes {
        flex-direction: column;
        align-items: center;
    }

.user-info-box {
    position: relative;
    text-align: center;
}
    .box {
        width: 90%;
        margin-bottom: 20px;
    }

    .charts {
        flex-direction: column;
    }

    .chart-group {
        width: 100%; /* Full width on smaller screens */
    }
}