/* Vexstorm-Styles.css
Copyright 2024 Vexstorm Studios 
Christopher Andrzejewski*/

.vexstorm-dashboard {
    background-color: #f9f9f9; /* Light grey background */
    padding: 20px;
    border-radius: 5px;
}

.vexstorm-dashboard form {
    margin-top: 20px;
}

#vexstorm-response {
    color: rgb(54, 55, 101); /* Red text for error messages or confirmations */
    margin-top: 10px;
}

.vexstorm-debug-log {
    color: #32C7A7;
    max-height: 400px; /* Adjust the height as needed */
    max-width: 600px;
    overflow-y: scroll; /* Makes the content scrollable vertically */
    border: 1px solid #000000; /* Optional: adds a border around the log for better visibility */
    padding: 10px; /* Adds some spacing inside the container */
    margin-top: 20px; /* Ensures there's some space above the log container */
}

.wrap {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    padding: 20px;
}

h1 {
    text-align: center;
    border-bottom: 2px solid #00aaff;
    padding-bottom: 10px;
}

.tab {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab button {
    background-color: #ccc; 
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    border-radius: 10px 10px 0 0;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #007BFF;
    color: white;
}

.tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
    background: linear-gradient(to right, #00aaff, #ffffff 20px);
    border-radius: 0 10px 10px 10px;
}

h3 {
    font-weight: bold;
    text-shadow: 1px 1px 2px #000000;
    border-bottom: 2px solid #00aaff;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.description-card {
    background-color: #e0f7ff;
    border-left: 5px solid #00aaff;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.metrics-card {
    background-color: #ffffff;
    border-left: 5px solid #00aaff;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}

#vpsMetrics {
    font-family: 'Courier New', Courier, monospace;
}

.terminal-container {
    background-color: #000;
    color: #00ff00;
    padding: 10px;
    border: 2px solid #00aaff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
}

button {
    background-color: #32c732;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 12px;
}

button:hover {
    background-color: white;
    color: black;
    border: 2px solid #32c732;
}

button:active {
    background-color: #32a732;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

/* Center buttons and ensure spacing */
.vps-actions,
.bot-actions {
    display: flex;
    justify-content: center;
    gap: 10px; /* Adjust the gap between buttons as needed */
    margin-top: 20px; /* Add some top margin to space them from the content above */
}

.vps-actions button,
.bot-actions button {
    background-color: #28a745; /* Green background for buttons */
    color: white; /* White text */
    border: none; /* Remove default border */
    padding: 10px 20px; /* Add padding */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    box-shadow: 0 4px #218838; /* Shadow for 3D effect */
    font-size: 14px; /* Font size */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
}

.vps-actions button:hover,
.bot-actions button:hover {
    background-color: #218838; /* Darker green on hover */
}

.vps-actions button:active,
.bot-actions button:active {
    box-shadow: 0 2px #1e7e34; /* Pressed effect */
    transform: translateY(2px); /* Move button down on press */
}

.chart-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 45%;
}

.chart-card h4 {
    text-align: center;
    margin-bottom: 10px;
}

.chart-container {
    width: 90%; /* Adjust the width as needed */
    margin: 0 auto; /* Center the container */
    justify-content: space-around;
    margin-top: 20px;
    display: flex;
}

.chart {
    width: 100%; /* Make sure the chart takes up the full width of the container */
    height: auto; /* Adjust height to keep aspect ratio */
}

.real-values {
    text-align: center;
    margin-top: 10px;
}