/* CSS */
/* Define some custom properties for theming */

:root {
  --bg-color: white;
  --bg-color-dynamic: white;
  --tooltip-bg: rgba(0, 0, 0, 0.9);
  --sidebar-bg-color: white;
  --dashboard-card-bg:#536390;
  --dashboard-text-color:white;
  --text-color: black;
  --price-color: darkgray;
  --sidebar-text-color: blue;
  --text-color-white: white;
  --primary-color: #302AE6;
  --secondary-color: #536390;
  /* Add a new custom property for the text color of the table variants */
  --table-text-color: black;
  --table-hover-text-color: blue;
  --icon-color: blue !important;
  --navbar-bg-color: rgba(240,240,240,1.0);
  --navbar-text-color: darkblue !important;

}

/* Apply the custom properties to the body element */
*{
  font-size: 12px;
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Style the scrollbar */
body::-webkit-scrollbar {
    width: 2px; /* Width of vertical scrollbar */
    height: 2px; /* Height of horizontal scrollbar */
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb {
    background: skyblue;
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}


@font-face {
    font-family: 'Shadows Into Light', cursive;
    src: url('webfonts/ShadowsIntoLight-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face  {
  font-family: "Send Flowers", cursive;
    src: url('webfonts/ShadowsIntoLight-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}


.navbar{
    background: var(--navbar-bg-color);
    color: var(--navbar-text-color);
    font-size: 12px;
  }

.table-hover tbody tr:hover {
      background-color: rgba(0, 0, 0, 0.075); /* Change the background color on hover */
      cursor: pointer; /* Change cursor to pointer on hover */
      color: var(--table-hover-text-color);
  }

/* Apply the custom properties to the table element and its children */
table, table tr, table td, table.table-striped,{
  background-color: var(--bg-color);
  color: var(--text-color);
}

  ul.list-group li:hover {
      background: skyblue;
      color: white;
  }

/* Use the attribute selector to target the elements that have the table classes */
[class*="table-"] {
  /* Apply the custom property to the text color */
  color: var(--table-text-color);
}

  #amount-paid-modal-container,
  #amount-credit-modal-container, 
  #change-modal-container, 
  #error-modal-container,
  #message-modal-container,
  #sales-delete-modal-container
  #sales-delete-modal-container {
      background: var(--bg-color-dynamic);
      box-shadow: 50px 50px 50px rgba(0, 0, 0, 0.4);

  } 

  ul li.active i.fa {
      background: white;
      padding: 4px;
      border-radius: 50%;
  }

  #tab-title {
      color: grey;
      font-weight: bolder;
  }   

  div.card {
      background: none;
  }
  div #products-div, div.card {
      background: none;
      min-height: 85px;
      border-radius: 0 0 5px 5px;
      border:0.5px solid white;
      border-top: none;
      margin-left: auto;
      margin-right: auto;
  }   

  div #products-div{
      min-width: 12em;
      max-width: 13em;
  }

  .description,.qty{
    font-size: 12px;
    margin-top: 5px;
  }

  .in-stock{
    font-size: 9px;
    font-style: italic;
    color: gray;
  }

  .amount{
    font-size: 14px;
    padding: 2px 5px;
    border-radius: 10px;
    color: var(--price-color);
    background-color: var(--bg-color-dynamic);
  }

    .amount-div{
      margin-top: 5px;
      max-width: 110px;
    }

      .amount-input{
        font-size: 12px;
        padding: 2px 5px;
        border-radius: 10px;
        width: 50%;
        color: darkblue;
      }

  .gtotal{
    font-size: 1.9em;
  }

  .checks{
    font-size: 12px;
    padding: 12px !important;
  }

  
    /* Custom styles for the dropdown action button */
  .dropdown {
      position: relative;
      display: inline-block;
  }

  ul .list-group-item{
    background-color: var(--sidebar-bg-color);
    color: var(--sidebar-text-color);
    border-bottom: 0.5px solid var(--secondary-color);
  }

  #mymodal{
    background-color: var(--sidebar-bg-color);
    color: var(--sidebar-text-color);
  }

  .dropdown-toggle {
      background-color: transparent;
      border: none;
      cursor: pointer;
      padding: 5px 10px;
      font-size: inherit;
      color: inherit;
  }

  .dropdown-menu {
      display: none;
      position: absolute;
      top: 100%; /* Position dropdown below the toggle button */
      left: 0;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      z-index: 999;
      padding: 5px 0;
  }

  .sidebar-icon{
    color: deeppink;
    padding-right: 10px;
  }

  .dropdown-menu a {
      display: block;
      padding: 5px 10px;
      color: #000;
      text-decoration: none;
  }

  .dropdown-menu a:hover {
      background-color: #f0f0f0;
  }

  .dropdown:hover .dropdown-menu {
      display: block;
  }

  .clear{
    border:none;
  }

  .mypage-link{
      background-color: transparent !important;
    }

  .dashboard-card{
      background-color: var(--dashboard-card-bg);
      color: var(--dashboard-text-color);
      border-radius: 10px;
      transition: 0.3s zoom-in-out;
    }

    .suppliers{
      background-color: #536390;
    }

    .current-prices{
      background-color: blue;
    }

    .total-supply{
      background-color: rgba(30, 144, 255, 1);
    }

    .total-balance{
      background-color: #536590;
    }

    .total-sales{
      font-size: 20px;
    }

    .dashboard-card:hover{
      color: lightgreen;
      background-color: darkblue;
    }

    .debtor-card{
      background-color: var(--bg-color) !important;
      color: var(--text-color) !important;
    }

    .form-control, .form-select{
      background-color: var(--bg-color) !important;
      color: var(--text-color) !important;
      padding: 5px;
    }

    .input-group-text{
      background-color: rgba(90, 90, 90, 0.4); !important;
      color: var(--sidebar-text-color);
      width: fit-content;
      padding:5px ;
    }

   .js-message{
      padding: 5px;
    }

  @media (max-width: 1200px) and (min-width:1003px){
      .navBarCollapse #nav-link {
          font-size: 10px !important;
    }
  }

  @media (max-width:1002px) and (min-width: 991px) {
      .navBarCollapse #nav-link {
          font-size: 9px !important;
    }
  }

    /* Adjustments for smaller screens */
  @media (max-width: 767px) {
      .dropdown {
          display: block;
          margin-bottom: 10px;
      }


      .navbarMore {
          display: block;
      }

      .dropdown-toggle {
          width: 100%;
          text-align: left;
      }

      .dropdown-menu {
          position: static;
          width: 100%;
      }
  }

  /* Adjustments for smaller screens */
  @media (max-width:1005px) and (min-width:767px) {

      div.card {
          background-color: transparent;

      }

      div #products-div {
          min-height: 65px;
          font-size: 0.8em;
          min-width: 11.5em;
          max-width: 12em;
          background-color: none;
      }

      .draft-count{
        font-size: 9px;
      }

      .draft-count i{
        display: none;
      }

      .description,.qty{
        font-size: 9px;
      }

      .gtotal{
        font-size: 1.5em;
      }

      .checks{
        font-size: 10px;
        padding: 10px !important;
      }

      .in-stock{
        font-size: 9px;
        font-style: italic;
        color: gray;
      }

      .qty{
        width:25px;
      }

      .amount{
        display: none;
      }

      .amount-input{
        padding: 5px;
        border-radius: 10px !important;
        font-size: 9px;
        text-align: center;
        font-weight: bolder;
        width: 3em !important;
        color: darkblue;
      }

      .clear{
        border:none;
      }

    span.get-sales{
      display: none;
    }
  }

  @media(max-width:1310px) and  (min-width:1005px){   
      /*dashboard customization*/
      .fs-3,.value-badge{
        font-size: 12px !important;
      }

      .counter-badge{
        border-bottom: 2px solid gray !important; 
        font-size: 15px !important;
      }

      .total-sales{
        font-size: 1.5em;
      }
  }

   @media(min-width: 1200px){
     .suppliers-td{
        font-size: 15px !important;    }  
  }


  /*Preloader styles*/
      #preloader {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.8);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1000;
      }

      .loader {
          display: flex;
          gap: 10px;
      }

      .letter {
          font-size: 2em;
          animation: bounce 0.6s infinite;
      }

      .letter:nth-child(1) {
          animation-delay: 0s;
      }

      .letter:nth-child(2) {
          animation-delay: 0.1s;
      }

      .letter:nth-child(3) {
          animation-delay: 0.2s;
      }

      .letter:nth-child(4) {
          animation-delay: 0.3s;
      }

      .letter:nth-child(5) {
          animation-delay: 0.4s;
      }

      .letter:nth-child(6) {
          animation-delay: 0.5s;
      }

      .letter:nth-child(7) {
          animation-delay: 0.6s;
      }

      .letter:nth-child(8) {
          animation-delay: 0.7s;
      }

      @keyframes bounce {
          0%, 100% {
              transform: translateY(0);
          }
          50% {
              transform: translateY(-20px);
          }
      }

