body {
    font-family: 'Vazir', sans-serif;
    direction: ltr;
    background-color: #f0f4f8; /* LIGHT BACKGROUND */
    margin: 0;
    padding: 0; /* REMOVE BODY PADDING */
    color: #333;
    font-weight: bold;
  }



  body {
    --sb-track-color: #a3bdc7;
    --sb-thumb-color: #024eb3;
    --sb-size: 13px;
  }
  
  body::-webkit-scrollbar {
    width: var(--sb-size)
  }
  
  body::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 20px;
  }
  
  body::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 20px;
    border: 1px solid #007fb7;
  }
  
  @supports not selector(::-webkit-scrollbar) {
    body {
      scrollbar-color: var(--sb-thumb-color)
                       var(--sb-track-color);
    }
  }

  .father{
    display: flex;
    justify-content: center;
  }
  .container1 {
    width: 96%;
    max-width: 100%; /* REMOVE MAX WIDTH CONSTRAINT */
    padding: 20px;
    background-color: hsl(168, 56%, 98%);
    border-radius: 8px; /* ROUNDED CORNERS */
    margin: 0; /* REMOVE MARGIN */
  }
  
  h1 {
    text-align: center;
    color: #1a73e8; /* BRIGHT BLUE */
    font-size: 2.5rem;
    margin-bottom: 20px;
  }
  
  h2 {
    text-align: center;
    color: #0077b6; /* DEEPER BLUE */
    font-size: 1.8rem;
    margin-bottom: 20px;
  }
  
  .forms {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .form-section {
    background-color: #f9fbfd; /* LIGHTER BLUE BACKGROUND */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
    flex: 1;
    min-width: 48%; /* MAKES FORMS STAY IN A LINE ON LARGER SCREENS */
    transition: box-shadow 0.3s;
    margin: 10px; /* ADD MARGIN FOR SPACING */
  }
  
  .form-section:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* SLIGHT SHADOW EFFECT ON HOVER */
  }
  
  form label {
    font-size: 1.1rem;
    color: #0077b6; /* DEEP BLUE */
    margin-top: 10px;
    display: block; /* LABELS ABOVE INPUTS */
  }
  
  form input, button {
    width: 99%;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s;
  }
  
  form input:focus {
    border-color: #1a73e8; /* FOCUS BORDER COLOR */
    outline: none; /* REMOVE OUTLINE */
  }
  
  .out-button {
    background-color: #1a73e8; /* BRIGHT BLUE BUTTON */
    color: white;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    border: none; /* REMOVE BORDER */
    height: 40px;
    margin-top: 10px;
  }
  
  .out-button:hover {
    background-color: #1669c7; /* DARKER BLUE ON HOVER */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* BUTTON SHADOW ON HOVER */
  }
  
  .button-add {
    background-color: #1a73e8; /* BRIGHT BLUE BUTTON */
    color: white;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    border: none; /* REMOVE BORDER */
    height: 40px;
    margin-top: 10px;
  }
  
  .button-add:hover {
    background-color: #1669c7; /* DARKER BLUE ON HOVER */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* BUTTON SHADOW ON HOVER */
  }
  
  .search-section {
    text-align: center;
    margin-bottom: 40px;
  }
  
  .search-section input {
    width: 300px;
    padding: 10px;
    margin: 10px 5px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s;
  }
  
  .search-section input:focus {
    border-color: #1a73e8; /* FOCUS BORDER COLOR */
    outline: none;
  }
  
  .search-section button {
    background-color: #1a73e8; /* BLUE BUTTON */
    color: white;
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
  }
  
  .search-section button:hover {
    background-color: #1669c7; /* DARKER BLUE */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* BUTTON SHADOW */
  }
  
  .inventory-section {
    background-color: #f9fbfd; /* LIGHTER BLUE BACKGROUND */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 40px;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
  }
  
  th {
    background-color: #1a73e8; /* BRIGHT BLUE HEADER */
    color: white;
  }
  
  tr:nth-child(even) {
    background-color: #f1f8ff; /* VERY LIGHT BLUE */
  }
  /* From Uiverse.io by ArturCodeCraft */ 
  /* <reset-style> ============================ */
  button {
      border: none;
      background: none;
      padding: 0;
      margin: 0;
      cursor: pointer;
      font-family: inherit;
    }
    /* ============================ */
    /* <style for bg> ======== */
    .background {
      border-radius: 16px;
      border: 1px solid #1a1a1a;
      background: rgba(74, 74, 74, 0.39);
      mix-blend-mode: luminosity;
      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.20);
      backdrop-filter: blur(15px);
      width: 65px;
      height: 65px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    /* <style for change-theme__icon> ======== */
    .change-theme__icon {
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    
    .icon-sun,
    .icon-moon {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
    }
    
    /* .icon-sun */
    .icon-sun {
      animation: ease reverse-change-theme-sun .6s forwards;
    }
    
    .change-theme__icon:hover .icon-sun {
      animation: ease change-theme-sun .4s forwards;
    }
    
    @keyframes reverse-change-theme-sun {
      0% {
        transform: rotate(-45deg) scale(.8);
        opacity: 0;
      }
    
      50% {
        transform: rotate(8deg);
      }
    
      100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
      }
    }
    
    @keyframes change-theme-sun {
      0% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
      }
    
      100% {
        transform: rotate(-45deg) scale(.8);
        opacity: 0;
      }
    }
    
    /* .icon-moon */
    .icon-moon {
      animation: ease reverse-change-theme-moon .4s forwards;
    }
    
    .change-theme__icon:hover .icon-moon {
      animation: change-theme-moon .6s forwards;
    }
    
    @keyframes change-theme-moon {
      0% {
        transform: rotate(-45deg) scale(.8);
        opacity: 0;
      }
    
      50% {
        transform: rotate(8deg);
      }
    
      100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
      }
    }
    
    @keyframes reverse-change-theme-moon {
      0% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
      }
    
      100% {
        transform: rotate(-45deg) scale(.8);
        opacity: 0;
      }
    }
  
  
    .button-container{
      float: right;
    }
  
  
    .suggestions-box {
      border: 1px solid #ccc;
      max-height: 150px;
      overflow-y: auto;
      display: none;
  }
  
  .suggestion-item {
      padding: 10px;
      cursor: pointer;
  }
  
  .suggestion-item:hover {
      background-color: hsl(0, 15%, 77%);
  }

  /* FROM UIVERSE.IO BY SMIT-PRAJAPATI */
