@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

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

@layer base {
  body {
    @apply relative z-1 bg-whiten font-satoshi text-base font-normal text-body;
  }
}

@layer components {
}
.btn.btn-disabled,
.btn[disabled] {
  cursor: not-allowed;
  background-color: #f3f4f6;
  color: #000000;
  border: 1px solid #f3f4f6;
}

@layer utilities {
  /* Chrome, Safari and Opera */
  .no-scrollbar::webkitscrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .chat-height {
    @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
  }

  .inbox-height {
    @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
  }
}

@keyframes pulse-green {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.4);
  }
}

/* third-party libraries CSS */

.tableCheckbox:checked ~ div span {
  @apply opacity-100;
}

.tableCheckbox:checked ~ div {
  @apply border-primary bg-primary;
}

.apexcharts-legend-text {
  @apply !text-body dark:!text-bodydark;
}

.apexcharts-text {
  @apply !fill-body dark:!fill-bodydark;
}

.apexcharts-xcrosshairs {
  @apply !fill-stroke dark:!fill-strokedark;
}

.apexcharts-gridline {
  @apply !stroke-stroke dark:!stroke-strokedark;
}

.apexcharts-series.apexcharts-pie-series path {
  @apply dark:!stroke-transparent;
}

.apexcharts-legend-series {
  @apply !inline-flex gap-1.5;
}

.apexcharts-tooltip.apexcharts-theme-light {
  @apply dark:!border-strokedark dark:!bg-boxdark;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  @apply dark:!border-strokedark dark:!bg-meta-4;
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  @apply dark:!border-meta-4 dark:!bg-meta-4 dark:!text-bodydark1;
}

.apexcharts-xaxistooltip-bottom:after {
  @apply !border-b-gray dark:!border-b-meta-4;
}

.apexcharts-xaxistooltip-bottom:before {
  @apply !border-b-gray dark:!border-b-meta-4;
}

.apexcharts-xaxistooltip-bottom {
  @apply !rounded !border-none !bg-gray !text-xs !font-medium !text-black dark:!text-white;
}

.apexcharts-tooltip-series-group {
  @apply !pl-1.5;
}

.flatpickr-wrapper {
  @apply w-full;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  @apply !fill-primary;
}

.flatpickr-calendar.arrowTop:before {
  @apply dark:!border-b-boxdark;
}

.flatpickr-calendar.arrowTop:after {
  @apply dark:!border-b-boxdark;
}

.flatpickr-calendar {
  @apply !p-0 dark:!bg-boxdark dark:!text-bodydark dark:!shadow-8 2xsm:!w-auto 2xsm:!p-4;
}

.flatpickr-day {
  @apply dark:!text-bodydark dark:hover:!border-meta-4 dark:hover:!bg-meta-4;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  @apply !top-7 dark:!fill-white dark:!text-white;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  @apply !left-7;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  @apply !right-7;
}

span.flatpickr-weekday,
.flatpickr-months .flatpickr-month {
  @apply dark:!fill-white dark:!text-white;
}

