/* General body styling */
body {
    background-color: #1A1A1A;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

/* Container for forms (Register, Login, Create Key, Reset Password) */
.form-container {
    max-width: 400px; /* Changed to max-width for responsiveness */
    width: 100%; /* Allows the form to shrink on smaller screens */
    margin: 20px auto; /* Reduced margin for dashboard context */
    padding: 20px;
    background-color: #222222;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Container for dashboards (User and Admin) */
.dashboard-container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
    background-color: #222222;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Headings */
h1 {
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
}

/* Form elements */
form p {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    background-color: #2A2A2A;
    color: #FFFFFF;
    box-sizing: border-box;
}

input[type="submit"] {
    background-color: #007BFF;
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}

input[type="submit"][value="Delete"] {
    background-color: #DC3545;
}

input[type="submit"][value="Delete"]:hover {
    background-color: #C82333;
}

/* Links */
a {
    color: #007BFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Table styling */
table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #FFFFFF;
    margin-top: 20px;
}

th {
    background-color: #2A2A2A;
    color: #FFFFFF;
    padding: 10px;
    text-align: left;
}

td {
    padding: 10px;
    border-bottom: 1px solid #FFFFFF;
}

tr:nth-child(even) {
    background-color: #2A2A2A;
}

/* Flashed messages */
.success {
    background-color: #28A745;
    color: #FFFFFF;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.error {
    background-color: #DC3545;
    color: #FFFFFF;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* Navigation Links */
.nav-links {
    text-align: center;
    margin-bottom: 20px;
}

.nav-links a {
    color: #007BFF;
    text-decoration: none;
    margin: 0 5px;
}

.nav-links a:hover {
    text-decoration: underline;
}

/* Summary */
.summary {
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

/* Search Form */
.search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Allow elements to wrap on smaller screens */
}

.search-form label {
    display: flex;
    align-items: center;
    gap: 5px; /* Align checkbox with its label */
}

.search-input {
    padding: 10px;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    background-color: #2A2A2A;
    color: #FFFFFF;
    flex: 1; /* Grow to fill available space */
    min-width: 200px; /* Minimum width to maintain usability */
}

.select-field {
    padding: 10px;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    background-color: #2A2A2A;
    color: #FFFFFF;
    flex: 1; /* Grow to fill available space */
    min-width: 150px; /* Minimum width for dropdowns */
}

.submit-btn {
    background-color: #007BFF;
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap; /* Prevent text wrapping */
}

.submit-btn:hover {
    background-color: #0056b3;
}

/* Key Table */
.key-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #FFFFFF;
    margin-top: 20px;
}

.key-table th {
    background-color: #2A2A2A;
    color: #FFFFFF;
    padding: 10px;
    text-align: left;
}

.key-table td {
    padding: 10px;
    border-bottom: 1px solid #FFFFFF;
}

.key-table tr:nth-child(even) {
    background-color: #2A2A2A;
}

/* Action Table (Now a Flex Container) */
.action-table {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Action Buttons */
.delete-btn {
    background-color: #DC3545;
    color: #FFFFFF;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.delete-btn:hover {
    background-color: #C82333;
}

.revoke-btn {
    background-color: #FFC107;
    color: #FFFFFF;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.revoke-btn:hover {
    background-color: #E0A800;
}

.activate-btn {
    background-color: #28A745;
    color: #FFFFFF;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.activate-btn:hover {
    background-color: #218838;
}

.permanent-btn {
    background-color: #17A2B8;
    color: #FFFFFF;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.permanent-btn:hover {
    background-color: #138496;
}

.update-btn {
    background-color: #007BFF;
    color: #FFFFFF;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.update-btn:hover {
    background-color: #0056b3;
}

/* Adjust invocations input width for better usability */
.invocations-input {
    width: 70px;
    padding: 5px;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    background-color: #2A2A2A;
    color: #FFFFFF;
}

/* Form Styling */
.admin-form {
    width: 100%;
}

/* Flexbox for the update form to align input and button */
.update-form {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1; /* Allow the form to grow within the action table */
}

/* Responsive Design */
@media (max-width: 600px) {
    .search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input, .select-field {
        width: 100%;
        min-width: unset; /* Remove min-width on small screens */
    }

    .action-table {
        flex-direction: column;
        align-items: stretch;
    }

    .action-table form {
        width: 100%;
    }

    .update-form {
        flex-direction: column;
        width: 100%;
    }

    .invocations-input, .update-btn {
        width: 100%;
    }

    .form-container {
        margin: 10px auto; /* Further reduced margin on small screens */
        padding: 15px; /* Slightly reduced padding for compactness */
    }
}