.container {
    max-width: 350px;
    background: #F8F9FD;
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(244, 247, 251) 100%);
    border-radius: 40px;
    padding: 25px 35px;
    border: 5px solid rgb(255, 255, 255);
    box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;
    margin: 20px;
    width: 300px;
  }
  
  .heading {
    text-align: center;
    font-weight: 900;
    font-size: 30px;
    color: rgb(16, 137, 211);
  }
  
  .form {
    margin-top: 20px;
  }
  
  .form .input {
    width: 100%;
    background: white;
    border: none;
    padding: 15px 20px;
    border-radius: 20px;
    margin-top: 15px;
    box-shadow: #cff0ff 0px 10px 10px -5px;
    border-inline: 2px solid transparent;
  }
  
  .form .input::-moz-placeholder {
    color: rgb(170, 170, 170);
  }
  
  .form .input::placeholder {
    color: rgb(170, 170, 170);
  }
  
  .form .input:focus {
    outline: none;
    border-inline: 2px solid #12B1D1;
  }
  
  .form .forgot-password {
    display: block;
    margin-top: 10px;
    margin-left: 10px;
  }
  
  .form .forgot-password a {
    font-size: 11px;
    color: #0099ff;
    text-decoration: none;
  }
  
  .form .login-button {
    display: block;
    width: 100%;
    font-weight: bold;
    background: linear-gradient(45deg, rgb(16, 137, 211) 0%, rgb(18, 177, 209) 100%);
    color: white;
    padding-block: 15px;
    margin: 20px auto;
    border-radius: 20px;
    box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
    border: none;
    transition: all 0.2s ease-in-out;
  }
  
  .form .login-button:hover {
    transform: scale(1.03);
    box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;
  }
  
  .form .login-button:active {
    transform: scale(0.95);
    box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;
  }
  
  .social-account-container {
    margin-top: 25px;
  }
  
  .social-account-container .title {
    display: block;
    text-align: center;
    font-size: 10px;
    color: rgb(170, 170, 170);
  }
  
  .social-account-container .social-accounts {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 5px;
  }
  
  .social-account-container .social-accounts .social-button {
    background: linear-gradient(45deg, rgb(0, 0, 0) 0%, rgb(112, 112, 112) 100%);
    border: 5px solid white;
    padding: 5px;
    border-radius: 50%;
    width: 40px;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 12px 10px -8px;
    transition: all 0.2s ease-in-out;
  }
  
  .social-account-container .social-accounts .social-button .svg {
    fill: white;
    margin: auto;
  }
  
  .social-account-container .social-accounts .social-button:hover {
    transform: scale(1.2);
  }
  
  .social-account-container .social-accounts .social-button:active {
    transform: scale(0.9);
  }
  
  .agreement {
    display: block;
    text-align: center;
    margin-top: 15px;
  }
  
  .agreement a {
    text-decoration: none;
    color: #0099ff;
    font-size: 9px;
  }
  
  .over-form{
    display: flex;
    justify-content: center;
  }
  
  #email{
    margin-left: -25px;
   
  }
  #password{
    margin-left: -25px;
  }
  
  /* ERROR MESSAGE STYLE */
  .error-message {
    color: red;
    font-size: 12px;
    margin-top: 5px;
    display: block;
  }
  

  .icon {
    position: absolute;
    top: 60%;
    right: 10px; /* POSITION FROM THE RIGHT */
    transform: translateY(-50%); /* CENTER VERTICALLY */
    cursor: pointer; /* CHANGE CURSOR ON HOVER */
  }
  .input-container {
    position: relative;
    margin-bottom: 15px; /* ADD SPACE BETWEEN INPUTS */
  }



 /* DARK MODE STYLES */
