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

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700&display=swap');
/*
// @import "flatpickr/dist/flatpickr";
*/

/*@import "alert";*/
.alert {
  @apply absolute top-4 right-8 bg-red-50 border-l-4 border-red-500 text-red-500 p-4 rounded shadow-lg z-50;
}

.notice {
  @apply absolute top-4 right-8 bg-teal-50 border-l-4 border-teal-500 text-teal-500 p-4 rounded shadow-lg z-50;
}

/*@import "button";*/
.btn {
  @apply inline-block justify-center py-2 px-4 border border-transparent cursor-pointer font-semibold rounded transition-colors duration-300 ease-in-out;
}

.btn-small {
  @apply inline-flex text-xs justify-center py-1 px-2 border border-transparent cursor-pointer font-semibold rounded transition-colors duration-300 ease-in-out;
}

.btn-outline {
  @apply inline-block bg-transparent hover:bg-primary text-primary font-semibold hover:text-white py-2 px-4 border border-primary hover:border-transparent rounded;
}

.btn-primary {
  @apply bg-primary hover:text-white hover:bg-primary-dark text-white;
}

.btn-gray {
  @apply bg-gray-400 hover:text-white hover:bg-gray-700 text-white;
}

.btn-gray-light {
  @apply bg-gray-100 hover:text-gray-500 hover:bg-gray-200 text-gray-400;
}

.btn-primary-darker {
  @apply bg-primary-darker hover:text-white hover:bg-primary-dark text-white;
}

.btn-black {
  @apply bg-gray-800 hover:text-white hover:bg-primary-dark text-white;
}

.btn-outline-black {
  @apply inline-flex items-center bg-transparent hover:text-primary-dark text-gray-800 font-semibold py-2 px-4 border border-gray-800 hover:border-primary-dark rounded;
}

.btn-warning {
  @apply bg-yellow-500 hover:text-white hover:bg-yellow-700 text-white;
}

.btn-danger {
  @apply bg-red-500 hover:text-white hover:bg-red-700 text-white;
}

.btn-icon {
  @apply bg-white text-gray-400 border-dashed border border-gray-400 hover:border-primary w-12 h-12 flex justify-center items-center rounded-full transition-colors duration-300 ease-in-out;
  border-width: 0.6px;
}


/*@import "card";*/
.card {
  @apply bg-white p-8;
}

.card-large {
  @apply bg-white p-4;
}

.card-primary {
  @apply border-primary border-2;
}

.card-border-top-bottom {
  @apply bg-white px-8 py-4 relative mb-10 border-t-2 border-b-2 border-gray-200 text-sm;
}

.card-border-top {
  @apply bg-white px-8 py-4 relative mb-10 border-t-2 border-gray-200 text-sm;
}

.badge-on-card {
  @apply absolute px-2 py-1 text-xs font-semibold bg-gray-200 rounded-full -top-4 left-2 text-gray-500;
}

.dashboard-card {
  @apply bg-white px-8 pt-8 pb-16;
}



/*@import "calendar";*/
.flatpickr-day.today {
  @apply border-primary hover:bg-primary hover:text-white hover:border-primary;
}

.flatpickr-day.selected {
  @apply bg-primary border-primary;
}

span.flatpickr-weekday {
  @apply font-semibold;
}

/*@import "container";*/
.main-container {
  @apply flex-grow py-8 w-full px-8 my-0 mx-auto;
}

@media (min-width: 640px) {
  .main-container {
    max-width: 512px;
  }
}

@media (min-width: 768px) {
  .main-container {
    max-width: 640px;
  }
}

@media (min-width: 1024px) {
  .main-container {
    max-width: 880px;
  }
}

@media (min-width: 1280px) {
  .main-container {
    max-width: 1136px;
  }
}

@media (min-width: 1536px) {
  .main-container {
    max-width: 1392px;
  }
}

.main-container-fullscreen {
  @apply flex-grow;
}



/*@import "display-preferences";*/
.ghost {
  @apply bg-gray-300;
}


