/* -------------------------------------------------------------------------- */
/*                                 CUSTOM FONT                                */
/* -------------------------------------------------------------------------- */
@font-face {
font-family: 'helvetica_neuethin';
src: url('../../fonts/helveticaneuethin-webfont.woff2') format('woff2'),
    url('../../fonts/helveticaneuethin-webfont.woff') format('woff');
font-weight: 100;
font-style: normal;
}

@font-face {
font-family: 'helvetica_neuelight';
src: url('../../fonts/helveticaneuelight-webfont.woff2') format('woff2'),
    url('../../fonts/helveticaneuelight-webfont.woff') format('woff');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'helvetica_neueregular';
src: url('../../fonts/helveticaneueroman-webfont.woff2') format('woff2'),
    url('../../fonts/helveticaneueroman-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;

}

@font-face {
    font-family: 'helvetica_neuemedium';
    src: url('../../fonts/helveticaneuemedium-webfont.woff2') format('woff2'),
    url('../../fonts/helveticaneuemedium-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'helvetica_neuebold';
src: url('../../fonts/helveticaneuebold-webfont.woff2') format('woff2'),
    url('../../fonts/helveticaneuebold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}

/* -------------------------------------------------------------------------- */
/*                              CUSTOM PROPERTIES                             */
/* -------------------------------------------------------------------------- */
:root {

/* Colors */
--primary-color: 271 48% 35%;
--primary-color-tint: 276 35% 44%;
--primary-color-shade: 272 73% 14%;
--secondary-color: 221 36% 21%;
--gray-color: 193 9% 81%;
--text-color: 221 20% 31%;
--white-color: 0 0% 100%;
--black-color: 0 0% 0%;

/* Font Familiy */
--heading-font: 'helvetica_neueregular', sans-serif;
;
--body-font: 'helvetica_neueregular', sans-serif;

/* Font Weights */
--fw-thin: 100;
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700;

}

/* -------------------------------------------------------------------------- */
/*                                    RESET                                   */
/* -------------------------------------------------------------------------- */

/* https://piccalil.li/blog/a-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}

/* Remove default margin */
* {
font-style: inherit;
margin: 0;
padding: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}

ul,
ol {
margin: 0;
padding: 0;
list-style-type: none;
}

/* Set core root defaults */
html,
html:focus-within,
body {
height: 100%;
scroll-behavior: smooth;
}

/* Set core body defaults */
body {
color: hsl(var(--text-color));
font-family: var(--body-font);
text-rendering: optimizeSpeed;
line-height: 1.5;
}

main {
position: relative;
}

section {
padding-block: 4.375rem;
position: relative;
height: 100%;
}

@media screen and (min-width: 992px) {
section {
    padding-block: 7.5rem;
}
}

/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
    scroll-behavior: auto;
}

*,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}
}

/* -------------------------------------------------------------------------- */
/*                               UTILITY CLASSESS                             */
/* -------------------------------------------------------------------------- */

/* General */

.flex {
display: flex;
gap: var(--gap, 1rem);
}

.direction-column {
flex-direction: column;
}

.grid {
display: grid;
gap: var(--gap, 1rem);
}

.flow>*:where(:not(:first-child)) {
margin-top: var(--flow-gap, 1rem);
}

.container {
padding-inline: 1.25em;
margin-inline: auto;
max-width: min(100% - 2rem, 96rem);
}

.section__title-wrapper {
display: flex;
flex-direction: column;
gap: 1.25rem;
}

.section__title-wrapper.row {
align-items: center;
}

@media screen and (min-width: 992px) {
.section__title-wrapper.column {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
}

.section__title-wrapper .section__title-content.bold {
font-family: 'helvetica_neuebold';
font-size: 1.375rem;
line-height: 1;
max-width: 37.5rem;
}

.section__title {
color: hsl(var(--secondary-color));
font-family: var(--heading-font);
font-size: clamp(2.375rem, 2.2136rem + 0.7595vw, 3.125rem);
font-weight: var(--fw-bold);
line-height: 1;
}

.section__title--xl {
font-size: clamp(2.625rem, 2.356rem + 1.2658vw, 3.875rem);
line-height: 1.2;
}

.section__title--xl img {
display: inline;
vertical-align: middle;
width: 3.125rem;
height: auto;
margin-inline: 8px;
}

.section__title > span {
background: linear-gradient(90deg, hsl(var(--primary-color)) 0%, hsl(var(--primary-color-tint)) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}

.btn {
background-image: linear-gradient(90deg, hsl(var(--primary-color)) 0%, hsl(var(--primary-color-tint)) 100%);
color: hsl(var(--white-color));
font-size: 0.875rem;
padding: 0.625em 1.25em;
min-width: 5rem;
text-align: center;
text-decoration: none;
display: inline-flex;
align-items: center;
border: none;
border-radius: 0.375rem;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}

.btn svg {
    margin-right: 0.5rem;
    height: 1.25rem;
    width: 1.25rem;
}

.btn:hover,
.btn:focus {
background-image: linear-gradient(90deg, hsl(var(--primary-color-tint)) 0%, hsl(var(--primary-color)) 100%);
color: hsl(var(--white-color));
transition: background-image 0.3s ease, color 0.3s ease;
}

.btn-outline {
    background-color: hsl(var(--white-color));
    background-image: none;
    color: hsl(var(--primary-color));
    border: 1px solid hsl(var(--primary-color));
    box-shadow: 0 1px 2px hsl(var(--primary-color-shade) / 0.05);
}

.btn-outline:hover {
    background-color: hsl(var(--primary-color));
    background-image: none;
}

.btn-arrow {
display: inline-flex;
align-items: center;
column-gap: 0.5rem;
position: relative;
width: max-content;
text-decoration: none;
transition: 0.3s ease-out;
}

.btn-arrow::after {
position: absolute;
content: "";
width: 0;
left: 0;
bottom: -3px;
background: hsl(var(--primary-color));
height: 2px;
transition: 0.3s ease-out;
}

.btn-arrow span {
color: hsl(var(--secondary-color));
font-family: 'helvetica_neuebold';
font-size: 1.125rem;
font-weight: var(--fw-bold);
}

.btn-arrow svg {
transition: transform 0.3s ease-out;
}

.btn-arrow svg g {
fill: hsl(var(--secondary-color));
}

.btn-arrow:is(:hover, :focus) span {
color: hsl(var(--primary-color));
}

.btn-arrow:is(:hover, :focus)::after {
width: 100%;
}

.btn-arrow:is(:hover, :focus) svg {
transform: translateX(0.5rem);
}

.btn-arrow:is(:hover, :focus) svg g {
fill: hsl(var(--primary-color));
}

.text-center {
text-align: center;
}

.noise-background {
background-image: url('../../images/grain-bg.png');
background-repeat: repeat;
}

/* Colors */
/* Background Colors */
.bg-primary { background-color: hsl(var(--primary-color)); }
.bg-primary-tint { background-color: hsl(var(--primary-color-tint)); }
.bg-primary-shade { background-color: hsl(var(--primary-color-shade)); }
.bg-secondary { background-color: hsl(var(--secondary-color)); }
.bg-gray { background-color: hsl(var(--gray-color)); }
.bg-text { background-color: hsl(var(--text-color)); }
.bg-white { background-color: hsl(var(--white-color)); }
.bg-black { background-color: hsl(var(--black-color)); }

/* Text Colors */
.text-primary { color: hsl(var(--primary-color)); }
.text-primary-tint { color: hsl(var(--primary-color-tint)); }
.text-primary-shade { color: hsl(var(--primary-color-shade)); }
.text-secondary { color: hsl(var(--secondary-color)); }
.text-gray { color: hsl(var(--gray-color)); }
.text-text { color: hsl(var(--text-color)); }
.text-white { color: hsl(var(--white-color)); }
.text-black { color: hsl(var(--black-color)); }

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* -------------------------------------------------------------------------- */
/*                                 COMPONENTS                                 */
/* -------------------------------------------------------------------------- */

/* ---------------------------------- Login --------------------------------- */

.login__wrapper {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media screen and (min-width: 992px) {
    .login__wrapper {
        height: 100vh;
    }
}

.login__wrapper > img {
    margin-block-end: 1.875rem;
    width: 12.5rem;
}

.form {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    background-color: hsl(var(--white-color));
    padding: 1.875rem;
    width: 28.125rem;
    border-radius: 20px;
    max-width: min(100% - 2rem, 28.125rem);
}

.form button {
    align-self: flex-end;
}

.flex-column>label {
    font-family: 'helvetica_neuebold';
}

.form__input {
    border: 1.5px solid hsl(var(--gray-color));
    border-radius: .625rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
    margin-block-end: 1.25rem;
    padding-left: .625rem;
    position: relative;
    transition: 0.2s ease-in-out;
}

.input {
    background-color: transparent;
    border-radius: .625rem;
    border: none;
    margin-left: .625rem;
    width: 100%;
    height: 100%;
}

.input:focus {
    outline: none;
}

.form__input:focus-within {
    border: 1.5px solid hsl(var(--primary-color));
}

.form__input .error {
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 100%;
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    min-height: 1.25rem;
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .625rem;
    justify-content: space-between;
}

.span {
    font-size: .875rem;
    color: hsl(var(--primary-color));
    font-weight: 500;
    cursor: pointer;
    margin-inline-start: auto;
    transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1);
}

.span:is(:hover, :focus) {
    color: hsl(var(--primary-color-shade));
}

.button-submit {
    margin: 1.25rem 0 .625rem 0;
    background-color: hsl(var(--primary-color));
    border: none;
    color: hsl(var(--white-color));
    font-size: .9375rem;
    font-weight: 500;
    border-radius: .625rem;
    height: 3.125rem;
    width: 100%;
    cursor: pointer;
    transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1);
}

.button-submit:is(:hover, :focus) {
    background-color: hsl(var(--primary-color-shade));
}

.p {
    text-align: center;
    font-size: .875rem;
    margin: .3125rem 0;
}

/* -------------------------------- Dashboard ------------------------------- */

/* Layout */
.dashboard {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: hsl(var(--gray-color) / .1);
}

/* Header styles */
.header {
    background-color: hsl(var(--white-color));
    box-shadow: 0 1px 2px hsl(var(--primary-color-shade) / 0.05);
}

.header-container {
    max-width: 80rem;
    margin-inline: auto;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-info svg {
    color: hsl(var(--primary-color));
    height: 1.875rem;
    width: 1.875rem;
}

.user-details h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: hsl(var(--secondary-color));
    margin: 0;
}

.user-details p {
    font-size: 0.875rem;
    margin: 0;
}

/* Main content */
.main-content {
    max-width: 80rem;
    margin: 2rem auto;
    padding: 0 1rem;
    width: 100%;
}

.files-container {
    background-color: hsl(var(--white-color));
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px hsl(var(--primary-color-shade) / 0.05);
}

.files-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid hsl(var(--gray-color) / 0.3);
}

.files-header h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: hsl(var(--secondary-color));
    margin: 0;
}

.files-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.file-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid hsl(var(--gray-color) / 0.3);
    transition: background-color 0.2s;
}

.file-item:last-child {
    border-bottom: none;
}

.file-item:hover {
    background-color: hsl(var(--gray-color) / 0.1);
}

.file-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.file-info svg {
    color: hsl(var(--primary-color));
}

.file-details p {
    margin: 0;
}

.file-name {
    font-family: 'helvetica_neuemedium';
    font-size: 0.875rem;
    color: hsl(var(--primary-color));
}

.file-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ---------------------------------- Foter --------------------------------- */

.footer {
    background-color: white;
    border-top: 1px solid var(--color-gray-200);
    padding: 1.5rem 0;
    margin-top: auto;
}

.footer-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

@media screen and (min-width: 992px) {
    .footer-container {
        flex-direction: row;
    }
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-primary);
}

.footer-logo img {
    width: 11.25rem;
}

.footer-text {
    color: var(--color-gray-500);
    font-size: 0.875rem;
}