body.dark-mode {
  background-color: #181818;
  color: #f1f1f1;
}

.dark-mode .container {
  background: #2C2C2C;
  border: 5px solid #2C2C2C;
  box-shadow: rgba(0, 0, 0, 0.7) 0px 30px 30px -20px;
}

.dark-mode .heading {
  color: #12B1D1;
}

.dark-mode .form .input {
  background: #3C3C3C;
  color: #f1f1f1;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 10px -5px;
  border-inline: 2px solid transparent;
}

.dark-mode .form .input::placeholder {
  color: #888;
}

.dark-mode .form .input:focus {
  border-inline: 2px solid #12B1D1;
}

.dark-mode .form .forgot-password a {
  color: #12B1D1;
}

.dark-mode .form .login-button {
  background: linear-gradient(45deg, #1A73E8 0%, #004DFF 100%);
  box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 10px -15px;
}

.dark-mode .social-account-container .social-accounts .social-button {
  background: linear-gradient(45deg, #444 0%, #666 100%);
  border: 5px solid #3C3C3C;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 12px 10px -8px;
}

.dark-mode .agreement a {
  color: #12B1D1;
}


.button-container-print {
  margin-top: 20px;
  width: 100%;
  height: 30px;
  border-radius: 5px;
  background-color: #0099ff; /* LIGHT BACKGROUND COLOR */
  transition: background-color 0.3s; /* SMOOTH TRANSITION */
}

.print-button {
  text-align: center;
  margin-top: 1px;
  color: white;
  font-weight: bold;
  background-color: #007bff; /* LIGHT BACKGROUND COLOR */
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s; /* SMOOTH TRANSITION */
}

/* CONTAINER FOR SEARCH INPUT FIELDS TO CENTER THEM */
.search-container {
  display: flex;
  justify-content: center; /* CENTER ALIGN INPUT FIELDS */
  margin-bottom: 15px; /* ADD SPACING BELOW THE INPUT FIELDS */
}

/* STYLE THE SEARCH INPUT FIELDS */
.search-container input {
  background-color: white; /* WHITE BACKGROUND */
  color: black; /* BLACK TEXT */
  padding: 10px 20px;
  font-size: 1rem;
  border: 1px solid #ccc; /* LIGHT BORDER */
  border-radius: 6px;
  width: 60%; /* SET WIDTH TO YOUR PREFERENCE */
  text-align: center; /* CENTER TEXT INSIDE INPUT */
  transition: background-color 0.3s, box-shadow 0.3s;
}

/* HOVER EFFECT FOR SEARCH INPUT */
.search-container input:hover {
  background-color: #f0f0f0; /* LIGHTER BACKGROUND ON HOVER */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#printTotalButton{
    height: 40px;
    background-color: hwb(220 14% 25%);
    color: white;
    font-weight: bold;
    margin-top: 5px;
    transition: all 0.5s;
}
#printTotalButton:hover{
  
  background-color: hwb(220 11% 36%);
}

#printImportingButton{
  height: 40px;
  background-color: hwb(220 14% 25%);
  color: white;
  font-weight: bold;
  margin-top: 5px;
  transition: all 0.5s;
}
#printImportingButton:hover{