/*@import "flux";*/
#flux #flux-filter .btn {
    @apply bg-gray-600 text-white hover:bg-primary text-xs;
}

#flux #flux-filter .btn.active {
    @apply bg-primary-dark;
}

#flux [data-item-flux-target=btnEventType] {
    @apply btn-small bg-white my-2;
}

#flux [data-item-flux-target=btnEventType].active,#flux [data-item-flux-target=btnEventType]:hover {
    @apply bg-primary;
}

#flux #context-selector {
    max-height: 180px
}

#flux #context-selector a {
    color: grey
}

#flux #context-selector .context-active a {
    @apply text-primary;
}

#flux #context-selector .context-active :not(a)>a {
    color: black;
}


/*@import "forms";*/
form input.appearance-textfield {
  appearance: textfield;
}

form input.disabled,
form select.disabled,
form textarea.disabled {
  @apply bg-gray-100 border-gray-100;
  cursor: default !important;
}

form .currency .input-group {
  @apply flex w-1/3 items-center;
}

form .currency input {
  @apply w-full;
}

form .currency .currency-symbol {
  @apply px-2;
}


/*@import "home";*/
.home-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 2.5rem;
}

.home-text {
  font-family: 'Nunito', sans-serif;
  font-weight: 200;
}

.hero-section {
  height: 80vh;
  padding-top: 6rem;
  margin-top: 3rem;
  background-image: url("/assets/hero-img-a7f7acfa.svg");
  background-repeat: no-repeat;
  background-position: right 25%;
  background-size: contain;
}

.hero-section .home-cta {
  margin-top: 4rem;
}

.hero-section .home-text {
  font-size: 1.2rem;
}

.home-navbar {
  z-index: 2;
  background-color: white;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
}

.home-navbar .main-container {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.home-navbar--content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home-navbar--menu {
  display: flex;
  align-items: center;
}


.section-values {
  background-image: url("/assets/home-section-primary-3a6b2229.svg");
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: -4rem;
  height: 110vh;
  display: flex;
  align-items: center;
}

.value-cards {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.value-card {
  position: relative;
  background-color: white;
  padding: 4rem 1rem 2rem 1rem;
  border-radius: 1rem;
  width: 28%;
  font-weight: 200;
  text-align: center;
}

.value-card .home-text {
  font-size: 1.1rem;
}

.value-img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.section-details h2 {
  font-size: 2rem;
  margin-bottom: 3rem;
}

.section-details h3 {
  font-size: 1.5rem;
}

.section-details--content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3rem;
}

.section-details--img {
  width: 50%;
}

.section-details--text {
  width: 45%;
}

.section-contact {
  padding: 5rem 0;
  color: white;
}

.section-contact h3 {
  font-size: 1.5rem;
  color: white;
}




/*@import "input";*/
.checkbox-status {
  position: absolute;
  transform: scale(0);
}

label.ipm-badge {
  cursor: pointer;
  filter: grayscale(0);
}

.checkbox-status + .checked-badge {
  position: absolute;
  transform: scale(0);
  z-index: 1;
  top: -4px;
  right: 8px;
  width: 16px;
  height: 16px;
  background-color: #5EEAD4;
  padding: 4px;
  border-radius: 50%;
  font-size: 8px;
  transition: all .2s ease;
}

.checkbox-status:checked + .checked-badge {
  transform: scale(1);
}

.checkbox-status:checked ~ label.ipm-badge {
  filter: grayscale(1);
}



/*@import "modal";*/
.modal {
  @apply fixed inset-0 z-50 hidden items-center justify-center w-screen h-screen bg-black bg-opacity-50;
}

.modal.modal-open {
  display: flex;
}


/*@import "pages/convert_to_order_form";*/
#convert_to_order_form #radios_order  input {
  display: none;
}

#convert_to_order_form #radios_order input:checked + label {
  background: yellow;
}



/*@import "select2";*/
.select2-container--default .select2-selection--single {
  height: 2.5rem !important;
  border: 1px solid #E5E7EB !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #7209b7 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: 0.25rem;
}

