/* Dark Mode Theme */
.de-extractor-container.de-dark-mode {
    max-width: 900px;
    margin: 2em auto;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #2d3748;
    color: #cbd5e0;
    padding: 2.5em;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    position: relative; 
}

.de-dark-mode .de-options-grid {
    display: grid;
    /* Attempt to make the first column (processing) wider than the second (sorting) 
       when they are on the same row. This assumes a layout that often goes to 2 columns.
       Adjust fr units as needed. This tries to give Processing ~60% and Sorting ~40% if they are side-by-side.
    */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Fallback and for single column */
    gap: 2em;
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 0;
    border: none;
    background-color: transparent;
}

/* Specific styling for column widths IF they become distinct columns */
/* This requires knowing how many columns 'auto-fit' will generate. 
   A more explicit approach for 2 columns might be needed if auto-fit doesn't give enough control.
   For now, we hope that the natural content of processing options pushes its width.
   Let's target the processing options group directly if possible to influence its size.
*/
.de-dark-mode .de-option-group {
    padding: 1.5em;
    background-color: #1a202c;
    border: 1px solid #4a5568;
    border-radius: 6px;
}

/* Make processing options take up more space if possible, or prevent label wrapping */
.de-dark-mode .de-processing-options {
    /* If the grid makes this a distinct column and allows it, it can be wider */
    /* min-width: 380px; /* Suggest a wider minimum for this specific group */
    /* If it often forms 2 columns with sorting options: */
    /* grid-column: span 1; /* Default, but can be overridden below for specific layouts */
}
.de-dark-mode .de-processing-options label {
     white-space: nowrap; /* Force no wrap for these labels if width is an issue */
}


.de-dark-mode .de-option-group h3 {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 1.1em;
    color: #e2e8f0;
    border-bottom: 1px solid #4a5568;
    padding-bottom: 0.6em;
}

.de-dark-mode .de-option-group label {
    display: block; /* Revert to block, flex was for alignment, nowrap handles inline */
    margin-bottom: 0.8em;
    font-weight: normal;
    color: #a0aec0;
    cursor: pointer;
    /* display: flex; REMOVED to let white-space work naturally for block */
    /* align-items: center; REMOVED */
    font-size: 0.95em;
}
.de-dark-mode .de-option-group label input[type="checkbox"],
.de-dark-mode .de-option-group label input[type="radio"] {
    margin-right: 0.6em;
    accent-color: #4299e1;
    transform: scale(1.1);
    vertical-align: middle; /* Align checkbox with text for block labels */
}


.de-dark-mode .de-option-group input[type="text"] {
    width: 100%;
    padding: 0.8em 0.9em;
    margin-top: 0.3em;
    margin-bottom: 0.5em;
    border: 1px solid #4a5568;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #2d3748;
    color: #e2e8f0;
    font-size: 0.95em;
}
.de-dark-mode .de-option-group input[type="text"]::placeholder {
    color: #718096;
}

.de-dark-mode .de-option-group small {
    font-size: 0.8em;
    color: #718096;
    display: block;
    margin-top: 0.1em;
}

.de-dark-mode .de-filter-words-mode {
    margin-top: 0.8em;
    margin-bottom: 0.2em;
}
.de-dark-mode .de-filter-words-mode label { /* These are inline, so flex for alignment is good here */
    display: inline-flex; 
    align-items: center;
    margin-right: 1.5em;
    margin-bottom: 0.5em;
}

/* Main Extractor styles remain the same */
.de-dark-mode .de-extractor {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2em;
}
/* ... other .de-extractor styles ... */
/* ... button styles ... */
/* ... toast styles ... */
/* ... admin overrides ... */

/* Previous CSS below these comments continues here, unmodified for this step */

.de-dark-mode .de-extractor textarea {
  width: 100%;
  height: 150px;
  font-family: monospace;
  padding: 0.9em;
  resize: vertical;
  border: 1px solid #4a5568;
  border-radius: 4px;
  background-color: #1a202c;
  color: #e2e8f0;
  font-size: 0.95em;
}
.de-dark-mode .de-extractor textarea::placeholder {
    color: #718096;
}

.de-dark-mode .de-extractor button {
  padding: 0.9em 1.5em;
  cursor: pointer;
  border: none;
  color: white;
  font-weight: 600;
  border-radius: 4px;
  transition: background-color 0.2s ease, transform 0.1s ease;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.05em;
}
.de-dark-mode .de-extractor button:active {
    transform: translateY(1px);
}

.de-dark-mode .de-extractor > label {
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: -0.5em;
  font-size: 1.05em;
}
.de-dark-mode .de-extractor #de-count {
  margin-left: 0.7em;
  font-weight: normal;
  color: #a0aec0;
  background-color: #2d3748;
  padding: 0.2em 0.5em;
  border-radius: 3px;
  font-size: 0.9em;
  display: inline-block;
}

.de-dark-mode .de-button-extract { background-color: #38a169; }
.de-dark-mode .de-button-extract:hover { background-color: #2f855a; }
.de-dark-mode .de-button-copy { background-color: #3182ce; }
.de-dark-mode .de-button-copy:hover { background-color: #2b6cb0; }
.de-dark-mode .de-button-download { background-color: #e53e3e; }
.de-dark-mode .de-button-download:hover { background-color: #c53030; }

#de-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.de-toast {
    background-color: #38a169;
    color: white;
    padding: 10px 18px;
    border-radius: 5px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    font-size: 0.9em;
    font-weight: 500;
    opacity: 0;
    transform: translateX(110%);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    min-width: 220px;
    text-align: center;
    white-space: nowrap;
}

.de-toast.de-toast-show {
    opacity: 1;
    transform: translateX(0);
}

body.wp-admin .de-extractor-container.de-dark-mode {
    background-color: #f0f0f1;
    color: #1d2327;
    padding: 0;
    box-shadow: none;
}
body.wp-admin .de-dark-mode .de-options-grid {
    border: 1px solid #c3c4c7;
    background-color: #fff;
    gap: 1.5em;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
body.wp-admin .de-dark-mode .de-option-group {
    background-color: #fff;
    border: 1px solid #dcdcde;
}
body.wp-admin .de-dark-mode .de-option-group h3 {
    color: #1d2327;
    border-bottom: 1px solid #dcdcde;
}
body.wp-admin .de-dark-mode .de-option-group label,
body.wp-admin .de-dark-mode .de-extractor #de-count {
    color: #2c3338;
}
body.wp-admin .de-dark-mode .de-option-group input[type="text"],
body.wp-admin .de-dark-mode .de-extractor textarea {
    background-color: #fff;
    color: #2c3338;
    border: 1px solid #8c8f94;
}
body.wp-admin .de-dark-mode .de-option-group input[type="text"]::placeholder,
body.wp-admin .de-dark-mode .de-extractor textarea::placeholder {
    color: #50575e;
}
body.wp-admin .de-dark-mode .de-option-group small {
    color: #50575e;
}
body.wp-admin .de-dark-mode .de-extractor > label {
    color: #1d2327;
}