:root {
	--color-brand-primary: #d50032;
	--color-brand-primary-5: rgba(213, 0, 50, 0.05);
	--color-brand-primary-15: rgba(213, 0, 50, 0.15);
	--color-brand-primary-25: rgba(213, 0, 50, 0.25);
	--color-brand-primary-85: rgba(213, 0, 50, 0.85);
	--color-brand-dark: #1e293b;
	--color-brand-button: var(--color-brand-primary);
	--color-brand-button-hover: var(--color-brand-dark);
	--color-brand-hover-bg: var(--color-brand-dark);
	--color-on-primary: #ffffff;
	--color-on-primary-hover: #ffffff;
	--color-on-brand-primary: #ffffff;
	--color-button-hover-bg: var(--color-brand-hover-bg);
	--color-button-hover-text: var(--color-on-primary-hover);
	/* Smart accent colors (defaults - overridden by theme) */
	--color-accent-on-light: var(--color-brand-primary);
	--color-accent-on-light-15: var(--color-brand-primary-15);
	--color-accent-on-dark: var(--color-brand-primary);
	--color-focus-ring: var(--color-brand-primary);
	--color-focus-ring-15: var(--color-brand-primary-15);

	--color-background: #f8fafc;
	--color-background-primary: #f8fafc;
	--color-background-secondary: #f1f5f9;
	--color-surface: #ffffff;
	--color-surface-variant: #f8fafc;
	--color-surface-2: #f8fafc;
	--color-surface-secondary: #f8fafc;
	--color-surface-hover: #f1f5f9;
	--color-neutral-50: #f8fafc;
	--color-neutral-100: #f1f5f9;

	--color-text-primary: #1e293b;
	--color-text-secondary: #64748b;
	--color-text-tertiary: #94a3b8;

	--color-border: #e2e8f0;
	--color-border-subtle: #e5e7eb;
	--color-border-hover: #cbd5e1;

	--color-status-success: #2f9d57;
	--color-status-warning: #f0be28;
	--color-status-error: #ef4444;
	--color-status-info: #3b82f6;
	--color-status-success-15: rgba(47, 157, 87, 0.15);
	--color-status-warning-15: rgba(240, 190, 40, 0.15);
	--color-status-error-15: rgba(239, 68, 68, 0.15);
	--color-status-info-15: rgba(59, 130, 246, 0.15);

	/* Add missing variables for consistency */
	--color-disabled: #e2e8f0;
	--color-on-disabled: #64748b;

	--font-size-sm: 0.75rem;
	--font-size-md: 0.875rem;
	--font-size-lg: 1rem;

	--space-xs: 0.375rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;

	/* Variable type colors - Material Design palette */
	--color-input-var: rgba(76, 175, 80, 0.08);
	--color-input-var-hover: rgba(76, 175, 80, 0.15);
	--color-input-var-text: rgba(27, 94, 32, 0.87);

	--color-file-var: rgba(33, 150, 243, 0.08);
	--color-file-var-hover: rgba(33, 150, 243, 0.15);
	--color-file-var-text: rgba(13, 71, 161, 0.87);

	--color-result-var: rgba(233, 30, 99, 0.08);
	--color-result-var-hover: rgba(233, 30, 99, 0.15);
	--color-result-var-text: rgba(136, 14, 79, 0.87);

	/* Icon filter variable - use only where black icons are explicitly needed */
	--icon-filter-black: brightness(0) saturate(100%);
}

/*
 * Icons use font color by default (inherit from parent).
 * Apply --icon-filter-black only in contexts that need black icons.
 * DO NOT apply a global filter - it breaks colored button icons.
 */

/* =========================================
   Base Elements
   ========================================= */
* {
	margin: 0;
	box-sizing: border-box;
}

html {
	background: var(--color-background);
}

body {
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font-family: 'Inter', system-ui, sans-serif;
	color: var(--color-text-primary);
}