input[type=search]:focus-visible {
  outline: 1px solid #7209b7;
  border: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 6px !important;
}

.no-search .select2-search {
  display:none;
}

.select-action .select2-container--default {
  grid-column: 4 / span 6 !important;
}


/*@import "sidebar";*/
#sidebar {
  @apply sticky top-0 z-50 flex-shrink-0 w-20 h-screen bg-gray-800 shadow-md transition-all ease-out duration-500;
}

#sidebar .description {
  @apply text-white w-0 opacity-0 transition-opacity ease-in duration-200 absolute left-20 whitespace-nowrap;
}

#sidebar li {
  @apply h-14 relative;
}

#sidebar .icon {
  @apply w-20 text-center absolute left-0;
}

#sidebar .active {
  @apply border-r-4 border-primary-lighter mr-1;
}


.sidebar-header {
  @apply flex items-center p-4 mb-12 mt-6;
}

.sidebar-header h3 {
  @apply my-0 mr-8 text-white;
}

.sidebar-header .ipm-logo {
  @apply w-10 mr-2;
}

#sidebar:hover {
  @apply w-52;
}

#sidebar:hover .description {
  @apply opacity-100 w-full;
}

#sidebar:hover li {
  @apply flex;
}


/*@import "status";*/
.drop-down-section li:hover {
    color: #fff
}

.drop-down-section li.status-canceled:hover {
    background: #e9cdce;
    color: #763536
}

.drop-down-section li.status-convert:hover {
    background: #fee8ff;
    color: #e033ff
}

.drop-down-section li.status-costing:hover {
    background: #f1e8ff;
    color: #8533ff
}

.drop-down-section li.status-delivered:hover {
    background: #d4f3f3;
    color: #1c687e
}

.drop-down-section li.status-editing:hover {
    background: #f1e8ff;
    color: #8533ff
}

.drop-down-section li.status-lost:hover {
    background: #ff8f8f;
    color: #ff1b1b
}

.drop-down-section li.status-manufacturing:hover {
    background: #f4e7e7;
    color: #7d5a5a
}

.drop-down-section li.status-preparation:hover {
    background: #fde9e9;
    color: #f254b3
}

.drop-down-section li.status-saved:hover {
    background: #e6f5ff;
    color: #0369a1
}

.drop-down-section li.status-sent:hover {
    background: #d4f3f3;
    color: #1c687e
}

.drop-down-section li.status-waiting_signature:hover {
    background: #fff3d8;
    color: #ab7500
}

.drop-down-section li.status-pending:hover {
    background: #e6f5ff;
    color: #0369a1
}

.drop-down-section li.status-archived:hover {
    background: #e9cdce;
    color: #763536
}

.drop-down-section .bullet-point.bullet-point-convert {
    background-color: #fee8ff
}

.drop-down-section .bullet-point.bullet-point-costing {
    background-color: #f1e8ff
}

.drop-down-section .bullet-point.bullet-point-delivered {
    background-color: #d4f3f3
}

.drop-down-section .bullet-point.bullet-point-editing {
    background-color: #f1e8ff
}

.drop-down-section .bullet-point.bullet-point-lost {
    background-color: #ff8f8f
}

.drop-down-section .bullet-point.bullet-point-manufacturing {
    background-color: #f4e7e7
}

.drop-down-section .bullet-point.bullet-point-preparation {
    background-color: #fde9e9
}

.drop-down-section .bullet-point.bullet-point-saved {
    background-color: #e6f5ff
}

.drop-down-section .bullet-point.bullet-point-sent {
    background-color: #d4f3f3
}

.drop-down-section .bullet-point.bullet-point-canceled {
    background-color: #e9cdce
}

.drop-down-section .bullet-point.bullet-point-waiting_signature {
    background-color: #fff3d8
}

.drop-down-section .bullet-point.bullet-point-pending {
    background-color: #e6f5ff
}

.drop-down-section .bullet-point.bullet-point-archived {
    background-color: #e9cdce
}

.ipm-badge-status-canceled {
    color: #763536;
    background-color: #e9cdce;
    border-color: #e9cdce
}

