/* Set variables and color pallete */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --primary-color: #255fa1;
    --secondary-color: #90caf9;
    --background-color: #F5F7FA;
    --on-progrss: rgb(255, 253, 128);
    --green: rgb(156, 240, 156);
    --text-color: #333333;
    --accent-color: #D0021B;
    --accent-color-secondary: #f1929d;
    --box-shadow-default:  0px 0px 10px 5px rgba(0, 0, 0, 0.1);
}

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
box-sizing: border-box;
/* Set Font */
font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: var(--text-color);
transition: all 0.3s ease-in-out;
}

/* 2. Remove default margin */
* {
margin: 0;
}

body {
/* 3. Add accessible line-height */
line-height: 1.5;
/* 4. Improve text rendering */
-webkit-font-smoothing: antialiased;
/* set background */
background-color: var(--background-color);
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}

/*
9. Create a root stacking context
*/
#root, #__next {
isolation: isolate;
}

/* Container */
#container{
    display: grid;
    grid-template-rows: auto 3fr auto;
    height: 100vh;
}

/* Section */
header{
    grid-row: 1 / 2;
}

main{
    grid-row: 2 / 3;
}

footer{
    grid-row: 3 / -1;
}

/* set size */
img[src$=".svg"]{
    height: 30px;
}

/* Set Button and Navbar*/
button label{
    display: flex;
    align-items: center;
    gap: 5px;   
    padding: 5px 10px; 
}

ul{
    padding: 0;
    display: flex;    
    align-items: center;
    list-style: none;
    gap: 5px;    
}

button{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    font-weight: 700;
    outline: none;
    border: none;        
    border-radius: 5px;
    cursor: pointer;
    background-color: var(--primary-color);    
}

button:hover{
    background-color: var(--secondary-color);
    box-shadow: var(--box-shadow-default);
    transform: scale(0.9) translateY(-5px);
}

button:hover span, nav button:hover img{
    filter: none;
    color: var(--text-color);
}

button span{
    color: var(--background-color);
}

button img{
    filter: invert();
}

.red-btn{
    background-color: var(--accent-color);
}

.red-btn:hover{
    background-color: var(--accent-color-secondary);    
}

/* header */
header{
    /* position: fixed;
    right: 0;
    left: 0; */
    gap: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-shadow: var(--box-shadow-default);
    background-color: white;
    z-index: 100;
}

#header-logo{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: 0.7rem;
    gap: 15px;
}

/* main */
main{
    background-color: var(--background-color);
    height: 100%;
    overflow-y: scroll;
    padding: 20px 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));        
    /* display: flex;
    flex-wrap: wrap; */
    align-content: flex-start;
    /* justify-items: flex-start; */
    gap: 20px;    
}


/* Card */
.card-list{
    display: flex;           
    flex-direction: column;
    justify-content: center;
    padding: 25px;
    background-color: white;
    box-shadow: var(--box-shadow-default);
    border-radius: 10px;
    /* width: 350px; */
    height: 280px;
    gap: 5px;
    border-left: 5px solid var(--primary-color);
}

.card-list > [class*="card"]{
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    font-size: 1.3rem;    
}

.card-list b{
    font-weight: 500;
    font-style: italic;
}

.card-list span{
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}


/* Dialog / Modal / Add Book Container */
#add-book-container{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3333333f;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;    
}

form{
    display: inline-block;
    background-color: var(--background-color);
    padding: 5px solid red;
    width: 400px;
    padding: 15px;
    border-radius: 15px;
    margin: 15px;
    box-shadow: var(--box-shadow-default);
}

form h1{
    text-align: center;
    padding-bottom: 15px;
}

.input-box{    
    display: grid;
    grid-template-columns: 1fr;    
    margin: 10px 0px;
}

.input-box label{
    font-weight: 500;
    font-style: italic;
}

.modal-btns{
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#reset-btn{
    background-color: #6e6e6ed8;
}

#reset-btn:hover{
    background-color: var(--background-color);
}

.in-progress-page{
    transform: scaleY(0);
    opacity: 0;
    transform-origin: bottom;
    position: absolute;
    transition: all 0.0s ease-in-out;
}

#book-status:has(option[value="In Progress"]:checked) ~ .in-progress-page{
    transition: all 0.3s ease-in-out;
    opacity: 1;
    position: relative;
    transform: scale(1); 
}

#status-box{
    gap: 5px;
}

#book-status{
    width: 100%;
    padding: 5px;
}
select, option{
    cursor: pointer;
}

option[value="Not Read"]{
    background-color: var(--accent-color-secondary);    
}

option[value="In Progress"]{
    background-color: var(--on-progrss);    
}

option[value="Finished"]{
    background-color: var(--green);    
}

.invalid-input{
    border: 2px solid var(--accent-color);
    border-radius: 5px;
}

.required{
    color: var(--accent-color);
}

/* Toggle Button */
input[name^="toggle"]{
    position: absolute;
    appearance: none;
}

#close-modal:checked ~ #add-book-container{
    transform: scale(0);
}

#open-modal:checked ~ #add-book-container{
    transform: scale(1);
}

button *{
    cursor: pointer;
}

.modal-btns{
    display: flex;
    gap: 5px;
    margin: 5px;
}

/* footer */
footer{
    /* position: fixed;
    right: 0;
    left: 0;
    bottom: 0; */
    padding: 5px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    /* box-shadow: var(--box-shadow-default) inset; */
}

a[href*="About-Me"]:hover + p, a[href*="About-Me"]:hover{
    transform: scale(1.08) translateY(-10px);  
    box-shadow: var(--box-shadow-default);
}

img[alt*="logo"]{
    height: 50px;
}

footer p {
    padding: 5px;
    border-radius: 5px;
}

/* Scroll Bar Design for main */
/* For Webkit browsers */
::-webkit-scrollbar {    
    height: 5px;
    width: 5px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: transparent; /* Track background color */
    border-radius: 10px; /* Round the corners */
}

::-webkit-scrollbar-thumb {    
    background: #b9b9b979; /* Thumb color */
    border-radius: 10px; /* Round the corners */
}

::-webkit-scrollbar-thumb:hover {
    background: #888; /* Thumb color on hover */
}

/* For Firefox */
.scrollbar {
    scrollbar-width: thin; /* Make the scrollbar thin */
    scrollbar-color: #888 #f1f1f1; /* Thumb color and track color */
}

/* Status Color */
.status-color{    
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}

.status-color:hover{
    opacity: 0.8;
    transform: scale(0.9);
}

.status-not-read{
    background-color: var(--accent-color-secondary);        
}

.status-progress{
    background-color: var(--on-progrss);        
}

.status-finished{
    background-color: var(--green);
}

/* No Data */
.no-data{
    text-align: center;
    font-style: italic;
}

/* Current Page HTML */