background-color: hwb(220 11% 36%);
}

#printExportingButton{
  height: 40px;
  background-color: hwb(220 14% 25%);
  color: white;
  font-weight: bold;
  margin-top: 5px;
  transition: all 0.5s;
}
#printExportingButton:hover{

background-color: hwb(220 11% 36%);
}



/* HEADER STYLING */
.header {
  background-color: #0858b6; /* DARK BACKGROUND */
  padding: 10px 0; /* REDUCE PADDING TO ACCOMMODATE ALL ELEMENTS */
  text-align: center; /* CENTER ALL CHILD ELEMENTS */
  display: flex;
  flex-direction: row; /* STACK ITEMS VERTICALLY */
  align-items: center; /* CENTER ITEMS HORIZONTALLY */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ADDING A DROP SHADOW */
  margin-bottom: 20px; /* SPACE BELOW HEADER */
  justify-content: space-around;
}

/* HEADING STYLING */
.header h2 {
  color: white; /* WHITE TEXT COLOR */
  margin: 5px 0; /* REDUCE MARGIN FOR BETTER SPACING */
  font-size: 1.5rem; /* INCREASE FONT SIZE */
  font-weight: bold; /* MAKE TEXT BOLD */
}

/* NAVIGATION LINKS STYLING */
.nav-links {
  list-style: none; /* REMOVE BULLETS */
  padding: 0;
  margin: 10px 0; /* SPACE ABOVE AND BELOW NAVIGATION */
  display: flex;
  justify-content: center; /* CENTER ALIGN LINKS */
  flex-wrap: wrap; /* ALLOW WRAPPING IF NEEDED */
}

.nav-links li {
  margin: 0 15px; /* SPACING BETWEEN LINKS */
}

.nav-links a {
  color: white; /* WHITE TEXT */
  text-decoration: none; /* REMOVE UNDERLINE */
  font-size: 1.2rem; /* SLIGHTLY LARGER FONT */
  padding: 10px 20px; /* LARGER PADDING FOR LINKS */
  border-end-end-radius: 25px; /* ROUNDED CORNERS */
  border-top-left-radius: 25px;
  background-color: hsl(217, 81%, 30%); /* BUTTON-LIKE BACKGROUND */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* SUBTLE SHADOW */
  transition: background-color 0.3s, transform 0.3s; /* SMOOTH TRANSITIONS */
}

.nav-links a:hover {
  background-color: hsl(206, 87%, 39%); /* DARKER BACKGROUND ON HOVER */
  transform: scale(1.05); /* SLIGHT GROWING EFFECT */
}

/* ADDING SMOOTH SCROLLING TO THE PAGE */
html {
  scroll-behavior: smooth; /* ENABLE SMOOTH SCROLLING */
}

/* STYLE FOR THE SECTION HEADERS FOR CLEARER IDENTIFICATION */
h2 {
  margin-top: 60px; /* SPACE ABOVE EACH SECTION */
  color: hsl(200, 81%, 34%); /* MATCHING HEADER COLOR */
  text-align: center; /* CENTER THE TEXT */
}

/* ADDING ANCHOR OFFSET */
.section {
  scroll-margin-top: 80px; /* SPACE FROM TOP WHEN SCROLLING */
}