.flatpickr-day.inRange {
  box-shadow:
    -5px 0 0 #f3f4f6,
    5px 0 0 #f3f4f6 !important;
  @apply dark:!shadow-7;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  @apply !border-[#F3F4F6] !bg-[#F3F4F6] dark:!border-meta-4 dark:!bg-meta-4;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.selected,
.flatpickr-day.endRange {
  @apply dark:!text-white;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #3c50e0;
  @apply !border-primary !bg-primary hover:!border-primary hover:!bg-primary;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
  box-shadow: -10px 0 0 #3c50e0;
}

.map-btn .jvm-zoom-btn {
  @apply flex h-7.5 w-7.5 items-center justify-center rounded border border-stroke bg-white px-0 pb-0.5 pt-0 text-2xl leading-none text-body hover:border-primary hover:bg-primary hover:text-white dark:border-strokedark dark:bg-meta-4 dark:text-bodydark dark:hover:border-primary dark:hover:bg-primary dark:hover:text-white;
}

.mapOne .jvm-zoom-btn {
  @apply !bottom-0 !left-auto !top-auto;
}

.mapOne .jvm-zoom-btn.jvm-zoomin {
  @apply !right-10;
}

.mapOne .jvm-zoom-btn.jvm-zoomout {
  @apply !right-0;
}

.taskCheckbox:checked ~ .box span {
  @apply opacity-100;
}

.taskCheckbox:checked ~ p {
  @apply line-through;
}

.taskCheckbox:checked ~ .box {
  @apply border-primary bg-primary dark:border-primary;
}

.custom-input-date::-webkit-calendar-picker-indicator {
  background: transparent;
}

input[type="search"]::-webkit-search-cancel-button {
  @apply appearance-none;
}

.custom-input-date::-webkit-calendar-picker-indicator {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

[x-cloak] {
  display: none !important;
}
.grow > div {
  padding: 5px;
  border-radius: 5px !important;
  border: 0.5px solid #acacac;
  box-shadow: 3px 3px 10px 2px #0000001a !important;
}

input {
  outline: 0;
}
.input-container input {
  box-sizing: border-box;
  outline: 0;
  padding: 0.75rem;
  position: relative;
  width: 100%;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  /* filter: invert(0.8); */
}
/* --------------------
     Custom CSS 
-------------------- */

/* Background Color */
.bg-default-bfri {
  background-color: #01a6e6;
}

.bg-default-purple {
  background-color: #2e3192;
}

.bg-default-ash {
  background-color: #cccccc;
}

.bg-default-paste {
  background-color: #01a89e;
}

.bg-button-bfri {
  background-color: #0174a3;
}

.bg-menu-card {
  background-color: #f3fce7;
}

/* Text Color */
.text-menu-card {
  color: #907351;
}

.text-default-yellow {
  color: #e5f51f;
}

.text-default-theme {
  color: #01a6e6;
}

/* Making card img dynamic */
.dynamic-img {
  width: 50px;
  height: 50px;
}

/* Border Radius */
.cus-border-rad-4xl {
  border-radius: 2.5rem 2.5rem 0 0;
}

.cus-border-b-rad-4xl {
  border-radius: 0 0 2.5rem 2.5rem;
}

/* Style the calendar icon for dark mode */
.input-date-dark::-webkit-calendar-picker-indicator {
  filter: invert(0);
}

.tab-custom .tab-active {
  border-color: oklch(0.92 0 0) !important;
  background-color: rgb(255, 255, 255) !important;
  color: black;
  border-bottom: none !important;
  /* border-radius: 60px 40px 20px 10px / 21px 49px 27px 7px; */
  /* border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important; */
}

/* reduce text size in mobile breakdown */
@media (max-width: 768px) {
  .tab-custom .tab {
    font-size: 10px !important;
    padding: 2px 2px !important;
  }
}

/* Custom font size class */
.text-xxs {
  font-size: 0.65rem; /* 10.4 px */
  line-height: 0.75rem; /* 12px */
}

.tab {
  border-bottom: 1px solid oklch(0.92 0 0) !important;
  position: static !important;
}

.table-headline {
  font-size: 20px;
  font-weight: 500;
  color: #283646;
}

.custom-col {
  /* border-top: 1px solid #eaecf0;
  border-right: 1px solid #eaecf0; */
  /* background: #f9fafb; */
  color: #919191;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
  letter-spacing: -0.56px;
}

.application-info-table {
  width: 100%;
}
.application-info-table th,
.application-info-table td {
  font-size: 14px;
  border: 0.5px solid #cccccc;
  padding: 12px 7px 12px 4px;
  height: 48px;
}
.table-key {
  color: #1c274d;
}

hr {
  color: #d9d9d9;
}
.toster-index {
  z-index: -100000000 !important;
}

.application-info-table-two {
  width: 100%;
  height: 100%;
}
.application-info-table-two th,
.application-info-table-two td {
  font-size: 13px;
  border: 0.5px solid #a3a3a3;
  padding: 10px 6px 10px 8.5px;
  height: 48px;
  white-space: nowrap;
}
/* .application-info-table-two td {
  font-size: 16px;
  border: 2px solid #eef2f5;
  padding: 10px 6px 10px 8.5px;
  height: 48px;
  white-space: nowrap;
} */

.blue-border {
  border: 1px solid #0e50ad !important;
}

.no-border {
  border: none !important;
  padding: 6px;
  background: white;
}

/*--------------
    otp page
---------------*/

.otp-input {
  width: 52px;
  height: 50px;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  margin: 0 5px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background: #f9f9f9;
  outline: none;
}

.otp-area input[type="number"]:focus {
  border: 2px solid #4a6f9a;
}

/* Acknowledgement Canvus */
.ackknowledgement-canvus {
  width: 800px;
  background-color: white;
  /* border: 1px solid black; */
}

@media (max-width: 640px) {
  /* Small screens */
  h2 {
    display: block;
    max-width: 100%;
    text-align: center;
    word-wrap: break-word; /* Ensures text wrap */
  }

  h2:has(br), /* If text wraps */
  h2:has(span) {
    /* (Alternative if <br> doesn't exist) */
    ~ .dynamic-img {
      width: 40px !important;
      height: 40px !important;
    }
  }
}

/*---------------------------
    prescription print
-----------------------------*/
@media print {
  @page {
    size: A4;
    margin: 0;
  }

  .print-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    width: 210mm;
    margin: 0 auto;

    page-break-inside: avoid;
  }

  html,
  body {
    height: 100%;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide elements that shouldn't print */
  .print\:hidden {
    display: none !important;
  }

  /* Remove shadows and backgrounds for print */
  .shadow-md {
    box-shadow: none !important;
  }

  /* Ensure A4 width */
  .max-w-\[210mm\] {
    max-width: 210mm !important;
    width: 210mm !important;
    margin: 0 auto;
  }

  /* Ensure green header/footer backgrounds print */
  .bg-emerald-600,
  .bg-gradient-to-r {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Ensure border colors print */
  .border-emerald-600,
  .border-emerald-200 {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Force 2-column layout for medicines on print */
  .print\:columns-2 {
    column-count: 2 !important;
    column-gap: 0.75rem !important;
  }

  /* Remove scrolling for print */
  .overflow-y-auto {
    overflow: visible !important;
    max-height: none !important;
  }

  /* Ensure medicine cards don't break across columns */
  .break-inside-avoid {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Ensure proper page breaks */
  .min-h-screen {
    min-height: auto !important;
  }
}