/* Export page specific styles */

/* Page layout */
body.page-export { background: var(--color-bg); color: var(--color-text-primary); }
.dashboard-shell { min-height: 100vh; display: flex; flex-direction: column; }

.top-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px 22px; }
.left-controls { display:flex; align-items:center; gap:10px; justify-self:start; }
.right-controls { display:flex; align-items:center; justify-self:end; }
.top-controls #header-logo { width:48px; height:48px; justify-self:center; }

.import-export-switcher {
	display:inline-flex;
	gap:6px;
	align-items:center;
	padding: 0.3rem;
	border-radius: calc(var(--border-radius-button) + 4px);
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.import-export-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.75rem 1rem;
	border-radius: var(--border-radius-button);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--color-text-secondary);
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.08s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.import-export-tab:hover {
	color: var(--color-text-primary);
	background: var(--color-card-bg);
}

.import-export-tab.active {
	background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
	color: white;
	border-color: var(--color-primary-dark);
	box-shadow: var(--shadow-sm);
}

.export-main { flex: 1 1 auto; display: flex; flex-direction: column; max-width: 1100px; margin: 0 auto; width: 100%; padding: 18px; }
.page-title { margin: 8px 0 4px; }
.lead { margin: 0 0 18px; color: var(--color-text-secondary); }

.panels { display: flex; gap: 18px; flex: 1 1 auto; }

.panel { flex: 1 1 0; display: flex; flex-direction: column; background: var(--color-card-bg); border: 1px solid var(--color-border); padding: 18px; border-radius: 12px; box-shadow: var(--shadow-sm); }
.panel.hidden { display: none; }


.panel h2 {
	margin-top: 0;
}

.status-card {
	margin: 4px 0 14px;
	padding: 14px;
	border-radius: 14px;
	border: 1px solid var(--color-border);
	background:
		radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 45%),
		linear-gradient(180deg, color-mix(in srgb, var(--color-card-bg) 92%, white), var(--color-card-bg));
}

.status-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.status-label {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.status-message {
	margin-top: 4px;
	font-weight: 700;
}

.status-badge {
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
}

.status-badge[data-tone="success"] {
	background: color-mix(in srgb, var(--color-correct) 12%, var(--color-card-bg));
	color: var(--color-correct);
	border-color: color-mix(in srgb, var(--color-correct) 35%, var(--color-border));
}

.status-badge[data-tone="error"] {
	background: var(--color-incorrect-light);
	color: var(--color-incorrect);
	border-color: color-mix(in srgb, var(--color-incorrect) 40%, var(--color-border));
}

.status-badge[data-tone="working"] {
	background: color-mix(in srgb, var(--color-primary) 12%, var(--color-card-bg));
	color: var(--color-primary);
	border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.status-progress-track {
	position: relative;
	margin-top: 14px;
	height: 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-border) 55%, transparent);
	overflow: hidden;
}

.status-progress-bar {
	height: 100%;
	width: 0%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, white));
	transition: width 180ms ease;
}

.status-progress-bar.busy {
	background-size: 180px 100%;
	animation: tnq-progress-sheen 1.1s linear infinite;
}

.status-meta {
	margin-top: 10px;
	font-size: 13px;
	color: var(--color-text-secondary);
}

.field-label { display:block; margin:12px 0 6px; font-size:13px; color:var(--color-text-secondary); }


.data-preview, .data-input {
	width:100%;
	min-height:160px;
	resize:vertical;
	padding:0.85rem 0.95rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
	font-size:13px;
	line-height: 1.45;
	border:1px solid var(--color-border);
	border-radius:var(--border-radius-button);
	background:var(--color-bg-primary);
	color:var(--color-text-primary);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.data-preview:focus,
.data-input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(91, 107, 255, 0.18);
}

.data-preview::placeholder,
.data-input::placeholder {
	color: var(--color-text-secondary);
}

.data-preview.compact { min-height: 108px; }


.file-input {
	display:block;
	width: 100%;
	margin-top:6px;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-button);
	background: var(--color-bg-primary);
	color: var(--color-text-primary);
	font-weight: 600;
}

.file-input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(91, 107, 255, 0.18);
}

.panel-actions { display:flex; gap:10px; margin-top:auto; }
.tnq-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.85rem 1.15rem;
	border-radius: var(--border-radius-button);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	border: 1px solid transparent;
	background: var(--color-card-bg);
	cursor: pointer;
	transition: transform 0.08s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.tnq-button:hover:not(:disabled) { transform: translateY(-1px); }
.tnq-button:active:not(:disabled) { transform: translateY(1px); }
.tnq-button:disabled { cursor:not-allowed; opacity:0.55; }
.tnq-button.primary {
	background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
	color:white;
	border-color:var(--color-primary-dark);
}

.tnq-button.primary:hover:not(:disabled) {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

.tnq-button.subtle {
	background:transparent;
	color: var(--color-text-secondary);
	border-color:var(--color-border);
}

.tnq-button.subtle:hover:not(:disabled) {
	color: var(--color-text-primary);
	border-color: var(--color-text-secondary);
	background: var(--color-bg-secondary);
}

.tnq-button.danger {
	background: linear-gradient(135deg, color-mix(in srgb, var(--color-incorrect) 85%, #702020), var(--color-incorrect));
	color: white;
	border-color: color-mix(in srgb, var(--color-incorrect) 70%, #5c1717);
}

.tnq-button.danger:hover:not(:disabled) {
	background: linear-gradient(135deg, var(--color-incorrect), color-mix(in srgb, var(--color-incorrect) 82%, #7a1f1f));
}
.warning { margin-top:10px; padding:10px; background:var(--color-incorrect-light); border-radius:6px; color:var(--color-incorrect); font-size:13px; }


.muted { color:var(--color-text-secondary); }
.footnote { margin-top:18px; font-size:13px; }

@media (max-width: 820px) {
	.panels { flex-direction: column; }
	.top-controls { padding: 12px; }
	.export-main { padding: 12px; }
	.status-head,
	.panel-actions { flex-direction: column; align-items: stretch; }
}

@keyframes tnq-progress-sheen {
	from { background-position: 0 0; }
	to { background-position: 180px 0; }
}