@tailwind base;
@tailwind components;
@tailwind utilities;

/* GLOBAL STYLING */
input, select, textarea {
  padding: 2px !important;
}

/* NOTIFICATION */
#toast-container {
  position: fixed;
  top: 20px; /* Adjust the top position as needed */
  right: 50%;
  
  transform: translateX(50%);
  max-width: 300px;
  z-index: 1000;
}

.toast-error {
  background-color: #f87171;
  box-shadow: 2px 0px 5px #00000070;
  color: #fff;
  font-weight: bold;
  padding: 15px 30px;
  border: solid 1px  #f8fafc ;
  margin-bottom: 10px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out ;
  transform: translateY(-100%);

}

.toast-success {
  background-color: #86efac;
  box-shadow: 2px 0px 5px #00000070;
  color: #fff;
  font-weight: bold;
  padding: 15px 30px;
  border: solid 1px  #f8fafc ;
  margin-bottom: 10px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out ;
  transform: translateY(-100%);

}

.show-toast {
  opacity: 1;
  transform: translateY(0);
  width: 100%;
}


/* SIDEBAR MENU */
.sborder {
  border: 1px solid #77c0d4;
}



.disabled-menu{
  max-height: 0px;
  overflow: hidden;
  transition: all .5s ease-in-out;
  padding: 0px 10px 0px 10px;
  background-color: #fff;
}
.menu.active-menu {
  max-height: 1000px;
  transition: all .5s ease-in-out;
  padding: 10px 10px 10px 10px;
 background-color: #fff;
}

/* LEAFLET */
#map { height: 250px; }

/* SEARCH AUTOSUGGEST */
#jobSearch{
  min-width: auto !important;
}

/* TABS */
.tabs {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid black;
}

.tab {
  cursor: pointer;
  padding: 10px;
  font-size: 12px;
}

.tab.active {
  border-radius: 3px 3px 0 0;
  color: #1976D2;
  background: #E3F2FD;
  border: 1px solid #90CAF9;
  border-bottom: 0;
  font-weight: 600;
  font-size: 12px;
}

.tab:hover {
  background-color: #E3F2FD;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.font-size-2xs{
font-size: 10px;
}

.font-size-3xs{
font-size: 9px;
}

/* TABLE */
table.table {
  border-collapse: collapse;
  width: 100%;
}

.table th, .table td {
  text-align: left;
}

.table tr:nth-child(even) {background-color: #f2f2f2;}
div#productLines_info {
  font-size: 12px;
  padding: 10px 0;
}
a#productLines_previous,
a#productLines_next {
  font-size: 12px;
  font-weight: 600;
  padding: 5px;
}
a.paginate_button {
  padding: 5px;
  font-size: 12px;
}

/* TABLE FILTER */
.w-100 input[type="text"]{
  width: 100px !important;
}
.w-64 input[type="text"]{
  width: 64px !important;
}
.w-20 input[type="text"]{
  width: 20px !important;
}
#productLines th {
  background: #DBEAFE;
  padding: 3px;
}
#productLines th input {
  width: 100% !important;
}
#productLines_filter input[type="search"] {
  width: 80%;
  border: 1px solid #9E9E9E;
  margin: 10px 5px;
}
div#productLines_length, div#productLines_filter {
  width: 50%;
  display: inline-block;
}

/* FORMS */
input:required::before {
  content: " *";
  color: red;
  font-weight: 800;
}



/*pseudo elements*/
#price-pseudo-element {
  position: relative; /* Make sure the <th> element is positioned */
}

#price-pseudo-element::before {
  content: "Follow Items Set Currency";
  position: absolute; /* Position the pseudo-element */
  top: -20px; /* Move the pseudo-element up by 20px */
  right: -125px;
  background-color: #f0fdf4; /* Background color for clarity */
  border: solid 1px #86efac;
  color: #111827; 
  padding: 0 2px;
  width: 160px;
  text-align: center;
}

.custom-sticky {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* HIDDEN IN MODAL */
.new-form #view-item,
.new-form #headerLabelJc {
  display: none;
}

