/*
    Name: Kyle Purcell
    Student Number: C00301808
    Date: 24/03/2025
    Description: A CSS file that styles the Add Customer, Delete Customer, Amend/View a Customer and Lodgements screens
*/

* {
    margin: 0; /*Removes the default margin for all elements*/
    padding: 0; /*Removes the default padding for all elements*/
    box-sizing: border-box; /*Ensures that padding and border width/length are not included in element width/height*/
}

#add-customer-form,
#delete-customer-form,
#amend-view-customer-form,
#lodgements-form {
    background-color: #faf4ff;
    border: 2px solid purple;
    padding: 2rem;
    display: grid;
    gap: 1.6rem;
    margin: 2rem 0;
    border-radius: 20px;
    min-width: 80%;
}

#add-customer-form {
    gap: 0.4rem!important; /*Sets the CSS specificity to the highest so that the style rules will always be applied*/
}

label {
    font-family: lato;
    font-size: 1.4rem;
    flex: 1;
}

form p:not(.address-section, .amend-view-button-container, .form-buttons) {
    display: flex; /*Flex container that can expand and grow*/
    align-items: center; /*Centers elements within the flex container along the y-axis*/
    justify-content: space-between; /*Sets elements within the flex container to have an even space between them along the x-axis*/
}

input:not(#submit, #reset, #submitBtn),
#select-customer,
#confirm-button,
#account-dropdown,
#account-type {
    font-size: 1rem;
    padding: 0.6rem 1rem; 
    border: 2px solid purple;
    border-radius: 6px; /*Rounds the border to make it appear more curved*/
    background-color: #fffcff;
    min-width: 50%;
}

#select-customer,
#account-dropdown,
#account-type {
    padding-right: 1rem;
    min-width: 50%;
}

.address-heading {
    font-size: 1.4rem;
    padding: 0.5rem 0rem;
}

.form-buttons {
    display: flex;
    align-items: center;
    justify-content: space-evenly; /*Evenly distributes the space between each element and the edge of the flex container along the x-axis*/
    margin-top: 1rem;
}

.form-buttons>input {
    font-size: 1.2rem;
    background-color: #fffcff;
    border: 2px solid #56007a;
    border-radius: 8px;
    padding: 0.6rem 3rem;
    box-shadow: 0px 1px 0px #56007a; /*Adds a shadow underneath the element*/
}

.form-buttons>input:hover,
#amend-view-button:hover,
#return-button:hover,
.close-window button:hover {
    cursor: pointer; /*Styles the cursor to be a pointer for clicking on elements*/
    opacity: 0.8; /*Reduces the tone and visibility of the element*/
    background-color: #774491!important;
    color: white;
    border: 2px solid #56007a!important;
}

.form-buttons>input:active,
#amend-view-button:active,
#return-button:active,
.close-window button:active {
    transform: translateY(5px); /*Places the element across its y-axis by 5px when it is active*/
    box-shadow: 0px 0px 0px; /*Removes the box shadow when element is active*/
}

main {
    display: flex;
    flex-direction: column; /*Sets direction from default row (horizontal) to column (vertical)*/
    align-items: center; /*Centers flex items along the flex container's y-axis*/
    justify-content: center; /*Centers flex items along the flex container's x-axis*/
}

.customer-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.amend-view-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

#amend-view-button {
    margin-top: 1rem;
}

.result-container {
    position: absolute; /*Positions the element relative to the nearest parent element and removes it from the normal document flow*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem; /*Sets a gap between flex items of 3rem*/
    background-color: #fffcff;
    border: 2px solid purple;
    border-radius: 16px;
    padding: 4rem 0rem;
}

.result-container form {
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-container > h2,
.result-container > form > input {
    font-size: 1.4rem!important;
    padding: 3rem 6rem;
    color: #2c004d;
}

.close-window {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-window button:hover {
    cursor: pointer;
}

.close-window svg {
    width: 40px;
    height: 40px;
    fill: white; /*Fill property is used to style the background colour of an SVG element*/
}

.close-window button {
    border: 2px solid black;
    border-radius: 8px;
    background-color: #2c004d;
}

.disabled {
    opacity: 0.4;
    pointer-events: none; /*Disables all cursor activity over an element, disabling clicking on the element*/
}