/* Grammar Exercise Generator Styles */

/* Ensure the main GEG container allows centering of its children if needed */
.geg-container.news-scraper-instance-container {
    /* This ensures the container itself can be centered if it's not full-width,
       or provides a context for centering its direct children. */
}

/* Specific centering for the toggle container within the GEG plugin */
.geg-container.news-scraper-instance-container .exercise-access-model-options-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the .options-toggle-group horizontally */
    /* The following margin rules would center the gray box itself if it's not full width.
       It's often better to control the box's width and centering via its parent or specific page layout.
       If the gray box is already full-width within its parent, these won't have a visible effect on its position. */
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* Add a max-width if you want the gray box to not be full-width and then centered */
    /* max-width: 600px; */ /* Example: Adjust as needed */
    margin-bottom: 20px; /* Add some space below the toggle box */
}


.geg-container {
    max-width: 800px;
    margin: 2em auto;
    padding: 25px;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color: #fff;
}

/* Styles for when .geg-container is inside EGH Account Dashboard */
.egh-create-exercise-form-content .geg-container {
    /* This rule makes the .geg-container's background fill the parent's padded area */
    max-width: calc(100% + 30px); /* Parent padding is 15px, so 15*2=30px */
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -15px; 
    margin-bottom: -15px; /* Fills the parent container including its padding area */
    padding: 20px; /* Internal padding for the content within the gray background */
    border: none;
    border-radius: 0; /* Match parent's radius if any, or none */
    box-shadow: none;
    background-color: #f9f9f9; /* Grayish background */
    position: relative; /* Needed for the inner wrapper positioning */
}

/* NEW: Inner wrapper or direct child styling for content constraint */
/* This applies to all direct children of .geg-container when in the dashboard, 
   or ideally, you'd have a single form element or wrapper div inside .geg-container */
.egh-create-exercise-form-content .geg-container > form,
.egh-create-exercise-form-content .geg-container > div:not(.geg-loading-area):not(#geg-generation-result):not(#geg-save-result):not(#geg-review-selection-area) { 
    /* Target common direct children that hold the main form content, exclude specific full-width sections */
    max-width: 800px; /* Original max-width of the form */
    margin-left: auto;
    margin-right: auto;
    /* Note: padding is already on .geg-container, so children don't need extra outer padding */
}


/* === Overrides for GEG elements when inside EGH Dashboard === */

