@import "shadcn.css";
@import "tom-select.css";
@tailwind base;
@tailwind components;
@tailwind utilities;





@layer components {
  .scrollbar-thin{
   scrollbar-width: thin;
  }
  .bg-custom-gradient {
   @apply bg-gradient-to-r from-teal-50 to-cyan-50;
  }
  .bg-login {
   background-image: url("bg-login1.png");
   background-size: cover;
   background-position: center;
  }
  
  .badge-outline {
    @apply border rounded-full px-2 py-1 text-xs font-medium;
  }
  input:focus{
   @apply !outline-none !ring-0 !ring-blue-500;
  }
    /* Add your Header & Sidebar Css here */
 .expanded {
   @apply w-64 hidden md:block;
 }
 .mini {
   @apply min-w-64 md:min-w-10;
 }
 .mini:hover {
   @apply  min-w-64 ;
 }
 .menu-text{
   @apply text-sm ;
 }
 #main-wrapper{
   @apply transition-all duration-300 md:ml-[260px];
 }
 .mini {
   @apply transition-all duration-300;
 }
 #sideBar nav{
   @apply overflow-y-auto bg-white  pb-12;
   height: calc(100vh - 85px);
   scrollbar-width: thin;
 }
 #sideBar nav svg {
   @apply w-6 h-6 bg-brand/70 text-white rounded-sm p-1;
 }
 #sideBar nav li a{
  @apply !font-medium;
 }
 #sideBar nav li a:hover svg, #sideBar nav li:hover svg{
  @apply  bg-brand-light text-white;
 }
 #sideBar.mini svg{
   @apply w-8 h-8;
 }
 #sideBar.mini:hover svg{
   @apply w-5 h-5  ;
 }
 .breadcrumbs a {
   @apply text-brand;
 }
 .mini .menu-text {
 @apply md:hidden;
 }
 .mini .menu :where(li>.menu-dropdown-toggle):after, .mini  .menu :where(li>details>summary):after {
   @apply hidden;
   }
 .mini:hover .menu-text {
   @apply  block ;
 }
 .mini:hover .menu :where(li>.menu-dropdown-toggle):after, .mini:hover  .menu :where(li>details>summary):after {
   @apply block;
   }
 
   .menu :where(li:not(.menu-title)>details>summary:not(.menu-title)) {
     @apply pl-2
   }
   .active svg{
     @apply text-brand font-medium !bg-brand;
   }
   .active span{
    @apply text-brand font-medium ;
   }
   .active .sub-menu.active{
     @apply text-brand bg-brand/10;
   }
   .active:hover .sub-menu.active{
    @apply text-white bg-brand;
  }
   .menu li>:not(ul,.menu-title,details,.btn).active, .menu li>:not(ul,.menu-title,details,.btn):active, .menu li>details>summary:active {
     @apply text-brand bg-brand/10;
   }
   
   table thead th  {
     @apply whitespace-nowrap  py-2 !h-auto border border-gray-200 text-xs bg-gray-50 ;
   }
   table thead tr  {
     @apply !border-b-2 border-brand-light ;
   }
   table tr, table td  {
    @apply border border-gray-200 !text-sm !h-auto !py-2;
  }
   table th:first-child, table td:first-child {
     @apply rounded-s-lg;
   }
   table th:last-child, table td:last-child {
     @apply rounded-e-lg;
   }
   table tbody tr:hover{
     @apply shadow-lg shadow-indigo-500/20
   }
   .table-responsive {
     @apply overflow-x-auto;
     scrollbar-width: thin;
   }
   .nested-tableheader th{
     @apply rounded-none border border-gray-200 border-b-0 text-xs p-2 text-center h-auto;
   }
   table .nested-tableheader  th:first-child, table .nested-tableheader  th:last-child {
     @apply rounded-none;
   }
   table  .nested-tablemain th{
     @apply  border-r border-gray-200  ;
   }
   table  .nested-tablemain th:last-child {
     @apply  border-r-0;
   }
 
 /* -- Accordion Fix-- */
 
 .search-height-fix{
   @apply rounded-lg  border-gray-100 overflow-y-scroll ;
   height: calc(100vh - 200px);
   scrollbar-width: thin;
 
 }
 
 .ts-saveSearch .ts-control{
 
   @apply  !p-4 rounded-lg !text-sm !border !border-gray-100;
 }
 
 .ts-saveSearch .ts-dropdown.single{
 
   @apply  !border !border-gray-300 !rounded-b-lg;
 }
 .ts-saveSearch .ts-dropdown.single .option{
 
   @apply  !p-2 !text-sm;
 }
 .ts-saveSearch .ts-dropdown.single .option.selected.active{
   @apply bg-primary text-white;
 }
 .ts-saveSearch .ts-dropdown.single .option:hover{
   @apply bg-brand/10 text-brand;
 }
 .ts-saveSearch .ts-control, .ts-saveSearch .ts-control input, .ts-dropdown {
   color: initial;
   @apply  !text-sm;
 }
 .ts-control .item {
   @apply bg-brand/10 text-brand font-medium px-1 border border-brand; 
 }
 .ts-control input {
   @apply  !text-gray-500;
 }
 button, input, optgroup, select, textarea {
   @apply  text-sm;
 }
 
 .ts-wrapper.plugin-remove_button .item .remove {
   @apply py-0.5 px-1;
 }
 .remove {
   @apply  !text-red-500 bg-red-100 ;
 }
 .ts-wrapper.plugin-remove_button .item .remove:hover {
   @apply   !bg-red-500 !text-white;
 }
 
 .ts-wrapper.multi .ts-control .item {
   @apply  !bg-brand/10 !text-brand !border !border-brand;
 }
 .menu :where(li>.menu-dropdown-toggle):after, .menu :where(li>details>summary):after {
   @apply opacity-30;
 }
 .ts-wrapper.multi .item{
   @apply  !hidden;
 }
 .ts-n-items.active {
   @apply  !bg-brand/10 !text-brand !border !border-brand !px-1 flex items-center;
 
 }
 .plugin-dropdown_input.focus.dropdown-active .ts-control{
   @apply !border-0;
 }
 .ts-dropdown-content .option {
   @apply  hover:bg-brand/10 hover:text-brand !text-sm;
 }
 .ts-dropdown-content .option.active {
   @apply  bg-brand/10 !text-brand;
 }
 
 /* -- Accordion Fix-- */
 /* .st-accordion__icon--opened {f
   @apply text-white bg-gray-900 p-0 font-medium rounded-t-md ;
 } */
 .drop-accordion-fix .st-accordion__icon--opened {
   @apply !text-brand ;
 }
 .drop-accordion-fix .st-accordion h3 a  {
    @apply text-sm !p-0 text-gray-800;
 }
 .drop-accordion-fix.drop-accordion-fix-stories .st-accordion h3 a  {
  @apply no-underline	;
}
 .dropdown-wrapper .bg-popover{
  @apply !w-96 overflow-y-auto ;
  max-height: calc(100vh -300px) ;
 }
 .drop-accordion-fix .st-accordion {
  @apply  !border-0 ;
 }
 .drop-accordion-fix label {
  @apply !text-gray-500 !mb-3 !text-xs;
 }
 .st-accordion .st-accordion__content.st-accordion__content--visible {
  @apply !overflow-visible !p-0 !border-0 ;
 }
  /* .st-accordion  [data-state="open"] {
  @apply !transition-none !duration-0;
} */

 .customDtp{
   @apply  relative text-gray-600;
 }
 
 .customDtp input::-webkit-calendar-picker-indicator{
   opacity:1;
   @apply  absolute right-0 py-3.5 px-4 cursor-pointer rounded-e-lg bg-brand/10 hover:bg-brand/10;
 }
 .fixed-height {
   @apply !h-[calc(100vh-80px)] !overflow-x-hidden  scroll-smooth ;
   scrollbar-width: thin;
  
 }
 .dialog-fixed-height {
   @apply max-h-[calc(100vh-210px)] overflow-x-hidden rounded-lg scroll-smooth pe-4 overflow-y-auto;
   scrollbar-width: thin;
 }
 section {
   min-height: 100vh;
 }
 .scroll-fix {
   display: block;
   margin-top: -60px;
   padding-top: 60px;
   @apply scroll-smooth;
 }
 .scrolled{
   @apply fixed top-[60px] w-full h-[calc(100vh-80px)]  overflow-x-auto;
   scrollbar-width: thin;
 }
 
 
 
 
 
 .active {
   @apply bg-brand/5 !text-white ; 
 }
 
 .tab-button {
  @apply px-4 py-2 text-sm font-medium text-gray-400  rounded-lg hover:bg-brand/5 focus:outline-none border border-gray-200;
}