section {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* =========================================
   Containers
   ========================================= */
.input-container {
	padding: var(--space-md);
	padding-bottom: 0;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

.main-container {
	flex: 1;
	display: flex;
	gap: var(--space-md);
	margin: var(--space-md);
	min-height: 0;
}

/* Clean two-column layout: left nav (sidebar) + content (right) */
.main-container .content-nav {
	flex: 1;
	min-width: 300px;
	max-width: 400px;
}

.main-container .content-section {
	flex: 3;
}

/* =========================================
   Form Elements
   ========================================= */
button, input {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-sm);
}

button {
	/* Default buttons should be neutral; variant buttons should use .btn-* classes.
	   This avoids unexpected hover inversions (e.g., icons turning white on light backgrounds). */
	background: var(--color-surface);
	color: var(--color-text-primary);
	border: 1px solid var(--color-border);
	cursor: pointer;
	font-weight: 500;

	&:hover {
		background: var(--color-surface-hover);
		color: var(--color-text-primary);
		border-color: var(--color-border-hover);
	}

	&:active {
		transform: translateY(0);
	}
}

.stop-button {
	background: var(--color-brand-dark);
}

input:not([type="checkbox"]):not([type="radio"]), textarea {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-text-primary);
	width: 100%;

	&:hover {
		border-color: var(--color-accent-on-light-15);
	}

	&:focus {
		outline: none;
		border-color: var(--color-focus-ring);
		box-shadow: 0 0 0 2px var(--color-focus-ring-15);
	}
}

/* =========================================
   Variable References - Material Design
   ========================================= */
.variable-reference {
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	height: 24px;
	border-radius: 12px;
	font-size: var(--font-size-sm);
	font-weight: 500;
	background: var(--color-result-var);
	color: var(--color-result-var-text);
	cursor: pointer;
	transition: all 150ms ease;
	border: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	margin: 0 2px;

	&:hover {
		background: var(--color-result-var-hover);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
		transform: translateY(-1px);
	}

	&:active {
		transform: translateY(0);
	}
}

/* User input variables */
.variable-reference[data-variable="userInput"] {
	background: var(--color-input-var);
	color: var(--color-input-var-text);

	&:hover {
		background: var(--color-input-var-hover);
	}
}

/* File context variables */
.variable-reference[data-required="true"]:not([data-variable="userInput"]) {
	background: var(--color-file-var);
	color: var(--color-file-var-text);

	&:hover {
		background: var(--color-file-var-hover);
	}
}

/* Context-specific styling */
.section-header .variable-reference {
	margin-left: var(--space-xs);
}

.section-label .variable-reference {
	font-weight: normal;
}

/* =========================================
   Navigation
   ========================================= */
/*
   Navigation styles have been moved to unified_nav.css
*/
nav {
	grid-area: nav;
}

.app-container {

	& > div {
		overflow-y: auto;
	}
}

/* =========================================
   Content Sections
   ========================================= */
.section-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-primary);
	margin: 0;
	padding: var(--space-md);
	border-bottom: 1px solid var(--color-border);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	min-height: 56px;
	display: flex;
	align-items: center;
	background: var(--color-surface);
}

/* Base flex values - overridden in main-container context */
.content-nav {
	flex: 1;
}

.content-section {
	flex: 3;
}

/* Minimal content container layout (restores scroll ownership) */
.content-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface);
}

.content-section .content-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-padding-top: 80px;
}

.content-section .content-content.inputs-visible #variable-userInput { display: flex; }
.content-section .content-content.inputs-visible #results-container { display: none; }
.content-section .content-content.results-visible #variable-userInput { display: none; }
.content-section .content-content.results-visible #results-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* =========================================
   Common Elements
   ========================================= */
/* Labels and headings */
.label {
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin: 0;
	font-weight: 500;
}

/* Category count indicators */
.category-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: var(--space-xs);
	background: var(--color-accent-on-light-15);
	color: var(--color-accent-on-light);
	font-size: 0.7rem;
	font-weight: 500;
	padding: 1px 6px;
	border-radius: var(--radius-sm);
}