.button-contain{
  position: fixed;
  top: 500px;
  left: 1200px;
   z-index: 2000;
 } 
 .button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #095283;
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
  cursor: pointer;
  transition-duration: 0.3s;
  overflow: hidden;
  position: relative;
  color: white;

    opacity: 1; /* INITIAL OPACITY */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* TRANSITION FOR OPACITY AND VISIBILITY */
    visibility: visible; /* INITIAL VISIBILITY */
}
.button.hide {
  opacity: 0; /* OPACITY WHEN HIDDEN */
  visibility: hidden; /* HIDE ELEMENT BUT KEEP SPACE */
}
.svgIcon {
  width: 12px;
  transition-duration: 0.3s;
}
.button:hover .svgIcon {
  /* width: 20px; */
  transition-duration: 0.3s;
  transform: translateY(-100%);
}
.svgIcon path {
  fill: white;
}



/* DARK MODE STYLES */
body.dark-mode {
  background-color: #111111; /* DARK BACKGROUND */
  color: hsl(206, 87%, 29%); /* TEXT COLOR */
  transition: background-color 0.3s, color 0.3s;
}

body.dark-mode .form-section,
body.dark-mode .inventory-section {
  background-color: #282a36; /* DARKER BACKGROUND */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* SOFT SHADOW */
  border: 1px solid #44475a; /* BORDER */
  transition: background-color 0.3s, box-shadow 0.3s, border 0.3s;
}

body.dark-mode h1,
body.dark-mode h2 {
  color: hsl(206, 28%, 80%)9; /* PURPLE TEXT */
  transition: color 0.3s;
  color: #a8bac4;
}

body.dark-mode form label {
  color: hsl(206, 54%, 67%); /* MATCH DARK PURPLE */
  transition: color 0.3s;
}

body.dark-mode form input,
body.dark-mode button,
body.dark-mode .search-section input {
  background-color: #44475a; /* INPUT BACKGROUND */
  color: hsl(206, 38%, 89%); /* TEXT COLOR */
  border: 1px solid #6272a4; /* BORDER COLOR */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* INPUT SHADOW */
  transition: background-color 0.3s, color 0.3s, border 0.3s;
}

body.dark-mode button {
  background-color: hsl(206, 87%, 29%); /* PURPLE BUTTON */
  color: #f8f8f2; /* BUTTON TEXT */
  border: none; /* REMOVE BORDER */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* BUTTON SHADOW */
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
}

body.dark-mode button:hover {
  background-color: hsl(206, 87%, 29%); /* DARKER PURPLE */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* DEEPER SHADOW */
  color:hsl(206, 35%, 60%) ;
}

body.dark-mode th {
  background-color: hsl(206, 87%, 29%); /* PURPLE HEADER */
  color: #faf0f0; /* HEADER TEXT */
  border: 1px solid hsl(206, 87%, 29%); /* HEADER BORDER */
  transition: background-color 0.3s, border 0.3s;
}

body.dark-mode tr:nth-child(even) {
  background-color: #3a3f58; /* ALTERNATE ROW GRAY */
}

/* DARK MODE TOGGLE BUTTON STYLING */
#darkModeButton {
  position: fixed; /* FIXED POSITION */
  bottom: 20px;
  right: 20px;
  padding: 15px 20px;
  background-color: hsl(206, 87%, 29%); /* PURPLE BUTTON */
  color: #ffffff; /* WHITE TEXT */
  border: none;
  border-radius: 50px; /* ROUNDED BUTTON */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* BUTTON SHADOW */
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
}

#darkModeButton:hover {
  background-color: hsl(206, 87%, 29%); /* DARKER PURPLE ON HOVER */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* DEEPER SHADOW ON HOVER */
}

body.dark-mode .container1 {
  background-color: #2c2c2c; /* GRAY BACKGROUND FOR CONTAINER */
  padding: 20px; /* ADDED PADDING FOR SPACING */
  border-radius: 12px; /* ROUNDED CORNERS */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* SOFT SHADOW */
  border: 1px solid #444444; /* BORDER COLOR */
  transition: background-color 0.3s, box-shadow 0.3s, border 0.3s;
}

