/* Interactive form button styles using theme colors */
.config-generator button, .core-workflow-generator button {
    border: none;
    border-radius: 0.375rem;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    text-decoration: none !important;
}

.config-generator button:hover, .core-workflow-generator button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    text-decoration: none !important;
}

.config-generator button:active, .core-workflow-generator button:active {
    transform: translateY(0);
}

/* Primary button (Generate config.txt) - using theme primary color */
.config-generator button[onclick="generateConfig()"] {
    background-color: var(--pst-color-primary, #9ACD32);
    color: white;
}

.config-generator button[onclick="generateConfig()"]:hover {
    background-color: var(--pst-color-secondary, #FF7256);
}

/* Secondary button (Download script) - using theme success color */
.config-generator button[onclick="downloadScript()"] {
    background-color: var(--pst-color-success, #05868E);
    color: white;
}

.config-generator button[onclick="downloadScript()"]:hover {
    background-color: var(--pst-color-primary, #9ACD32);
}

/* Core workflow generator button - special styling */
.core-workflow-generator button[onclick="generateCoreWorkflow()"] {
    background-color: #0066cc !important;
    color: white !important;
    font-size: 16px !important;
    padding: 15px 25px !important;
    box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3) !important;
}

.core-workflow-generator button[onclick="generateCoreWorkflow()"]:hover {
    background-color: #0052a3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 102, 204, 0.4) !important;
}

/* Form input styling to match theme */
.config-generator input[type="text"],
.config-generator input[type="number"],
.core-workflow-generator input[type="text"],
.core-workflow-generator input[type="number"] {
    border: 1px solid var(--pst-color-border, #d1d5da);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background-color: var(--pst-color-background, #fff);
    color: var(--pst-color-text-base, #222832);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.config-generator input[type="text"]:focus,
.config-generator input[type="number"]:focus,
.core-workflow-generator input[type="text"]:focus,
.core-workflow-generator input[type="number"]:focus {
    outline: none;
    border-color: var(--pst-color-primary, #0a7d91);
    box-shadow: 0 0 0 0.2rem rgba(10, 125, 145, 0.25);
}

/* Core workflow generator specific input styling */
.core-workflow-generator input[type="text"],
.core-workflow-generator input[type="number"] {
    border: 2px solid #0066cc !important;
}

.core-workflow-generator input[type="text"]:focus,
.core-workflow-generator input[type="number"]:focus {
    border-color: #0052a3 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25) !important;
}

/* Summary/details styling */
.config-generator details summary,
.core-workflow-generator details summary {
    background-color: var(--pst-color-surface, #f3f4f5);
    border: 1px solid var(--pst-color-border, #d1d5da);
    color: var(--pst-color-text-base, #222832);
    transition: background-color 0.15s ease-in-out;
}

.config-generator details summary:hover {
    background-color: var(--pst-color-primary-bg, #d0ecf1);
}

.core-workflow-generator details summary {
    background-color: #e6f3ff !important;
    border: 1px solid #0066cc !important;
    color: #0066cc !important;
}

.core-workflow-generator details summary:hover {
    background-color: #cce7ff !important;
}

.config-generator details[open] summary,
.core-workflow-generator details[open] summary {
    border-bottom: none;
}

/* Config preview styling */
.config-generator #configPreview,
.core-workflow-generator #coreConfigPreview {
    background-color: var(--pst-color-on-background, #fff);
    border: 1px solid var(--pst-color-border, #d1d5da);
    border-radius: 0.375rem;
    margin-top: 1rem;
}

.config-generator #configContent {
    background-color: var(--pst-color-surface, #f3f4f5);
    color: var(--pst-color-text-base, #222832);
    border: 1px solid var(--pst-color-border, #d1d5da);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}

.core-workflow-generator #coreConfigContent {
    background-color: #f0f8ff;
    color: #003366;
    border: 1px solid #0066cc;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    padding: 10px;
    border-radius: 4px;
}