/* CSS Variables
====================================================================== */
:root {
	/* Colors */
	--oodbc-color-white: #fff;
	--oodbc-color-border: #ccd0d4;
	--oodbc-color-shadow: rgba(0, 0, 0, 0.04);
	--oodbc-color-success: #00a32a;
	--oodbc-color-error: #d63638;
	--oodbc-color-warning-bg: #fff3cd;
	--oodbc-color-warning-border: #ffc107;
	--oodbc-color-text-muted: #666;
	
	/* Spacing */
	--oodbc-spacing-small: 10px;
	--oodbc-spacing-medium: 15px;
	--oodbc-spacing-large: 20px;
	
	/* Border */
	--oodbc-border-width: 1px;
	--oodbc-border-radius: 10px;
	--oodbc-border-style: solid;
	
	/* Shadow */
	--oodbc-box-shadow: 0 1px 1px var(--oodbc-color-shadow);
	
	/* Font Sizes */
	--oodbc-font-size-small: 13px;
}



/* Wrapper (Main Container)
====================================================================== */
.oodbc-wrapper {
	display: flex;
	gap: var(--oodbc-spacing-large);
	flex-wrap: wrap;
}



/* Columns Layout
====================================================================== */
.oodbc-left,
.oodbc-right {
	flex: 1;
	min-width: 400px;
}



/* Box Styling (Settings, Statistics, etc.)
====================================================================== */
.oodbc-box {
	background: var(--oodbc-color-white);
	padding: var(--oodbc-spacing-large);
	border: var(--oodbc-border-width) var(--oodbc-border-style) var(--oodbc-color-border);
	box-shadow: var(--oodbc-box-shadow);
	margin-bottom: var(--oodbc-spacing-large);
	border-radius: var(--oodbc-border-radius);
}



/* Statistics Table
====================================================================== */
.oodbc-stats-table {
	margin-top: var(--oodbc-spacing-medium);
}

.oodbc-stats-old-success {
	color: var(--oodbc-color-success);
}

.oodbc-stats-old-error {
	color: var(--oodbc-color-error);
}



/* Warning Box
====================================================================== */
.oodbc-warning-box {
	background: var(--oodbc-color-warning-bg);
	border-left: 4px var(--oodbc-border-style) var(--oodbc-color-warning-border);
	padding: var(--oodbc-spacing-small);
	margin: var(--oodbc-spacing-medium) 0;
}



/* Manual Deletion Result
====================================================================== */
.oodbc-delete-result {
	margin-top: var(--oodbc-spacing-medium);
}

.oodbc-generator-form input[type="number"],
.oodbc-generator-form input[type="date"] {
	width: 100%;
	max-width: 250px;
}

.oodbc-generator-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--oodbc-spacing-medium);
}




/* Generator Form
====================================================================== */
.oodbc-generator-grid {
	display: flex;
	gap: 10px;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
}

.oodbc-generator-grid p {
	margin: 5px 0;
}




/* Preview Section
====================================================================== */
.oodbc-preview-description {
	margin-bottom: var(--oodbc-spacing-medium);
}

.oodbc-preview-accordion-item {
	margin-bottom: var(--oodbc-spacing-small);
	border: var(--oodbc-border-width) var(--oodbc-border-style) var(--oodbc-color-border);
	border-radius: 6px;
	overflow: hidden;
}

.oodbc-accordion-summary {
	width: 100%;
	background: var(--oodbc-color-white);
	display: flex;
	align-items: center;
	text-align: left;
	padding: 12px 14px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	list-style: none;
}

.oodbc-accordion-summary::-webkit-details-marker {
	display: none;
}

.oodbc-accordion-summary::before {
	content: "+";
	font-size: 18px;
	font-weight: 700;
	width: 20px;
}

.oodbc-preview-accordion-item[open] .oodbc-accordion-summary::before {
	content: "-";
}

.oodbc-preview-form-name {
	margin-right: var(--oodbc-spacing-small);
}

.oodbc-accordion-panel {
	padding: 0 var(--oodbc-spacing-small) var(--oodbc-spacing-small);
}

.oodbc-preview-form-count {
	font-weight: normal;
	font-size: var(--oodbc-font-size-small);
	color: var(--oodbc-color-text-muted);
}

.oodbc-preview-table {
	margin-bottom: var(--oodbc-spacing-large);
}

.oodbc-preview-field-label {
	color: var(--oodbc-color-text-muted);
}

.oodbc-preview-more-entries {
	text-align: center;
	color: var(--oodbc-color-text-muted);
	font-style: italic;
}



/* Success Message
====================================================================== */
.oodbc-success-message {
	color: var(--oodbc-color-success);
}