@font-face {
  font-family: 'outfit';
  src: url('assets/fonts/Outfit.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ==== Base styles ==== */
:root {
    font-family: outfit;
    --bg: #FFFCF8;
    --card-bg: #F6F8F7;
    --accent: #D8FFED;
    --accent-strong: #83E5C8;
    --white: #FFFFFF;
    --black: #000000;
    --text-deemph: #878787;
    --danger: #E7A2A2;
    --neutral: #E7E7E7;

    --h1-size: 2rem;
    --h2-size: 1.5rem;
    --h3-size: 1.25rem; 
    --p-size: 1rem;

    --pad-sm: 4px;
    --pad-md: 8px;
    --pad-lg: 24px;
    --pad-xl: 56px;

    --gap-sm: 4px;
    --gap-md: 8px;
    --gap-lg: 16px;
    --gap-xl: 24px;

    --border-md: 24px;
    --border-lg: 48px;

    /* https://smoothshadows.com/#djEsMSwzLDAuMDcsMTIsOCw4LCMwMzA3MTIsI2YzZjRmNiwjZmZmZmZmLDI%3D */
    --soft-shadow: 1px 1px 1px rgba(3, 7, 18, 0.02), 4px 4px 5px rgba(3, 7, 18, 0.05), 6px 6px 10px rgba(3, 7, 18, 0.07);

}

.main {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--pad-lg);
    background-color: var(--bg);
    gap: var(--gap-xl);
}
.title { 
    width: 100%;
    text-align: center;
 }


/* ==== Upload files section ==== */
.section {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    border-radius: var(--border-lg);
    background-color: var(--card-bg);
    box-shadow: var(--soft-shadow);
    padding: var(--pad-xl);
}
.upload-button {
    width: 100%;
    box-sizing: border-box;

    background-color: var(--accent);
    border-radius: 48px;

    box-shadow: var(--soft-shadow);

    &:hover {
        cursor: pointer;
    }

    p {
        margin: 0px;
    }
}
.upload-file {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-md);
    padding: var(--pad-md) var(--pad-lg);
    width: 100%;
    &:hover { 
        cursor: pointer; 
    }
}
.upload-files-header {
    display: flex;
    gap: 8px;
}

/* display uploaded files */
.files { 
    display: flex; 
    flex-direction: column; 
    gap: var(--gap-md); 
}

.file-card {
    display: grid;
    grid-template-columns: 150px auto 1fr auto;
    grid-template-areas: "filename" "sample" "tags" "delete";
    grid-template-rows: 1fr;
    grid-gap: 0px var(--gap-md);

    padding: 16px 24px;
    border-radius: 24px;
    box-sizing: border-box;

    background-color: #fff;
    color: #000;
}
.file-name {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
}
.file-sample {
    grid-area: "sample";
    justify-self: start;
    align-self: center;
    color: var(--text-deemph);
}
.file-tags {
    display: flex;
    justify-self: end;
    gap: var(--gap-md);
}
.file-name img:hover, .file-delete:hover, .submit-button:hover {
    cursor: pointer;
}
.tag {
    background-color: var(--accent);
    border-radius: var(--border-md);
    padding: var(--pad-sm) var(--pad-md);
}
.submit-section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: var(--pad-lg);
}
.submit-button {
    all: unset;
    width: fit-content;
    padding: var(--pad-md) var(--pad-lg);
    background-color: var(--accent-strong);
    border-radius: var(--border-lg);
    box-shadow: var(--soft-shadow);
}

/* Visualisations section */
.text-deemph {
    color: var(--text-deemph);
}
.col-group {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}
.row-group {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}

h1, h2, p {
    margin: 0px;
}

/* popups */
.overlay {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 2;
    top: 0;
    left: 0;
    place-items: center;
}
.popup {
    background-color: var(--card-bg);
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--pad-lg);
    border-radius: var(--border-md);
}
.popup-select {
    display: flex;
    flex-direction: column;

}
.radio-option {
    border-radius: var(--border-lg);
    flex: 1;
}
/* hide the radio button circle */
.radio-option input {
    display: none;
}
.radio-option label {
    display: block;
    width: 100%;
    cursor: pointer;
    text-align: center; 
    padding: var(--pad-sm) var(--pad-md); 
    border-radius: var(--border-md);
    box-sizing: border-box;
}
/* highlight on click */
.radio-option label:has(input[type="radio"]:checked) {
    background-color: var(--accent-strong);
    /* border-radius: var(--border-md);
    padding: var(--pad-sm) var(--pad-md); */
}

/* options div */
.options-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}
/* options group inner */
.options {
    padding: var(--pad-md);
    max-width: 100%;
    box-shadow: var(--soft-shadow);
    background-color: var(--white);
    border-radius: var(--border-lg);
    display: flex;
    justify-content: space-between;
    gap: var(--gap-md);
    flex-grow: 1;
}

.popup-actions {
    width: 100%;
    display: flex;
    justify-content: end;
    gap: var(--gap-md);
}

.submit, .cancel {
    all: unset;
    padding: var(--pad-md) var(--pad-lg);
    background-color: var(--accent-strong);
    border-radius: 48px;
    box-shadow: var(--soft-shadow);
    &:hover {
        cursor: pointer;
    }
}

.cancel {
    background-color: var(--neutral);
}

.active { display: grid !important }

.loader {
  border: 8px solid #e0e0e0;
  border-top: 8px solid rgb(145, 158, 205);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}