/* Reset all browser default styling */
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

/* Root variables */
:root{
  --body-bg-color:rgb(177, 168, 168);
  --card-bg-color:rgb(221, 210, 210);
  --btn-bg-color:blue;
  --accent-color:rgb(105, 124, 177);
}

/* Body Styles */
body{
  background: var(--body-bg-color);
}

body::before{
  content: "";
  display:block;
  height:4rem;
}

nav{
  background: var(--card-bg-color);
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  text-align: center;
  position: fixed;
  width: 100%;
  top:0;
  left:0;
  z-index: 1000;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

nav li{
  font-size: 1.3rem;
  color:var(--btn-bg-color);
  transition: all 0.2s ease-in-out;
}

nav li:hover{
  color: var(--accent-color);
  cursor: pointer;
  border-bottom: 1px solid var(--btn-bg-color);
}

header h1{
  text-align: center;
}

/* Card Styles */
.card{
  background: var(--card-bg-color);
  padding:1rem;
  max-width:70%;
  margin:2rem auto;
  border-radius: 1rem;
}

.card *{
  margin:1rem;
  padding:0.2rem;
  border-radius: 1rem;
  border:1px solid transparent;
  font-size:1rem;
}

.card *:focus{
  outline:none;
  border: 2px solid var(--accent-color);
}

.card label input{
  padding:0.5rem;
}

.card label{
  font-size:1.2rem;
}

.card #bookingDate:hover, button, .card button{
  padding: 0.8rem 1.3rem;
  border-radius: 2rem;
  border:none;
  background: var(--btn-bg-color);
  color:whitesmoke
}

.card #bookingDate, button:hover{
  padding: 0.8rem 1.3rem;
  border-radius: 2rem;
  color:#000;
  background: whitesmoke;
  transition: all 0.3s ease-in-out;
}

#searchInput{
  background: var(--body-bg-color);
  border:none;
  font-size: 1.2rem;
}

#searchInput:focus{
  border:none;
  outline:none;
}

#searchInputLabel{
  padding: 0.8rem;
  border:1px solid var(--card-bg-color);
  border-radius: 2rem;
  color:var(--btn-bg-color);
  background: var(--body-bg-color);
}

#searchInputLabel:focus{
  box-shadow: 0 0 5px var(--accent-color);
}

#count{
  font-weight:bold;
  color:var(--btn-bg-color);
  font-size:1.4rem;
  margin:0;
}

#plural{
  margin:0;
  display:none;
}

#searchBar{
  width:fit-content;
  margin:2rem auto;
}

#searchBar p{  
  margin: 1.3rem auto;
  display: flex;
  justify-content: space-between;
}

#searchBar, #addClients, #allClients{
  display: none;
}

#toastBox {
  position: fixed;
  top: 6rem;
  right: 2rem;
  z-index: 10000;
}

.toast {
  display: none;
  background: #000;
  color: #fff;
  padding: 0.8rem 1.2rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  font-size: 0.95rem;
}

.toast.show {
  display: block;
  animation: fadeSlide 3s ease forwards;
}

#emptyMessage {
  text-align: center;
  font-style: italic;
  color: #444;
  margin-top: 2rem;
}

.navTabs.active {
  border-bottom: 2px solid var(--btn-bg-color);
  color: var(--accent-color);
  font-weight: bold;
}

@keyframes fadeSlide {
  0% { opacity: 0; transform: translateY(20px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px); }
}