@use "common";  // Reset styles
@use "colors" as *; // Color scheme 
@use "vars" as *;

body {
    font-family: 'Arial', sans-serif;
    background: $add-user-background-color; 
    display: flex;
    justify-content: center; // Center the form horizontally
    align-items: center; // Center the form vertically
    height: 100%;
    padding: 20px; // Some padding for mobile responsiveness

	.search-page {
        background-color: $add-user-form-background; 
        padding: 40px;
        border-radius: 12px; // Rounded corners 
        box-shadow: 0 8px 15px $add-user-form-shadow-color;
        width: 100%;
        max-width: 800px; 
		margin: 0 auto;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 20px;

		.search-bar {
			display: flex;
			gap: 10px;
			padding: 20px 20px 10px 20px;
			border-radius: 12px 12px 0 0; // Rounded corners 
			justify-content: space-between;
			align-items: center;
			background-color: #c4c4c4;
			height: 75px;

			input[type="text"],
			select {
				flex: 1;
				height: 45px;
				padding: 10px;
				background-color: $search-page-search-field-background;
				border: 1px solid $search-page-search-field-border-color;
				border-radius: $input-field-border-radius;
				font-size: 16px;

				&:hover {
					border-color: $search-page-search-field-hover-border-color;
				}

				&:focus {
					border-color: $search-page-search-field-focus-border-color;
				}
			}

			select {
				max-width: 25%;
			}

			button[type="submit"] {
				padding: 10px 20px;
				font-size: 16px;
				height: 45px;
				background-color: $search-page-search-button-color;
				color: $search-page-search-button-text-color;
				border: none;
				border-radius: 4px;
				cursor: pointer;

				&:hover {
					background-color: $search-page-search-button-hover-color;
					color: $search-page-search-button-hover-text-color;
					border-color: $search-page-search-button-hover-border-color;
				}
				&:active {
					background-color: $search-page-search-button-active-color;
					color: $search-page-search-button-active-text-color;
					border-color: $search-page-search-button-active-border-color;
				}
			}
		}

		.search-results {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding: 20px;
			min-height: 800px;
		
			.search-result {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				padding: 12px 10px;
				border-radius: $input-field-border-radius;
				transition: background-color 0.3s;
				background-color: $search-res-item-color;

		
				.details {
					display: flex;
					flex-direction: column;
					gap: 4px;
		
					.primary-key {
						font-size: 16px;
						margin-bottom: 3px;
						color: $search-res-item-detail-primary-key-color;
					}
		
					.info-row {
						display: flex;
						gap: 10px;
		
						* {
							font-size: 16px;
							color: $search-res-item-detail-info-row-color;
						}
					}
				}
						
				&:hover {
					background-color: $search-res-item-hover-color;
					cursor: pointer;

					.details {
						.primary-key {
							font-weight: bold;
						}
						.info-row {
							* {
								color: #424242;
							}
						}
					}
				}
		
				.actions {
					display: flex;
					gap: 8px;
					align-self: flex-start;
					visibility: hidden;
		
					button {
						padding: 6px 12px;
						font-size: 12px;
						border: none;
						border-radius: 4px;
						cursor: pointer;
		
						&.edit {
							background-color: $search-res-edit-item-button-color;
							color: $search-res-edit-item-button-text-color;
		
							&:hover {
								background-color: $search-res-edit-item-button-hover-color;
							}
						}
		
						&.delete {
							background-color: $search-res-delete-item-button-color;
							color: $search-res-delete-item-button-text-color;
		
							&:hover {
								background-color: $search-res-delete-item-button-hover-color;
							}
						}

						&:hover {
							color: $search-res-item-action-button-hover-text-color;
						}
					}
				}
		
				&:hover .actions {
					visibility: visible;
				}
			}
		}
	}
}