.ipm-badge-status-convert {
    color: #e033ff;
    background-color: #fee8ff;
    border-color: #fee8ff
}

.ipm-badge-status-costing {
    color: #8533ff;
    background-color: #f1e8ff;
    border-color: #f1e8ff
}

.ipm-badge-status-delivered {
    color: #1c687e;
    background-color: #d4f3f3;
    border-color: #d4f3f3
}

.ipm-badge-status-editing {
    color: #8533ff;
    background-color: #f1e8ff;
    border-color: #f1e8ff
}

.ipm-badge-status-lost {
    color: #ff1b1b;
    background-color: #ff8f8f;
    border-color: #ff8f8f
}

.ipm-badge-status-manufacturing {
    color: #7d5a5a;
    background-color: #f4e7e7;
    border-color: #f4e7e7
}

.ipm-badge-status-preparation {
    color: #f254b3;
    background-color: #fde9e9;
    border-color: #fde9e9
}

.ipm-badge-status-saved {
    color: #0369a1;
    background-color: #e6f5ff;
    border-color: #e6f5ff
}

.ipm-badge-status-sent {
    color: #1c687e;
    background-color: #d4f3f3;
    border-color: #d4f3f3
}

.ipm-badge-status-waiting_signature {
    color: #ab7500;
    background-color: #fff3d8;
    border-color: #fff3d8
}

.ipm-badge-status-pending {
    color: #0369a1;
    background-color: #e6f5ff;
    border-color: #e6f5ff
}

.ipm-badge-status-archived {
    color: #763536;
    background-color: #e9cdce;
    border-color: #e9cdce
}



/*@import "tables";*/
.table-generic {
  @apply w-full table-auto border-collapse;
}

.td-generic {
  @apply border-b border-gray-300 px-3 py-4 text-sm;
}

.th-generic {
  @apply font-light bg-gray-50 uppercase border-b border-t border-gray-300 text-xs text-center px-3 py-2;
}

.th-clickable {
  @apply bg-white;
}

.th-clickable tbody tr:hover {
  @apply bg-gray-50;
}

.th-clickable tbody td a.tr-link {
  @apply text-gray-800;
}






@layer base {
  a {
    @apply text-gray-800 hover:text-primary transition-colors duration-300 ease-in-out;
  }

  input::file-selector-button {
    @apply border-none cursor-pointer bg-gray-200 rounded shadow py-1 px-2;
  }
}

@layer components {
  .notification-list {
    @apply overflow-scroll p-2 absolute bg-white border border-primary-lighter shadow-lg rounded-lg text-xs w-72;
    top: 4.3rem;
    right: 0rem;
    max-height: calc(100vh - 6rem);

    li {
      @apply border-b;
    }
  }

  .picture-thumbnail {
    @apply block h-24 transform hover:scale-300 hover:z-20 transition-transform duration-300  ease-in-out;
  }
}

.ipm-badge {
  @apply tracking-wider whitespace-nowrap rounded-lg border font-semibold inline-flex items-center justify-center;
  padding: 0 1em;
  font-size: 0.8em;
}

.ipm-badge-rounded {
  @apply rounded-full border text-xs font-semibold inline-flex items-center justify-center w-8 h-8;
}

.td-sub-status {
  .ipm-badge-rounded:not(:first-child) {
    @apply -m-2;
  }
}

.ipm-badge-status-active {
  @apply text-teal-500 bg-teal-50 border-teal-500;
}

.ipm-badge-status-inactive {
  @apply text-gray-700 bg-gray-200 border-gray-300;
}

.label-waiting-client-information{
  @apply text-white bg-rose-500 border-rose-500;
}

.label-waiting-supplier-information{
  @apply text-white bg-pink-800 border-pink-800;
}

.td-sub-status .ipm-badge-status-rounded {
  margin-right: -0.4em;
}

@keyframes highlight {
  from {
    background: rgb(248, 83, 42);
  }
}

.highlight {
  animation-name: highlight;
  animation-duration: 3s;
}