/* General page styling */
body {
    font-family: "Georgia", "Garamond", "Palatino Linotype", serif;
    margin: 0;
    padding: 0;
    background-color: #f0f8f0; /* Light green background */
    color: #333333; /* Dark text for readability */
    line-height: 1.6;
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    min-height: 100vh; /* Full viewport height */
}

.container {
    width: 80%; /* Max width of the content */
    max-width: 1200px; /* Limit the max width */
    padding: 20px;
    background-color: #ffffff; /* White background for the content */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for a soft effect */
}

h1, h2 {
    text-align: center;
    color: #2a7d60; /* Dark green for titles */
}

h1 {
    font-size: 2em;
    margin-bottom: 20px;
}

h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
}

/* Styling for the editors */
.editor-container {
    margin-bottom: 30px; /* Increased margin for more separation */
    padding: 15px;
    background-color: #f9f9f9; /* Light background for each editor */
    border-radius: 10px; /* Rounded corners */
    border: 1px solid #d0e1d9; /* Light border */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05); /* Soft shadow for each editor */
}

    .editor-container:last-child {
        margin-bottom: 0; /* Remove margin from the last editor */
    }

    .editor-container label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        color: #4e7b56; /* A medium green for labels */
    }

    .editor-container input[type="text"] {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #d0e1d9; /* Light greenish border */
        border-radius: 5px;
        background-color: #f5fdf4; /* Light green background for inputs */
        font-size: 1em;
    }

    .editor-container input[type="button"],
    .editor-container button {
        padding: 10px 20px;
        background-color: #4e7b56; /* Medium green for buttons */
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1.1em;
    }

        .editor-container input[type="button"]:hover,
        .editor-container button:hover {
            background-color: #366c44; /* Darker green for hover effect */
        }

#metaPropositionPreview {
    background-color: #d9f7e3; /* Light green background */
    border: 1px solid #a5d8a5; /* Light green border */
    width: 100%; /* Stretch the width to fill the parent container */
    height: 40px; /* Set a specific height (can adjust as needed) */
    margin: 0 auto; /* Center horizontally within the parent container */
    padding: 10px; /* Add some padding inside the textarea */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-size: 16px; /* Adjust the font size */
    font-family: Arial, sans-serif; /* Set the font */
    resize: vertical; /* Allow vertical resizing, remove horizontal resizing */
}

/* Suggestions container */
.suggestions-container {
    display: none;
    position: absolute; /* Ensure it's not obstructed */
    z-index: 1000; /* Ensure it's on top of other elements */
    background-color: white; /* Optional: to make suggestions stand out */
    border: 1px solid #ddd; /* Optional: for styling */
    width: 100%; /* Adjust width to match input */
}

.suggestion-item {
    padding: 5px;
    cursor: pointer;
}

    .suggestion-item:hover {
        background-color: #f0f0f0;
    }

/* Layout for "ID" and "Entry" fields in two rows */
.input-labels {
    display: flex;
    justify-content: space-between; /* Distribute labels horizontally */
}

    .input-labels label {
        width: 45%; /* Each label gets 45% width */
    }

.input-fields {
    display: flex;
    justify-content: space-between; /* Distribute inputs horizontally */
}

    .input-fields input {
        width: 45%; /* Each input gets 45% width */
    }

/* If you want to stack multiple pairs of ID and Entry inputs vertically */
.premise-entry, .conclusion-entry {
    margin-bottom: 15px; /* Space between each premise/conclusion pair */
}

/* Button and input field styling */
.editor-container input[type="text"] {
    padding: 8px;
    font-size: 14px;
}

/* ID input field smaller size */
.input-fields input.premiseID,
.input-fields input.conclusionID {
    width: 200px; /* Adjust width as needed */
}

/* Basic Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #ddd;
}

/* Header Styles */
th {
    background-color: #88fc96; /* Light Green */
    color: #004d40; /* Dark Green text */
}

/* Row Styles */
tr:nth-child(even) {
    background-color: #F0FFF0; /* Very light green for even rows */
}

tr:hover {
    background-color: #A9DFBF; /* Slightly darker green for hover effect */
}

/* Input Fields Styling */
input[type="text"] {
    padding: 8px;
    border: 1px solid #A5D6A7; /* Light green border */
    background-color: #E8F5E9; /* Very light green background */
    font-size: 16px;
}

    input[type="text"]:focus {
        outline: none;
        border-color: #388E3C; /* Darker green border on focus */
    }

/* Button Styling */
button {
    padding: 10px 15px;
    background-color: #66BB6A; /* Medium light green */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    button:disabled {
        background-color: #A5D6A7; /* Lighter green when disabled */
        cursor: not-allowed;
    }

    button:hover:not(:disabled) {
        background-color: #388E3C; /* Darker green on hover */
    }
.input-pair {
    display: flex;
    gap: 10px; /* Adds spacing between input fields */
    margin-bottom: 8px; /* Space between rows */
    align-items: center; /* Aligns fields properly */
}

    .input-pair input {
        padding: 5px;
        font-size: 14px;
    }

        .input-pair input:not([disabled]) {
            width: 120px; /* Adjust width to fit "A.2:2:111111" */
            text-align: center; /* Optional: Centers text for better readability */
        }

        .input-pair input:disabled {
            flex: 1; /* Makes the output field take the remaining space */
            background-color: #f0f0f0;
            color: #666;
        }

.proposition-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.proposition-input .input-group {
    margin-bottom: 10px; /* Adds spacing between input fields */
}

.inline-group {
    display: flex;
    gap: 10px;
}

.input-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.negation-section {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

#modifierSection {
    margin-top: 10px;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
}

.inline-group {
    display: flex;
    gap: 15px; /* Increases spacing between fields */
}

.input-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Adds some spacing specifically for the Quantifier inputs */
#quantifierSubject, #quantifierObject {
    margin-right: 10px;
    min-width: 120px; /* Ensures quantifier fields have enough space */
}

.negation-section {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

#modifierSection {
    margin-top: 10px;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    display: none; /* Ensures it starts as hidden */
}

#newCategoryDropdown {
    width: 33%; /* Makes the dropdown a third of its original width */
    margin-right: 10px; /* Adds some spacing after the dropdown */
    padding: 5px; /* Adds some padding for better appearance */
}

#copyRowButton {
    margin-top: 10px;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

    #copyRowButton:hover {
        background-color: #45a049;
    }
/* Style the container */
.nl-input-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between elements */
    margin-bottom: 15px; /* Space below the container */
}

/* Style the input field */
#nlProposition {
    flex: 1; /* Makes it take up available space */
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Style the button */
#nlSubmit {
    padding: 8px 12px;
    font-size: 14px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

    #nlSubmit:hover {
        background-color: #0056b3;
    }