/* DARK MODE STYLES FOR BUTTONS AND CONTAINERS */
body.dark-mode .button-container-print {
  background-color: #005f99; /* DARKER BACKGROUND COLOR */
}

body.dark-mode .print-button {
  background-color: #0056b3; /* DARKER BUTTON COLOR */
  color: hsl(206, 87%, 29%); /* TEXT COLOR */
}

body.dark-mode .search-container {
  display: flex;
  justify-content: center; /* CENTER ALIGN INPUT FIELDS */
  margin-bottom: 15px; /* ADD SPACING BELOW THE INPUT FIELDS */
}

body.dark-mode .search-container input {
  background-color: #333; /* DARK INPUT BACKGROUND */
  color: hsl(206, 30%, 85%); /* TEXT COLOR */
  padding: 10px 20px;
  font-size: 1rem;
  border: 1px solid #444; /* DARK BORDER */
  border-radius: 6px;
  width: 60%; /* SET WIDTH TO YOUR PREFERENCE */
  text-align: center; /* CENTER TEXT INSIDE INPUT */
  transition: background-color 0.3s, box-shadow 0.3s;
}

body.dark-mode .search-container input:hover {
  background-color: #444; /* DARKER BACKGROUND ON HOVER */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  color: white;
}

body.dark-mode #printTotalButton,
body.dark-mode #printImportingButton,
body.dark-mode #printExportingButton {
  height: 40px;
  background-color: hsla(222, 83%, 38%, 0.742); /* DARKER BUTTON BACKGROUND */
  color: hsl(206, 18%, 92%); /* TEXT COLOR */
  font-weight: bold;
  margin-top: 5px;
  transition: all 0.5s;
  
}

body.dark-mode #printTotalButton:hover,
body.dark-mode #printImportingButton:hover,
body.dark-mode #printExportingButton:hover {
  background-color: rgb(19, 63, 166); /* SAME HOVER COLOR */
  color: #aac0cd;
}

/* DARK MODE HEADER STYLING */
body.dark-mode .header {
  background-color: #003d7a; /* DARKER BACKGROUND FOR HEADER */
}

/* DARK MODE HEADING STYLING */
body.dark-mode .header h2 {
  color: hsl(206, 33%, 76%); /* SET TO SPECIFIED TEXT COLOR */
}

/* DARK MODE NAVIGATION LINKS STYLING */
body.dark-mode .nav-links a {
  background-color: hsl(217, 81%, 20%); /* DARKER BUTTON-LIKE BACKGROUND */
  color: hsl(206, 16%, 82%); /* TEXT COLOR */
}

body.dark-mode .nav-links a:hover {
  background-color: hsl(206, 87%, 29%); /* DARKER BACKGROUND ON HOVER */
  color: white; /* CHANGE TEXT COLOR ON HOVER FOR CONTRAST */
}

/* DARK MODE SECTION HEADERS */
body.dark-mode h2 {
  color: hsl(206, 50%, 72%); /* SET TO SPECIFIED HEADER COLOR */
}

/* ADDING SMOOTH SCROLLING TO THE PAGE */
html {
  scroll-behavior: smooth; /* ENABLE SMOOTH SCROLLING */
}

.delete-button{
 font-weight: bold;
  margin-top: 3px;
}
.edit-button{
  font-weight: bold;
   margin-top: 3px;
   border-bottom: 1px solid black;
 }
 body.dark-mode td {
  color: white; /* SET TEXT COLOR TO WHITE */
  transition: color 0.3s; /* ADD SMOOTH TRANSITION */
}

.delete-importing-button{
  font-weight: bold;
  margin-top: 3px;
}

.edit-importing-button{
  font-weight: bold;
   margin-top: 3px;
   border-bottom: 1px solid black;
 }

 .delete-exporting-button{
  font-weight: bold;
  margin-top: 3px;
}

.edit-exporting-button{
  font-weight: bold;
   margin-top: 3px;
   border-bottom: 1px solid black;
 }


/* From Uiverse.io by andrew-demchenk0 */ 
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 64px;
  height: 34px;
  margin-top: -5px;
}
.switch1 {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 64px;
  height: 34px;
  margin-top: 5px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #73C0FC;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  border-radius: 20px;
  left: 2px;
  bottom: 2px;
  z-index: 2;
  background-color: #e8e8e8;
  transition: .4s;
}

