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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 20 14.3% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;
    --primary: 24 85.1 60%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 207, 51%, 46.3%;
    /* --secondary: #1177bc; */
    --secondary-foreground: 24 9.8% 10%;
    --muted: 207, 51%, 46.3%;
    --muted-foreground: 25 5.3% 44.7%;
    --accent: 207, 51%, 46.3%;
    --accent-foreground: 24 9.8% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 60 9.1% 97.8%;
    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 24 85.1 60%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 20 14.3% 4.1%;
    --foreground: 60 9.1% 97.8%;
    --card: 20 14.3% 4.1%;
    --card-foreground: 60 9.1% 97.8%;
    --popover: 20 14.3% 4.1%;
    --popover-foreground: 60 9.1% 97.8%;
    --primary: 20.5 90.2% 48.2%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 12 6.5% 15.1%;
    --secondary-foreground: 60 9.1% 97.8%;
    --muted: 12 6.5% 15.1%;
    --muted-foreground: 24 5.4% 63.9%;
    --accent: 12 6.5% 15.1%;
    --accent-foreground: 60 9.1% 97.8%;
    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 60 9.1% 97.8%;
    --border: 12 6.5% 15.1%;
    --input: 12 6.5% 15.1%;
    --ring: 20.5 90.2% 48.2%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* third-party libraries CSS */

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

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

.apexcharts-legend-text {
  @apply !text-dark-5 dark:!text-dark-6;
}

.apexcharts-text {
  @apply !fill-dark-5 dark:!fill-dark-6;
}

.apexcharts-yaxis-label {
  @apply text-xs;
}

.apexcharts-xaxis-label {
  @apply text-body-sm font-medium;
}

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

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

.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 !rounded-[7px] !text-base !font-medium !text-dark !shadow-card-2 dark:!border-dark-3 dark:!bg-gray-dark dark:!text-white;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  @apply dark:!border-dark-3 dark:!bg-dark-2;
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  @apply dark:!border-dark-2 dark:!bg-dark-2 dark:!text-dark-3;
}

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

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

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

.apexcharts-tooltip-series-group {
  @apply !pb-px !pl-2.5 !pr-3.5;
}

.apexcharts-tooltip-series-group .apexcharts-tooltip-text {
  @apply !text-base !font-medium;
}

.apexcharts-datalabels-group .apexcharts-datalabel-label {
  @apply !fill-dark-5 dark:!fill-dark-6;
}

.apexcharts-datalabels-group .apexcharts-datalabel-value {
  @apply !fill-dark dark:!fill-white;
}

.custom-gradient-1 {
  background-image: linear-gradient(145deg, #eef 0%, #fff8fc 100%);
}