.active-tab {
  @apply text-gray-500 border border-brand ;
}

/* badges */
 .badge-status.badge-default{
 @apply bg-slate-100 border-slate-500 hover:bg-slate-100 text-slate-500 badge-outline text-xs   font-medium !px-3;
}
.badge-new {
  @apply border-green-500 !text-green-500 badge-outline text-[10px]  font-medium !bg-green-200;
}
.badge-status.new, .badge-status.booked, .badge-status.booking-done, .badge-status.confirmed, .badge-status.eoi-done {
  @apply bg-green-100 border-green-500 hover:bg-green-100 text-green-500 badge-outline text-xs   font-medium !px-3;
  }
.badge-status.visited-hot, .badge-status.visited-following,.badge-status.revisit-planned {
@apply bg-sky-100 border-sky-500 hover:bg-sky-100 text-sky-500 badge-outline text-xs  font-medium !px-3;
}  

.badge-status.attempted-to-contact, .badge-status.attempted {
@apply bg-orange-100 border-orange-500 hover:bg-orange-100 text-orange-500 badge-outline text-xs  font-medium !px-3;
}
.badge-status.following, .badge-status.follow-up, .badge-status.interested, .badge-status.meeting-scheduled{
  @apply bg-purple-100 border-purple-500 hover:bg-purple-100 text-purple-500 badge-outline text-xs  font-medium !px-3;
}
.badge-status.warm {
  @apply bg-emerald-100 border-emerald-500 hover:bg-emerald-100 text-emerald-500 badge-outline text-xs  font-medium !px-3;
}
.badge-status.hot {
  @apply bg-red-100 border-red-500 hover:bg-red-100 text-red-500 badge-outline text-xs  font-medium !px-3;
}
.badge-status.very-hot {
  @apply bg-red-200 border-red-600 hover:bg-red-200 text-red-600 badge-outline text-xs  font-medium !px-3;
}
.badge-status.site-visit-planned, .badge-status.site-visit-confirmed, .badge-status.site-visit-done,  .badge-status.site-visit-proposed  {
  @apply bg-teal-100 border-teal-500 hover:bg-teal-100 text-teal-500 badge-outline text-xs  font-medium !px-3;
}