.sun svg {
  position: absolute;
  top: 6px;
  left: 36px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

.moon svg {
  fill: #73C0FC;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

/* .switch:hover */.sun svg {
  animation: rotate 15s linear infinite;
}

@keyframes rotate {
 
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* .switch:hover */.moon svg {
  animation: tilt 5s linear infinite;
}

@keyframes tilt {
 
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.input:checked + .slider {
  background-color: #183153;
}

.input:focus + .slider {
  box-shadow: 0 0 1px #183153;
}

.input:checked + .slider:before {
  transform: translateX(30px);
}
.card {
  position: relative;
  width: 400px;
  height: 220px;
  color: #f62e2e; /* BRIGHTER RED TEXT FOR ERROR MESSAGE */
  background: #1e3a8a; /* DEEPER BLUE BACKGROUND */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 250px;
  left: 450px;
  font-size: 35px;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: none; /* HIDE THE CARD BY DEFAULT */
  z-index: 1; /* ENSURE MODAL IS ON TOP */
}

.Error {
  margin-left: 150px;
}



.card::before,
.card::after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  background-color: rgba(173, 216, 230, 0.6); /* LIGHT BLUE HOVER EFFECT */
  transition: all 0.5s;
  z-index: 0; /* KEEP PSEUDO ELEMENTS BEHIND CONTENT */
}

.card::before {
  top: 0;
  right: 0;
  border-radius: 0 15px 0 100%;
}

.card::after {
  bottom: 0;
  left: 0;
  border-radius: 0 100% 0 15px;
}

.card:hover::before,
.card:hover::after {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.card:hover::after {
  content: "please inter a correct Name and Number";
  font-size: 20px;
  color: white; /* WHITE TEXT FOR THE MESSAGE */
  text-align: center;
  z-index: 1; /* ENSURE PSEUDO ELEMENT IS BELOW ICON BUT ABOVE BACKGROUND */
}





.card1 {
  position: relative;
  width: 400px;
  height: 220px;
  color: #f62e2e; /* BRIGHTER RED TEXT FOR ERROR MESSAGE */
  background: #1e3a8a; /* DEEPER BLUE BACKGROUND */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 250px;
  left: 450px;
  font-size: 35px;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: none; /* HIDE THE CARD BY DEFAULT */
  z-index: 1; /* ENSURE MODAL IS ON TOP */
}

.Error {
  margin-left: 150px;
}
.card1:hover .delete-icon {
  fill: #f62e2e; /* CHANGE COLOR TO ERROR RED ON HOVER */
  transform: scale(1.2); /* ENLARGE ICON ON HOVER */
}

.card1::before,
.card1::after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  background-color: rgba(173, 216, 230, 0.6); /* LIGHT BLUE HOVER EFFECT */
  transition: all 0.5s;
  z-index: 0; /* KEEP PSEUDO ELEMENTS BEHIND CONTENT */
}

.card1::before {
  top: 0;
  right: 0;
  border-radius: 0 15px 0 100%;
}

.card1::after {
  bottom: 0;
  left: 0;
  border-radius: 0 100% 0 15px;
}

.card1:hover::before,
.card1:hover::after {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.card1:hover::after {
  content: "Our product is not enough to export";
  font-size: 20px;
  color: white; /* WHITE TEXT FOR THE MESSAGE */
  text-align: center;
  z-index: 1; /* ENSURE PSEUDO ELEMENT IS BELOW ICON BUT ABOVE BACKGROUND */
}




.card2 {
  position: relative;
  width: 400px;
  height: 220px;
  color: #f62e2e; /* BRIGHTER RED TEXT FOR ERROR MESSAGE */
  background: #1e3a8a; /* DEEPER BLUE BACKGROUND */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 250px;
  left: 450px;
  font-size: 35px;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: none; /* HIDE THE CARD BY DEFAULT */
  z-index: 1; /* ENSURE MODAL IS ON TOP */
}

.Error {
  margin-left: 150px;
}
.card2:hover .delete-icon {
  fill: #f62e2e; /* CHANGE COLOR TO ERROR RED ON HOVER */
  transform: scale(1.2); /* ENLARGE ICON ON HOVER */
}

.card2::before,
.card2::after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  background-color: rgba(173, 216, 230, 0.6); /* LIGHT BLUE HOVER EFFECT */
  transition: all 0.5s;
  z-index: 0; /* KEEP PSEUDO ELEMENTS BEHIND CONTENT */
}

.card2::before {
  top: 0;
  right: 0;
  border-radius: 0 15px 0 100%;
}

.card2::after {
  bottom: 0;
  left: 0;
  border-radius: 0 100% 0 15px;
}

.card2:hover::before,
.card2:hover::after {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.card2:hover::after {
  content: "please inter a correct amount for the quantity";
  font-size: 20px;
  color: white; /* WHITE TEXT FOR THE MESSAGE */
  text-align: center;
  z-index: 1; /* ENSURE PSEUDO ELEMENT IS BELOW ICON BUT ABOVE BACKGROUND */
}




.card3 {
  position: relative;
  width: 400px;
  height: 220px;
  color: #f62e2e; /* BRIGHTER RED TEXT FOR ERROR MESSAGE */
  background: #1e3a8a; /* DEEPER BLUE BACKGROUND */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 250px;
  left: 450px;
  font-size: 35px;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: none; /* HIDE THE CARD BY DEFAULT */
  z-index: 1; /* ENSURE MODAL IS ON TOP */
}

.Error {
  margin-left: 150px;
}
.card3:hover .delete-icon {
  fill: #f62e2e; /* CHANGE COLOR TO ERROR RED ON HOVER */
  transform: scale(1.2); /* ENLARGE ICON ON HOVER */
}

.card3::before,
.card3::after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  background-color: rgba(173, 216, 230, 0.6); /* LIGHT BLUE HOVER EFFECT */
  transition: all 0.5s;
  z-index: 0; /* KEEP PSEUDO ELEMENTS BEHIND CONTENT */
}

.card3::before {
  top: 0;
  right: 0;
  border-radius: 0 15px 0 100%;
}

.card3::after {
  bottom: 0;
  left: 0;
  border-radius: 0 100% 0 15px;
}

.card3:hover::before,
.card3:hover::after {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.card3:hover::after {
  content: "please inter a correct number";
  font-size: 20px;
  color: white; /* WHITE TEXT FOR THE MESSAGE */
  text-align: center;
  z-index: 1; /* ENSURE PSEUDO ELEMENT IS BELOW ICON BUT ABOVE BACKGROUND */
}


.card4 {
  position: relative;
  width: 400px;
  height: 220px;
  color: #f62e2e; /* BRIGHTER RED TEXT FOR ERROR MESSAGE */
  background: #1e3a8a; /* DEEPER BLUE BACKGROUND */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 250px;
  left: 450px;
  font-size: 35px;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: none; /* HIDE THE CARD BY DEFAULT */
  z-index: 1; /* ENSURE MODAL IS ON TOP */
}

.Error {
  margin-left: 150px;
}
.card4:hover .delete-icon {
  fill: #f62e2e; /* CHANGE COLOR TO ERROR RED ON HOVER */
  transform: scale(1.2); /* ENLARGE ICON ON HOVER */
}

.card4::before,
.card4::after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  background-color: rgba(173, 216, 230, 0.6); /* LIGHT BLUE HOVER EFFECT */
  transition: all 0.5s;
  z-index: 0; /* KEEP PSEUDO ELEMENTS BEHIND CONTENT */
}

.card4::before {
  top: 0;
  right: 0;
  border-radius: 0 15px 0 100%;
}

.card4::after {
  bottom: 0;
  left: 0;
  border-radius: 0 100% 0 15px;
}

.card4:hover::before,
.card4:hover::after {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.card4:hover::after {
  content: "please inter a date format YYYY-MM-DD ";
  font-size: 20px;
  color: white; /* WHITE TEXT FOR THE MESSAGE */
  text-align: center;
  z-index: 1; /* ENSURE PSEUDO ELEMENT IS BELOW ICON BUT ABOVE BACKGROUND */
}