/* Navigation actions */
.nav-actions {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

/* Generate content blocks */
.generate-content {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-weight: 500;
	font-size: var(--font-size-md);
	letter-spacing: 0.5px;
	text-transform: uppercase;

	.icon {
		width: 24px;
		height: 24px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* =========================================
   Button Styles
   ========================================= */
/* Option buttons */
.option-btn {
    padding: 10px 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
}

.option-btn:hover {
    background-color: var(--color-surface-hover);
}

.option-btn.primary {
    background-color: var(--color-brand-primary);
    color: var(--color-on-primary);
    border-color: var(--color-brand-primary);
}

.option-btn.primary:hover {
    background-color: var(--color-button-hover-bg);
    border-color: var(--color-button-hover-bg);
    color: var(--color-button-hover-text);
}

.option-btn.delete {
    color: var(--color-status-error);
    border-color: var(--color-status-error);
}

.option-btn.delete:hover {
    background-color: rgba(244, 67, 54, 0.05);
}

/* Save and discard buttons */
.save-btn {
    padding: 10px 20px;
    background-color: var(--color-brand-primary);
    color: var(--color-on-primary);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.save-btn:hover {
    background-color: var(--color-button-hover-bg);
    color: var(--color-button-hover-text);
}

.save-btn:disabled {
    background-color: var(--color-border);
    cursor: not-allowed;
    opacity: 0.7;
}

.discard-btn {
    padding: 10px 20px;
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.discard-btn:hover {
    background-color: var(--color-surface-hover);
}

/* Setting groups */
.setting-group {
    margin-bottom: 18px;
}

.setting-group:last-child {
    margin-bottom: 0;
}

.setting-group.full-width {
    width: 100%;
}

.setting-group.button-group {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* Form element styles */
.text-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--color-text-primary);
}

.text-input:focus {
    border-color: var(--color-focus-ring);
    box-shadow: 0 0 0 2px var(--color-focus-ring-15);
    outline: none;
}

/* Button styles - expanded */
.btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    text-align: center;
}

.btn-primary {
    background-color: var(--color-brand-primary);
    color: var(--color-on-primary);
    border-color: var(--color-brand-primary);
}

.btn-primary:hover {
    background-color: var(--color-brand-primary-85);
}

.btn-secondary {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-text-secondary);
}

/* Control buttons for inputs and toggles */
.btn-control {
    padding: 4px 10px;
    font-size: 13px;
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.btn-control:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-text-secondary);
}

.btn-control.active {
    background-color: var(--color-accent-on-light-15);
    border-color: var(--color-accent-on-light);
    color: var(--color-accent-on-light);
}

/* Icon buttons */
.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.btn-icon:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-text-secondary);
}

.btn-icon.small {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

/* =========================================
   Components
   ========================================= */
/* Toggle button groups */
.toggle-group {
    display: flex;
    overflow: hidden;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.toggle-group button {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: none;
    border-right: 1px solid var(--color-border);
    border-radius: 0;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    flex: 1;
}

.toggle-group button:last-child {
    border-right: none;
}

.toggle-group button:hover {
    background-color: var(--color-surface-hover);
}

.toggle-group button.active {
    background-color: var(--color-brand-primary);
    color: var(--color-on-primary);
}

/* Number input controls */
.number-control {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.number-control input[type="number"] {
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: 6px 8px;
    height: 30px;
}

.number-control button {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    padding: 6px 12px;
}

.number-control button:hover {
    background-color: var(--color-surface-hover);
}

.number-control button:first-of-type {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.number-control input + button {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Action buttons for panels */
.add-file-container,
.action-buttons {
    padding: 15px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.add-btn {
    width: 100%;
    padding: 12px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.add-btn:hover {
    background-color: var(--color-surface-hover);
}

/* Statistics styles */
.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-label {
    color: var(--color-text-secondary);
    font-size: 14px;
}

.stat-value {
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: 14px;
}

/* Empty state */
.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-secondary);
    font-size: 14px;
    padding: 30px;
    text-align: center;
}

/* Notification styles are now handled by the global toast system */

/* Workflow Results Component Styles */
/* Styles moved to section_results.css */