/* Positioning layout - Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set the base font size */
html {
    font-size: 12px; /* Adjust this value to decrease font size */
}

/* Ensure html and body take up the full viewport height */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Calibri, Arial, sans-serif;
    background-color: #333;
}

span {
    display: inline;
}

.align-right {
    float: right;
    text-align: right;
}

/* Apply the width and max-width to a wrapper around content, not body */
#content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures footer stays at the bottom */
    max-width: 1280px;
    width: 100%;
    height: 100%; /* Take up full viewport height */
    padding: 20px;
    background-color: #444;
    color: #d3d3d3;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Main content area styling */
main {
    flex-grow: 1; /* Takes up the remaining space */
    overflow: hidden;
    padding: 20px;
    color: #ffffff;
}

/* Footer styling */
footer {
    padding: 10px;
    text-align: center;
    background-color: #333;
    color: #d3d3d3;
}

/* Visual styles */
body {
    background-color: #333;
    color: #d3d3d3;
}

header, footer, nav {
    background-color: #333;
    color: #d3d3d3;
}

header {
    padding: 10px;
}

header h1 {
    margin: 0;
    display: inline;
}

main h1 {
    margin-bottom: 10px;
}

main h2 {
    font-size: 1.5rem;
}

nav ul {
    display: inline-block;
    list-style: none;
    padding: 0;
    font-size: 1.2rem;
}

nav ul li {
    display: inline-block;
    margin-right: 10px;
}

nav ul li a {
    color: rgb(214, 210, 141);
    text-decoration: none;
}

/* Styling for the active link */
nav ul li a.active {
    color: red; /* Change to any color you like */
    font-weight: bold;
    text-decoration: underline;
}

nav h1 {
    display: inline-block;
    margin: 0;
    padding-right: 15px; /* Adds space between the title and menu */
}

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 70vh; /* Full viewport height */
}

/* Form styling */
form {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Take remaining space in container */
    width: 100%; /* Full width */
}

/* Textarea styling */
textarea {
    resize: none; /* Prevent resizing */
    width: 800px;
    flex-grow: 1; /* Take remaining vertical space */
    padding: 10px; /* Optional: add padding */
    box-sizing: border-box; /* Include padding in width/height calculations */
}

pre {
    width: 800px;
    max-height: 70vh; /* Adjust the height as needed */
    overflow-y: auto;  /* Enable vertical scrolling */
    padding: 10px;     /* Optional padding for readability */
    background-color: #333; /* Background to match the theme */
    color: #d3d3d3;         /* Text color to match the theme */
    border: 1px solid #444; /* Optional border for separation */
    border-radius: 4px;     /* Rounded corners */
}

progress {
    width: 100%;
    margin-bottom: 10px;
}

/* Modern table styling */
table {
    width: 100%;
    border-collapse: collapse; /* Slim table borders without double lines */
    margin-top: 20px;
}

table th, table td {
    padding: 12px;
    border: 1px solid #555; /* Slim border for a modern look */
    text-align: left;
    color: #d3d3d3;
}

table th {
    background-color: #444; /* Slightly darker header row */
    color: #ffffff;
}

table tr:nth-child(even) {
    background-color: #3a3a3a; /* Alternate row colors for readability */
}

table tr:hover {
    background-color: #505050; /* Highlight row on hover */
}

/* Button container for right alignment */
.button-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Aligns buttons to the right */
    margin-right: 0px; /* Adds spacing from the right edge */
}

/* Basic hyperlink styling */
a {
    color: #d3d3d3;          /* Light gray color to match your theme */
    text-decoration: none;   /* Remove the underline */
    transition: color 0.3s ease; /* Smooth color transition */
}

a:hover {
    color: #ffffff;          /* Lighter color on hover */
    text-decoration: underline; /* Optional underline on hover */
}

a:active {
    color: #cccccc;          /* Slightly darker when clicked */
}

.success {
    color: darkgreen;
    font-size: 1.2rem;
}

.error {
    color: orange;
    font-size: 1.2rem;
}

.info {
    color: lightblue;
    font-size: 1.2rem;
}

/* Button styling */
button {
    width: 150px; /* Fixed width for consistency */
    padding: 12px 20px; /* Increased padding for larger appearance */
    margin: 15px 0; /* Vertical margin for spacing between buttons */
    background-color: #555;
    color: #ffffff;
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 1.5rem;
    font-weight: bold;
}

button:hover {
    background-color: #666; /* Darker shade on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}

button:active {
    background-color: #444; /* Darker color when clicked */
    transform: translateY(1px); /* Subtle press effect */
}

button:disabled {
    cursor: not-allowed; /* Show "no action" cursor */
    opacity: 0.6; /* Optional: reduce opacity to indicate it's disabled */
}


/* Dark theme for table container */
.table-container {
    width: 100%;                   /* Full width relative to parent */
    max-height: 70vh;              /* Maximum height with scrollable content */
    overflow-y: auto;              /* Vertical scrolling within the container */
    margin: 1rem 0;                /* Spacing around the container */
    background-color: #333;        /* Dark background for contrast */
    border: 1px solid #444;        /* Darker border around the container */
    border-radius: 4px;            /* Rounded corners for a modern look */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); /* Subtle shadow for depth */
}

/* Table styling specific to tables inside .table-container */
.table-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: #ddd;                   /* Light text color for contrast */
}

/* Header cells within the .table-container */
.table-container th {
    background-color: #444;        /* Darker background for headers */
    color: #ddd;                   /* Light text for headers */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 0.75rem;
    text-align: left;
    border-bottom: 2px solid #555; /* Slightly lighter border */
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Data cells within the .table-container */
.table-container td {
    padding: 0.75rem;
    border-bottom: 1px solid #555; /* Slightly lighter border */
    text-align: left;
    color: #ccc;                   /* Light text color */
    vertical-align: middle;
}

/* Alternating row colors for tables inside .table-container */
.table-container tbody tr:nth-child(even) {
    background-color: #3a3a3a;     /* Slightly lighter background for alternate rows */
}

/* Hover effect for rows inside .table-container */
.table-container tbody tr:hover {
    background-color: #555;        /* Darker gray hover background */
}

/* Responsive adjustments for .table-container */
@media (max-width: 768px) {
    .table-container th, 
    .table-container td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    .table-container {
        max-height: 40vh;
    }
}