/* JOB CARD PAGE STYLING */
@layer components {
  .label-yellow-bg {
    @apply flex justify-center items-center rounded bg-amber-50 border border-amber-300 px-2 py-1 text-center text-xs font-semibold text-black shadow-sm h-5; 
  }
  .label-blue-bg {
    @apply flex justify-center items-center rounded bg-blue-100 border border-blue-300 px-2 py-1 text-center text-xs font-semibold text-black shadow-sm h-5; 
  }
  .label-green-bg {
    @apply flex justify-center items-center bg-green-100 border border-green-300 px-2 py-1 text-center text-xs text-black shadow-sm h-5; 
  }
  .label-purple-bg {
    @apply flex justify-center items-center bg-purple-100 border border-purple-300 px-2 py-1 text-center text-xs text-black shadow-sm h-5; 
  }
  .label-orange-bg {
    @apply flex justify-center items-center bg-orange-100 border border-orange-300 px-2 py-1 text-center text-xs text-black shadow-sm h-5; 
  }
  .form-label {
    @apply text-gray-900 text-xs hover:text-gray-600 mb-1 w-20 flex items-center;
  }
  .form-input-32 {
    @apply rounded-sm shadow-sm placeholder:text-gray-400 text-xs border border-gray-300 w-32;
  }
  .form-input-48 {
    @apply rounded-sm shadow-sm placeholder:text-gray-400 text-xs border border-gray-300 w-48;
  }
  .form-input-full {
    @apply rounded-sm shadow-sm placeholder:text-gray-400 text-xs  border border-gray-900 w-full h-5;
  }
  .form-input-no-border {
    @apply flex-grow bg-transparent italic text-xs;
  }
  .form-input-full-bg-blue {
    @apply rounded-sm placeholder:text-gray-400 text-xs  border border-blue-300 bg-blue-100 w-full;
  }
  .form-input-required-32 {
    @apply rounded-sm placeholder:text-gray-400 text-xs border border-red-500 w-32;
  }
  .form-input-required-48 {
    @apply rounded-sm placeholder:text-gray-400 text-xs border border-red-500 w-48;
  }
  .form-textarea-h48 {
    @apply rounded-sm placeholder:text-gray-400 text-xs  border border-red-500 h-full;
  }
  .btn-svg {
    @apply flex justify-center items-center block rounded border px-2 py-1 text-center text-xs font-semibold text-black shadow-sm;
  }
  .note-bg-red {
    @apply flex items-center justify-center text-xs text-center font-semibold border border-red-500  bg-red-100 w-64;
  }
  .note-bg-orange {
    @apply flex block rounded-sm bg-orange-100 border border-orange-600 px-3 py-1 text-center text-xs font-semibold text-black shadow-sm  items-center;
  }
  .note-bg-green {
    @apply flex block rounded-sm bg-green-100 border border-green-600 px-3 py-1 text-center text-xs font-semibold text-black shadow-sm  items-center;
  }
  .sm-box-wrap {
    @apply border shadow-sm bg-gray-100 overflow-y-auto pb-2;
  }
  .sm-box-header-wrap {
    @apply flex items-center justify-between  bg-blue-100 h-10  mb-2  gap-2 px-2;
  }
  .sm-box-h2 {
    @apply flex justify-center items-center  text-center text-xs font-semibold text-gray-900;
  }
  .number-red-label {
    @apply text-xs  h-5  text-red-600 bg-transparent font-bold;
  }
  
  .modal-bg {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity;
  }
  .modal-outer-form-wrap {
    @apply fixed inset-0 z-10 w-screen overflow-y-auto;
  }
  .modal-form-wrap {
    @apply flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0;
  }
  .modal-inner-wrap {
    @apply relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-7xl sm:p-6;
  }
  .modal-header-wrap {
    @apply mx-auto flex h-12 w-full items-center justify-center rounded-sm bg-blue-100;
  }
  .modal-btn-wrap {
    @apply mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3;
  }
  .modal-h3 {
    @apply text-base font-semibold leading-6 text-gray-900;
  }
  .btn-indigo {
    @apply inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2;
  }
  .btn-transparent-wired {
    @apply mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0;
  }
  
  .jl-table-head {
    @apply text-left text-gray-900 text-xs font-semibold;
  }

  
}

/* JOB LINES */
tr.customTableTd td {
  font-size: 12px;
}
tr.customTableTd td:first-child, 
tr.customTableTd td:nth-child(2) {
  font-weight: bold;
  color: #cb0505;
}
tr.customTableTd td input {
  width: 100%;
}