no-copy-admin-panel-frontend/src/app/styles/tariff-edit-modal.scss

@use './variable.scss' as v;

.tariff-edit-modal {
	padding: 1.5rem;
	min-width: 500px;
	max-width: 600px;
	max-height: 80vh;
	overflow-y: auto;

	&__title {
		font-size: 1.5rem;
		font-weight: bold;
		margin-bottom: 1.5rem;
		color: #111827;
	}

	&__content {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	&__info-section {
		border-bottom: 1px solid #e5e7eb;
		padding-bottom: 0.75rem;

		&:last-of-type {
			border-bottom: none;
		}
	}

	&__label {
		display: block;
		font-size: 0.875rem;
		font-weight: 500;
		color: #374151;
		margin-bottom: 0.5rem;
	}

	&__value {
		color: #111827;
		word-break: break-word;
		font-size: 0.875rem;
	}

	&__input {
		width: 100%;
		padding: 0.5rem;
		border: 1px solid #e5e7eb;
		border-radius: 0.25rem;
		font-size: 0.875rem;
		font-family: inherit;
		color: #111827;
		background-color: #ffffff;
		transition: all 0.2s;

		&:focus {
			outline: none;
			border-color: #3b82f6;
			box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
		}

		&::placeholder {
			color: #9ca3af;
		}

		&:disabled {
			background-color: #f3f4f6;
			cursor: not-allowed;
		}

		&[type="number"] {
			-moz-appearance: textfield;

			&::-webkit-inner-spin-button,
			&::-webkit-outer-spin-button {
				display: none;
			}
		}
	}

	&__textarea {
		width: 100%;
		padding: 0.5rem;
		border: 1px solid #e5e7eb;
		border-radius: 0.25rem;
		font-size: 0.875rem;
		font-family: inherit;
		color: #111827;
		background-color: #ffffff;
		resize: vertical;
		transition: all 0.2s;

		&:focus {
			outline: none;
			border-color: #3b82f6;
			box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
		}

		&::placeholder {
			color: #9ca3af;
		}

		&:disabled {
			background-color: #f3f4f6;
			cursor: not-allowed;
		}
	}

	&__actions {
		display: flex;
		justify-content: flex-end;
		gap: 0.75rem;
	}

	// Стили для DropDownList внутри модального окна
	.dropdown {
		width: 100%;
	}
}

// Адаптация для мобильных устройств
@media (max-width: 768px) {
	.tariff-edit-modal {
		min-width: 90vw;
		padding: 1rem;

		&__title {
			font-size: 1.25rem;
			margin-bottom: 1rem;
		}

		&__info-section {
			padding-bottom: 0.5rem;
		}

		&__actions {
			flex-direction: column-reverse;

			button {
				width: 100%;
			}
		}
	}
}

// Стили для скроллбара (опционально)
.tariff-edit-modal {
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 #f1f5f9;

	&::-webkit-scrollbar {
		width: 6px;
	}

	&::-webkit-scrollbar-track {
		background: #f1f5f9;
		border-radius: 3px;
	}

	&::-webkit-scrollbar-thumb {
		background: #cbd5e1;
		border-radius: 3px;

		&:hover {
			background: #94a3b8;
		}
	}
}

.tariff-edit-modal__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;

	@media (max-width: 768px) {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

.tariff-edit-modal__info-section--half {
	@extend .tariff-edit-modal__info-section;

	@media (min-width: 769px) {
		&:first-child {
			padding-right: 0.5rem;
		}

		&:last-child {
			padding-left: 0.5rem;
		}
	}
}