/* Headings - Target the main form heading (assuming it's the first h2 or h3) */
.egh-create-exercise-form-content .geg-container > h2:first-child,
.egh-create-exercise-form-content .geg-container > h3:first-child {
    /* Match reading form's .news-scraper-instance-container h3 */
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
    font-size: 1.4em;
    font-family: var(--egh-form-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    padding-bottom: 0; /* Reading form h3 has no padding-bottom or border */
    border-bottom: none; /* Reading form h3 has no border */
}

/* Other headings (h4, h5) within the form, make consistent with reading form's h4/h5 */
.egh-create-exercise-form-content .geg-container h4 {
    font-family: var(--egh-form-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    color: #444; /* Match reading form h4 */
    margin-top: 1.5em;
    margin-bottom: 1em;
    font-size: 1.2em;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}
.egh-create-exercise-form-content .geg-container h5 { /* If h5 exists in grammar form */
    font-family: var(--egh-form-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    color: #555; /* Match reading form h5 */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-size: 1.1em;
    border-bottom: none;
}


/* General headings if not first-child (fallback) */
.egh-create-exercise-form-content .geg-container h2,
.egh-create-exercise-form-content .geg-container h3 {
    font-family: var(--egh-form-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    color: var(--egh-form-text-color, #333);
    /* margin-top: 1.5em; /* Already handled by specific h4/h5 or first-child h2/h3 */
    /* margin-bottom: 0.8em; */
    /* padding-bottom: 0.3em; */
    /* border-bottom: 1px solid #eee; */
}


/* Form Group */
.egh-create-exercise-form-content .geg-form-group {
    margin-bottom: 20px;
    font-family: var(--egh-form-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
}

/* Inline group for dropdowns */
.geg-inline-group {
    display: flex;
    gap: 15px; /* Space between inline items */
    align-items: flex-end; /* Align items at the bottom */
}

.geg-inline-group .geg-form-group {
    flex: 1; /* Allow items to grow and fill space */
    margin-bottom: 0; /* Remove bottom margin for inline items */
}
/* End Inline group */


/* Label */
.egh-create-exercise-form-content .geg-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--egh-form-label-color, #555);
    font-size: 1em;
    font-family: var(--egh-form-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
}

/* Inputs, Selects, Textareas */
.egh-create-exercise-form-content .geg-container select,
.egh-create-exercise-form-content .geg-container input[type="text"],
.egh-create-exercise-form-content .geg-container textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--egh-form-input-border-color, #ccc);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    background-color: #fff;
    color: var(--egh-form-text-color, #333);
    font-family: var(--egh-form-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    line-height: 1.5;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.egh-create-exercise-form-content .geg-container select:focus,
.egh-create-exercise-form-content .geg-container input[type="text"]:focus,
.egh-create-exercise-form-content .geg-container textarea:focus {
    border-color: var(--egh-form-input-focus-border-color, #800080);
    box-shadow: 0 0 0 2px rgba(128, 0, 128, 0.2);
    outline: none;
}

.egh-create-exercise-form-content .geg-container select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23555%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px auto;
    padding-right: 35px;
}

.egh-create-exercise-form-content .geg-container textarea {
    min-height: 100px;
    resize: vertical;
}

/* Buttons */
.egh-create-exercise-form-content .geg-button {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    font-family: var(--egh-form-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    text-align: center;
    text-decoration: none;
    color: var(--egh-form-button-text-color, #fff);
    background-color: var(--egh-form-button-primary-bg, #800080);
    transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    line-height: 1.5;
    min-height: 42px;
    box-sizing: border-box;
}

.egh-create-exercise-form-content .geg-button:hover {
    background-color: var(--egh-form-button-primary-hover-bg, #6a006a);
    color: var(--egh-form-button-text-color, #fff);
}

.egh-create-exercise-form-content .geg-button:disabled {
    background-color: #c8a2c8;
    opacity: 0.7;
    cursor: not-allowed;
}

.egh-create-exercise-form-content .geg-button-primary {
    width: 100%;
    padding: 12px 20px; /* Explicitly set for primary if different */
    font-size: 1.1em; /* Explicitly set for primary if different */
}

/* Ensure secondary buttons also adopt general button styling if not overridden by .geg-button */
.egh-create-exercise-form-content .geg-button-secondary {
    /* Inherits from .geg-button, specific overrides if needed */
    white-space: nowrap;
}

/* === End of EGH Dashboard Overrides for GEG === */

/* Selected Tense Display */
#geg-selected-tenses-display {
    margin-top: 10px; /* Add some space below the select/add button */
}

.geg-selected-tense-box {
    background-color: #e9ecef;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 0.9em;
}

.geg-remove-tense-button {
    background: none;
    border: none;
    color: #dc3545; /* Red */
    font-weight: bold;
    cursor: pointer;
    font-size: 1.2em;
    padding: 0 3px;
    line-height: 1;
}
.geg-remove-tense-button:hover {
    color: #a71d2a;
}


/* Loading Indicator */
.geg-loading-area {
    text-align: center;
    margin-top: 20px;
    padding: 15px;
    min-height: 50px;
    background-color: #f8f9fa;
    border: 1px dashed #ccc;
    border-radius: 4px;
}

.geg-spinner {
    display: inline-block;
    border: 5px solid #f0f0f0;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    border-top: 5px solid #800080; /* Purple spinner */
    animation: geg-spin 1.5s linear infinite;
    vertical-align: middle;
    margin-right: 15px;
}

/* Styles for the dynamic loading status text container */
#geg-loading-status-text {
     display: inline-block; /* Or block if you want it on its own line */
     vertical-align: middle;
     text-align: left; /* If you want messages to align left within this block */
}

#geg-loading-status-text p {
    margin: 0 0 5px 0; /* Space between status messages if multiple are shown */
    font-style: italic;
    color: #555;
    font-size: 1em;
}

#geg-loading-status-text p.done { /* Example class for "done" items if you want to style them */
    color: #28a745; /* Green for done */
    font-style: normal;
}


@keyframes geg-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Result/Error/Success Messages */
#geg-generation-result,
#geg-save-result { /* #geg-save-result might not be used if save is immediate */
    margin-top: 15px;
    padding: 10px 15px;
    border-radius: 4px;
}

.geg-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px 15px; /* Ensure padding is consistent */
    border-radius: 4px; /* Ensure radius is consistent */
}

.geg-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 10px 15px; /* Ensure padding is consistent */
    border-radius: 4px; /* Ensure radius is consistent */
}

/* Review and Selection Area - Kept for completeness, though current flow might not use it extensively */
#geg-review-selection-area {
    border-top: 2px solid #800080; /* Purple border */
    padding-top: 20px;
}

#geg-question-pool-display {
    margin-top: 20px;
    border: 1px solid #eee;
    padding: 15px;
    background-color: #fdfdfd;
    max-height: 600px; /* Limit height and make scrollable */
    overflow-y: auto;
}

.geg-question-item {
    border-bottom: 1px dotted #ccc;
    padding: 15px 0;
    margin-bottom: 15px;
}
.geg-question-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.geg-question-item label {
    font-weight: normal; /* Override bold label style */
    display: flex; /* Align checkbox and text */
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.geg-question-item input[type="checkbox"] {
   margin-top: 3px; /* Align checkbox better */
   flex-shrink: 0; /* Prevent checkbox from shrinking */
}

.geg-question-item strong {
    color: #333;
}

.geg-answer {
    color: #28a745; /* Green */
    font-style: italic;
}

.geg-options {
    list-style: none;
    padding-left: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.geg-options li {
    margin-bottom: 3px;
}

.geg-correct-option {
    font-weight: bold;
    color: #28a745; /* Green */
}
.geg-correct-option::before {
    content: '✔ '; /* Checkmark for correct option */
    color: #28a745;
}

.geg-gap-detail {
    margin-top: 10px;
    padding-left: 15px;
    border-left: 2px solid #eee;
}

.geg-text-block {
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    line-height: 1.6;
}