/* Define different values for the custom properties depending on the data-theme attribute */
[data-theme="dark"] {
  --bg-color: rgba(0,0,0,0.9);
  --dashboard-card-bg:rgba(0,0,0,0.8);
  --bg-color-dynamic: darkblue;
  --tooltip-bg: darkblue;
  --sidebar-bg-color: darkblue;
  --navbar-color: rgba(0,0,0,0.7);
  --text-color: white;
  --price-color: yellow;
  --sidebar-text-color: lightskyblue;
  --dashboard-text-color: lightskyblue;
  --primary-color: #9A97F3;
  --secondary-color: #818cab;
  /* Change the text color of the table variants to black for dark mode */
  --table-text-color: white !important;
  --table-hover-text-color: lightgreen !important;
  --navbar-bg-color: rgba(0,0,0,0.99);
  --navbar-text-color: white !important;
  --icon-color: skyblue !important;

  /* Apply the custom properties to the table element and its children in dark mode */
  table, table tr, table th, table td {
    color: var(--table-text-color);
  }

  /* Change text color when table is hovered in dark mode */
  td:hover,tr:hover{
    color: var(--table-hover-text-color);
  }

  .navbar{
      background: var(--navbar-color);
  }

  ul.dropdown-menu {
      background: var(--navbar-color);
  }


  .table-hover tbody tr:hover {
      color: var(--table-hover-text-color);
  }


  div #products-div {
      border-radius: 0 0 5px 5px;
      border:0.5px solid white;
      border-top: none;
      margin-left: auto;
      margin-right: auto;
  }

  div #products-div{
      min-width: 14em;
      max-width: 14em;
  }

  #descriptn{
      color: white !important;
  }

  ul.list-group, ul.list-group li, ul.list-group a.fa {
      background: #000085;
      color: lightblue;
  }

  ul li.list-group-item i.fa {
      background: white;
      padding: 4px;
      border-radius: 50%;
  }

  ul li.active {
      background: black;
  }

  #tab-title {
      color: white;
      font-weight: bolder;
  }  

  ul li.active i.fa {
      background: yellow;
      padding: 4px;
      border-radius: 50%;
  }

  ul.list-group li:hover {
      background: #000;
      color: white;
  }

  input, select, textarea {
      background: #000;
      color: white;
  }


  .js-change-input,  .js-message-input {
      background: #000095;
      color: white;
  }
  .js-error-input {
      background: #000095;
      color: deeppink;
  }


  /* Table row hover effect in dark mode */
    tr:hover {
        background-color: black;
    }
    
    /* Text color for table rows when hovered in dark mode */
    tr:hover td {
        color: white !important;
    }
}

.ses-message {
      position: fixed;
      top: 70px;
      right: 10px;
      background-color: #d1e7dd; /* Red background */
      color: #0f5132; /* White text */
      padding: 5px 10px;
      text-align: center;
      border-radius: 5px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
      display: none; /* Hidden by default */
      z-index: 1000; /* Ensure it's on top of other elements */
      width: 300px;
  }

  .ses-progress-container {
      background-color: #ddd; /* Light grey background */
      border-radius: 5px;
      overflow: hidden;
      margin-top: 5px;
      margin-bottom: 5px;
  }

  .ses-progress-bar {
      height: 5px;
      background-color: #4caf50; /* Green background */
      width: 100%;
  }