.badge-status.active-cp, .badge-status.activity-commenced, .badge-status.activity-planned{
  @apply bg-green-100 border-green-500 hover:bg-green-100 text-green-500 badge-outline text-xs  font-medium !px-3;
}
.badge-status.activity-closed {
  @apply bg-gray-100 border-gray-300 hover:bg-gray-100 text-gray-500 badge-outline text-xs  font-medium !px-3;
}

.badge-status.blacklisted, .badge-status.dnd, .badge-status.lost, .badge-status.cancelled, .badge-status.not-attending, .badge-status.not-interested, .badge-status.not-picked, .badge-status.not-responding{
  @apply bg-gray-100 border-gray-300 hover:bg-gray-100 text-gray-500 badge-outline text-xs  font-medium !px-3;
}
.badge-status.call-back-today, .badge-status.cheque-picked, .badge-status.qualified, .badge-status.reconfirmed, .badge-status.ringing {
  @apply bg-blue-100 border-blue-500 hover:bg-blue-100 text-blue-500 badge-outline text-xs  font-medium !px-3;
}
.badge-status.work-in-progress, .badge-status.yet-to-confirm, .badge-status.cold, .badge-status.broker{
  @apply bg-pink-100 border-pink-500 hover:bg-pink-100 text-pink-500 badge-outline text-xs  font-medium !px-3;
}


