/* styles - little bites log */
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

:root{
    --mustard: #F4A261;
    --sage: #84A98C;
    --dusty-blue: #577590;
    --light-dusty-blue: #7b99b5;
    --clay: #E07A5F;
}

[data-theme="light"] {
    --background: #FAF3E0;
    --light-background: #FFFBEF;
    --text:#000;
    --border: #C8bb99;
    --input-background:#fff;
    --h1: var(--dusty-blue);
    --progress-background: #f1f1f1
}

[data-theme="dark"]{
    --background: #1c3041;
    --light-background: #273f54;
    --text: #fff;
    --border: var(--light-dusty-blue);
    --input-background: var(--light-dusty-blue);
    --h1: var(--light-dusty-blue);
    --progress-background: var(--light-dusty-blue);
}

*{margin:0; padding:0;}
html{background:var(--background);}
body{width:90%; margin: 0 auto; font-family:"Albert Sans", sans-serif; padding-bottom:100px;}
header{margin:20px 0; display:flex; justify-content:space-between;}

/* DARK MODE */
#darkModeToggle {transition: transform 0.3s ease; cursor:pointer;font-size:28px;color:var(--text);}  
#darkModeToggle:hover {transform: rotate(20deg);}

button{background:var(--sage); padding:8px 22px; border-radius:50px; text-decoration:none; transition:.3s all; font-size:18px; color:#fff; display:inline-block; border:none;}
button:hover{background: var(--mustard);}

h1{color:var(--h1); font-size:50px; line-height:60px; font-family: "Bricolage Grotesque", sans-serif;}
h2{color:var(--clay); margin-bottom:10px; text-align:center; font-size:30px; font-family: "Bricolage Grotesque", sans-serif;}
.logo h1{text-transform:uppercase; font-size:28px; line-height:28px; font-family: "Bricolage Grotesque", sans-serif; text-transform:lowercase;}
p{font-size:18px; line-height:25px; color:var(--text)}

.intro{width:60%; margin:50px auto; text-align:center;}
.intro h1{margin-bottom:10px;}
.intro button{margin-top:20px;}


/* MODAL */
.modal {display:none; position:fixed; z-index:1; background:rgba(0,0,0,.7); width:100vw; height:100vh; top:0; left:0}
.modal-content {position:absolute; left:35%; top:20%; width:30%; height:auto; overflow:auto; background-color:var(--light-background); border-radius:30px; box-shadow:0px 0px 18px 0px rgba(0,0,0,0.3);}
.modal-header{display:flex; justify-content:center; padding:15px; background:var(--background)}
.modal-body{padding:30px 50px;}
.close {position:absolute; right:20px; font-size:30px; line-height:30px; color:var(--text);}
.close:hover{cursor:default;}
.modal h2{margin-bottom:0;}

/* FORM */
#userForm div{margin-bottom:15px;}
#userForm input{border-radius:50px; border:1px solid var(--border); padding:5px 10px; font-family:"Albert Sans", sans-serif;}
#userForm select{background:var(--input-background); color:var(--text); padding:5px 10px; border-radius:50px; border:1px solid var(--border)}
.rating label {margin-right: 20px;}
label{color:var(--text);}



/* TABLE */
.stored-foods{width:80%; margin:0 auto;}
table{width:100%; text-align:left; background:var(--light-background); border:1px solid var(--border); border-collapse:collapse; color:var(--text)}
tr{border:1px solid var(--border);}
th, td{padding:7px 10px; border:1px solid var(--border);}

tbody {
    counter-reset: rownumber;
  }
  
  /* Increment the counter for each table row */
  tbody tr {
    counter-increment: rownumber;
  }
  
  /* Display the counter value in the first td of each row */
  tbody td:first-child::before {
    content: counter(rownumber) ".";
    padding-right: 1ch; /* Optional: adds a little space */
  }

  .delete-btn {background-color: unset; border: none; border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 0.9rem;}
  .delete-btn:hover {background-color: var(--clay); color: #fff;}
  td:has(.delete-btn){width:90px;}

  .progress-container {background: var(--light-background); padding: 20px 2.5%; border-radius: 100px; margin-bottom: 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); width:50%; margin:0 auto 50px;}
  .progress-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;}
  .progress-header h3 {font-size: 16px; margin: 0; color:var(--text);}
  #progressText {font-weight: 600; color: var(--text);}
  .progress-bar {width: 100%; height: 16px; background-color: var(--progress-background); border-radius: 20px; overflow: hidden;}
  #progressFill {height: 100%; width: 0%; background: linear-gradient(90deg, #FFB6C1, #FFD966, #A0E7E5); border-radius: 20px; transition: width 0.4s ease;}

@media screen and (max-width:1024px){
    .intro{width:100%;}
    .progress-container{width:95%;}
    .stored-foods{width:100%;}
}

@media screen and (max-width:600px){
    h1{font-size:35px; line-height:40px;}
    .progress-container{padding:15px 10%; width:80%;}
    table{overflow:scroll; display:block; border:none;}
    .modal-content{top:5%; left:5%; width:90%;}
    .modal-body{padding:20px 30px;}
}