/**
 * Entel Translation Frontend Styles
 *
 * Inherits design tokens from the IRAT Theme custom properties.
 * Falls back to sensible defaults if theme variables are not available.
 */

/* --- Main Wrapper --- */
.entel-translation-ui-wrapper {
	margin: var(--space-6, 1.5rem) 0;
	font-family: var(--font-sans, inherit);
	color: var(--color-text, inherit);
	line-height: var(--leading-normal, 1.6);
}

/* --- Tab Navigation --- */
.entel-tab-nav {
	display: flex;
	gap: 0;
	background: var(--color-surface, #F7F8F9);
	border: 1px solid var(--color-border, #E6E8EA);
	border-radius: var(--radius-full, 9999px);
	padding: 4px;
	width: fit-content;
	margin-bottom: var(--space-6, 1.5rem);
}

.entel-tab-nav button.nav-tab {
	cursor: pointer;
	padding: var(--space-2, 0.5rem) var(--space-6, 1.5rem);
	border: none;
	border-radius: var(--radius-full, 9999px);
	background: transparent;
	color: var(--color-muted, #6B7280);
	font-family: var(--font-sans, inherit);
	font-size: var(--text-sm, 0.875rem);
	font-weight: var(--weight-medium, 500);
	transition: background var(--duration-fast, 150ms), color var(--duration-fast, 150ms);
	line-height: var(--leading-normal, 1.6);
	outline: none;
	box-shadow: none;
}

.entel-tab-nav button.nav-tab:hover {
	color: var(--color-text, #303030);
}

.entel-tab-nav button.nav-tab.nav-tab-active {
	background: var(--color-accent, #57A7B3);
	color: #fff;
}

/* --- Info Text Area --- */
.entel-info-text-area {
	margin: var(--space-4, 1rem) 0 var(--space-6, 1.5rem);
	padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
	background: var(--color-surface, #F7F8F9);
	border: 1px solid var(--color-border, #E6E8EA);
	border-radius: var(--radius-lg, 0.75rem);
	line-height: var(--leading-normal, 1.6);
	font-size: var(--text-sm, 0.875rem);
	color: var(--color-muted, #6B7280);
}

.entel-info-text-area p:last-child {
	margin-bottom: 0;
}

/* --- Tab Content --- */
.entel-tab-content {
	padding: var(--space-4, 1rem) 0;
}

/* --- Labels --- */
.entel-translation-ui-wrapper label {
	font-size: var(--text-sm, 0.875rem);
	font-weight: var(--weight-semibold, 600);
	color: var(--color-heading, #1D1D1D);
	display: block;
	margin-bottom: var(--space-2, 0.5rem);
}

/* --- Common Row Layouts --- */
.entel-language-row,
.entel-actions-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4, 1rem);
	margin-bottom: var(--space-4, 1rem);
}

.entel-language-row label {
	display: inline;
	margin-bottom: 0;
	margin-right: var(--space-2, 0.5rem);
}

.entel-language-row .entel-language-select {
	flex-grow: 1;
	min-width: 150px;
}

.entel-language-row select,
.entel-translation-ui-wrapper select {
	width: 100%;
	max-width: 300px;
	font-family: var(--font-sans, inherit);
	font-size: max(1rem, 16px);
	padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
	border: 1px solid var(--color-border, #E6E8EA);
	border-radius: var(--radius-md, 0.5rem);
	background: var(--color-bg, #fff);
	color: var(--color-text, #303030);
	transition: border-color var(--duration-fast, 150ms);
	appearance: auto;
}

.entel-translation-ui-wrapper select:focus {
	outline: none;
	border-color: var(--color-accent, #57A7B3);
	box-shadow: 0 0 0 3px rgba(87, 167, 179, 0.15);
}

.entel-swap-button-container {
	flex-shrink: 0;
}

/* --- Buttons: Inherit theme .btn system --- */

/* Primary action buttons (Translate Text, Translate Document) */
.entel-translation-ui-wrapper .button.button-primary,
.entel-file-manager-wrapper .button.button-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 0.5rem);
	padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
	font-family: var(--font-sans, inherit);
	font-size: var(--text-sm, 0.875rem);
	font-weight: var(--weight-semibold, 600);
	border: 2px solid transparent;
	border-radius: var(--radius-lg, 0.75rem);
	background: var(--gradient-primary, linear-gradient(135deg, #194153, #57A7B3));
	color: #fff;
	cursor: pointer;
	transition: opacity var(--duration-fast, 150ms), transform var(--duration-fast, 150ms), box-shadow var(--duration-fast, 150ms);
	text-decoration: none;
	line-height: var(--leading-normal, 1.6);
}

.entel-translation-ui-wrapper .button.button-primary:hover,
.entel-file-manager-wrapper .button.button-primary:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.1));
	color: #fff;
}

.entel-translation-ui-wrapper .button.button-primary:disabled,
.entel-file-manager-wrapper .button.button-primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Secondary buttons (Swap, Copy, Download, etc.) */
.entel-translation-ui-wrapper .button.button-secondary,
.entel-file-manager-wrapper .button.button-secondary,
.entel-file-manager-wrapper .button.button-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
	font-family: var(--font-sans, inherit);
	font-size: var(--text-sm, 0.875rem);
	font-weight: var(--weight-medium, 500);
	border: 2px solid var(--color-border, #E6E8EA);
	border-radius: var(--radius-lg, 0.75rem);
	background: transparent;
	color: var(--color-text, #303030);
	cursor: pointer;
	transition: border-color var(--duration-fast, 150ms), color var(--duration-fast, 150ms), background var(--duration-fast, 150ms);
	text-decoration: none;
	line-height: 1;
}

.entel-translation-ui-wrapper .button.button-secondary:hover,
.entel-file-manager-wrapper .button.button-secondary:hover,
.entel-file-manager-wrapper .button.button-small:hover {
	border-color: var(--color-accent, #57A7B3);
	color: var(--color-accent, #57A7B3);
}

.entel-translation-ui-wrapper .button.button-secondary:disabled,
.entel-file-manager-wrapper .button.button-secondary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Delete button (destructive) */
.entel-file-manager-wrapper .button-link-delete {
	border-color: transparent;
	color: #EF4444;
	background: transparent;
}

.entel-file-manager-wrapper .button-link-delete:hover {
	border-color: #EF4444;
	color: #EF4444;
	background: rgba(239, 68, 68, 0.06);
}

.entel-actions-row {
	justify-content: space-between;
}

.entel-translate-button-container {
	flex-grow: 1;
	text-align: center;
}

.entel-translate-button-container .spinner {
	visibility: hidden;
	float: none;
	vertical-align: middle;
	margin-left: var(--space-2, 0.5rem);
}

.entel-glossary-container {
	flex-shrink: 0;
}

/* --- Text Tab: Source & Target Areas --- */
.entel-text-areas-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4, 1rem);
	margin-bottom: var(--space-4, 1rem);
}

.entel-source-text-area,
.entel-target-text-area {
	flex: 1;
	min-width: 250px;
}

.entel-source-text-area textarea,
.entel-target-text-area textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 180px;
	margin-top: var(--space-1, 0.25rem);
	font-family: var(--font-sans, inherit);
	font-size: max(1rem, 16px);
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
	border: 1px solid var(--color-border, #E6E8EA);
	border-radius: var(--radius-md, 0.5rem);
	background: var(--color-bg, #fff);
	color: var(--color-text, #303030);
	transition: border-color var(--duration-fast, 150ms);
	line-height: var(--leading-normal, 1.6);
	resize: vertical;
}

.entel-source-text-area textarea:focus,
.entel-target-text-area textarea:focus {
	outline: none;
	border-color: var(--color-accent, #57A7B3);
	box-shadow: 0 0 0 3px rgba(87, 167, 179, 0.15);
}

.entel-char-counter {
	font-size: var(--text-xs, 0.75rem);
	color: var(--color-muted, #6B7280);
	text-align: right;
	margin-top: var(--space-1, 0.25rem);
}

/* --- Target Text Controls (Spinner, Copy Button) --- */
.entel-target-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-2, 0.5rem);
	margin-top: var(--space-2, 0.5rem);
	min-height: 28px;
}

#entel-cel-spinner {
	visibility: hidden;
	float: none;
	vertical-align: middle;
}

.entel-copy-button {
	padding: var(--space-2, 0.5rem) var(--space-2, 0.5rem) !important;
	min-width: 30px !important;
	height: auto !important;
}

.entel-copy-button svg {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

.entel-copy-feedback {
	font-size: var(--text-xs, 0.75rem);
	margin-left: var(--space-1, 0.25rem);
}

/* --- Document Tab --- */
.entel-file-upload-row {
	margin-bottom: var(--space-4, 1rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 0.5rem);
}

.entel-file-upload-row input[type="file"] {
	max-width: 400px;
	font-family: var(--font-sans, inherit);
	font-size: var(--text-sm, 0.875rem);
	color: var(--color-text, #303030);
}

.entel-file-upload-row .description {
	font-size: var(--text-xs, 0.75rem);
	color: var(--color-muted, #6B7280);
}

/* --- Result / Status Areas --- */
.entel-result-area {
	margin-top: var(--space-4, 1rem);
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
	border: 1px solid transparent;
	border-radius: var(--radius-lg, 0.75rem);
	display: none;
	line-height: var(--leading-normal, 1.6);
	font-size: var(--text-sm, 0.875rem);
}

.entel-result-area.info {
	background-color: rgba(87, 167, 179, 0.08);
	border-color: rgba(87, 167, 179, 0.25);
	color: var(--color-primary, #194153);
}

.entel-result-area.success {
	background-color: rgba(34, 197, 94, 0.08);
	border-color: rgba(34, 197, 94, 0.25);
	color: #166534;
}

.entel-result-area.error {
	background-color: rgba(239, 68, 68, 0.06);
	border-color: rgba(239, 68, 68, 0.2);
	color: #EF4444;
}

.entel-result-area .entel-download-button {
	margin-left: var(--space-3, 0.75rem);
}

/* --- File Manager Table --- */
.entel-file-manager-wrapper {
	font-family: var(--font-sans, inherit);
	color: var(--color-text, inherit);
}

.entel-file-list-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--color-border, #E6E8EA);
	border-radius: var(--radius-xl, 1rem);
	overflow: hidden;
}

.entel-file-list-table thead th,
.entel-file-list-table tfoot th {
	background: var(--color-surface, #F7F8F9);
	color: var(--color-heading, #1D1D1D);
	font-size: var(--text-xs, 0.75rem);
	font-weight: var(--weight-semibold, 600);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
	border-bottom: 1px solid var(--color-border, #E6E8EA);
	text-align: left;
}

.entel-file-list-table tfoot th {
	border-bottom: none;
	border-top: 1px solid var(--color-border, #E6E8EA);
}

.entel-file-list-table tbody td {
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
	font-size: var(--text-sm, 0.875rem);
	color: var(--color-text, #303030);
	border-bottom: 1px solid var(--color-border, #E6E8EA);
	vertical-align: middle;
}

.entel-file-list-table tbody tr:last-child td {
	border-bottom: none;
}

.entel-file-list-table tbody tr:hover {
	background: rgba(87, 167, 179, 0.04);
}

/* File manager actions cell */
.entel-file-list-table td:last-child {
	display: flex;
	align-items: center;
	gap: var(--space-2, 0.5rem);
	flex-wrap: wrap;
}

/* File manager messages */
.entel-file-manager-messages {
	margin-top: var(--space-3, 0.75rem);
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
	border-radius: var(--radius-lg, 0.75rem);
	font-size: var(--text-sm, 0.875rem);
}

.entel-file-manager-messages.notice-success {
	background: rgba(34, 197, 94, 0.08);
	border: 1px solid rgba(34, 197, 94, 0.25);
	color: #166534;
}

.entel-file-manager-messages.notice-error {
	background: rgba(239, 68, 68, 0.06);
	border: 1px solid rgba(239, 68, 68, 0.2);
	color: #EF4444;
}

.entel-file-manager-messages.notice-info {
	background: rgba(87, 167, 179, 0.08);
	border: 1px solid rgba(87, 167, 179, 0.25);
	color: var(--color-primary, #194153);
}

/* --- Spinner override --- */
.entel-translation-ui-wrapper .spinner,
.entel-file-manager-wrapper .spinner {
	float: none;
	vertical-align: middle;
}

/* --- Dark Mode Support --- */
[data-theme="dark"] .entel-result-area.info {
	background-color: rgba(87, 167, 179, 0.12);
	border-color: rgba(87, 167, 179, 0.3);
	color: var(--color-accent, #47A5AE);
}

[data-theme="dark"] .entel-result-area.success {
	background-color: rgba(34, 197, 94, 0.1);
	border-color: rgba(34, 197, 94, 0.25);
	color: #4ADE80;
}

[data-theme="dark"] .entel-result-area.error {
	background-color: rgba(239, 68, 68, 0.1);
	border-color: rgba(239, 68, 68, 0.25);
	color: #F87171;
}

[data-theme="dark"] .entel-file-list-table tbody tr:hover {
	background: rgba(87, 167, 179, 0.08);
}

[data-theme="dark"] .entel-file-manager-messages.notice-success {
	background: rgba(34, 197, 94, 0.1);
	color: #4ADE80;
}

[data-theme="dark"] .entel-file-manager-messages.notice-error {
	background: rgba(239, 68, 68, 0.1);
	color: #F87171;
}

[data-theme="dark"] .entel-file-manager-messages.notice-info {
	background: rgba(87, 167, 179, 0.12);
	color: var(--color-accent, #47A5AE);
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.entel-text-areas-row {
		flex-direction: column;
	}

	.entel-language-row {
		gap: var(--space-3, 0.75rem);
	}

	.entel-language-row select {
		max-width: none;
	}

	.entel-actions-row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3, 0.75rem);
	}

	.entel-translate-button-container {
		text-align: center;
	}

	.entel-glossary-container {
		text-align: center;
	}

	.entel-target-controls {
		justify-content: flex-start;
	}

	.entel-tab-nav {
		width: 100%;
	}

	.entel-tab-nav button.nav-tab {
		flex: 1;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.entel-translation-ui-wrapper .button.button-primary {
		width: 100%;
	}
}