/* Sources */
.badge-source.badge-default {
  @apply border-teal-500 text-white bg-teal-500  text-xs  hover:bg-teal-500;
}
.badge-source.website {
  @apply border-blue-500 text-white bg-blue-500  text-xs  hover:bg-blue-500;
}
.badge-source.incoming-call {
  @apply border-green-500 text-white bg-green-500  text-xs  hover:bg-green-500;
}
.badge-source.company {
  @apply border-teal-500 text-white bg-teal-500  text-xs  hover:bg-teal-500;
}
.badge-source.walkin {
  @apply border-cyan-500 text-white bg-cyan-500  text-xs  hover:bg-cyan-500;
}
.badge-source.referral {
  @apply border-indigo-500 text-white bg-indigo-500  text-xs  hover:bg-indigo-500;
}
.badge-source.sms {
  @apply border-amber-500 text-white bg-amber-500  text-xs  hover:bg-amber-500;
}
.badge-source.mailer {
  @apply border-yellow-500 text-white bg-yellow-500  text-xs  hover:bg-yellow-500;
}

.badge-source.hoarding {
  @apply border-lime-500 text-white bg-lime-500  text-xs  hover:bg-lime-500;
}

.badge-source.others {
  @apply border-slate-500 text-white bg-slate-500  text-xs  hover:bg-slate-500;
}
.badge-source.campaign {
  @apply border-emerald-500 text-white bg-emerald-500  text-xs  hover:bg-emerald-500;
}
.badge-source.callin {
  @apply border-green-500 text-white bg-green-500  text-xs  hover:bg-green-500;
}
.badge-source.telecalling {
  @apply border-green-500 text-white bg-green-500  text-xs  hover:bg-green-500;
}
.badge-source.app {
  @apply border-violet-500 text-white bg-violet-500  text-xs  hover:bg-violet-500;
}
.badge-source.channel-partner {
  @apply border-fuchsia-500 text-white bg-fuchsia-500  text-xs  hover:bg-fuchsia-500;
}

.badge-source.reference {
  @apply border-sky-500 text-white bg-sky-500  text-xs  hover:bg-sky-500;
}


.badge-sources.direct {
  @apply border-rose-500 text-white bg-rose-500  text-xs  hover:bg-rose-500;
}


/* rating */
.star-5{
  @apply text-amber-500 bg-amber-50 border-amber-500;
}
.star-4{
  @apply text-green-500 bg-green-50 border-green-500;
}
.star-3{
  @apply text-blue-500 bg-blue-50 border-blue-500;
}
.star-2{
  @apply text-red-500 bg-red-50 border-red-500;
}
.star-1{
  @apply text-red-500 bg-red-50 border-red-500;
}

@keyframes slide-in-from-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slide-out-to-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes slide-in-from-left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slide-out-to-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.slide-in-from-right {
  animation: slide-in-from-right 0.5s ease-in-out;
}

.slide-out-to-right {
  animation: slide-out-to-right 0.5s ease-in-out;
}

.slide-in-from-left {
  animation: slide-in-from-left 0.5s ease-in-out;
}


 @media (max-width: 767px) {
   #sideBar.mini:hover svg{
     @apply w-8 h-8;
   }
 }
 }

[data-controller="amenities"] .tag-enter {
  opacity: 0;
  transform: translateY(-10px);
}
[data-controller="amenities"] .tag-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 200ms;
}
[data-controller="amenities"] .tag-exit {
  opacity: 1;
}
[data-controller="amenities"] .tag-exit-active {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 200ms;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

.transition-all {
  transition-property: all;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-out {
  transition-timing-function: ease-out;
}