@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");

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

body {
  margin: 0;
  box-sizing: border-box;
  font-family: "Jost";
}

@layer base {
  :root {
    --primary: #068999;
    --primaryMain: #0796a7;
    --primaryLight: #2fa9b2;
    --primaryLighter: #5bbcc4;
    --primaryLightest: #86ced1;

    --lightGreen: #b3e0e5;
    --lightGreenLight: #dcf2f4;
    --lightGreenLightest: #f5ffff;

    --grey: #646c6d;
    --greyLight: #a4b1b2;
    --greyDisabled: #e0e2e2;
    --greyFill: #f3f3f3;
    --greyLine: #caceca;
    --greyLineLight: #f2f3f3;
    --greyStroke: #e7e7e7;
    --greySecondary: #828a8b;

    --blackMain: #011e21;
    --blackMain2: #243436;

    --accentWarning: #ff8d3e;
    --accentDanger: #fe2712;
    --accentRed: #ff0000;
    --accentGreen: #07bc0c;
    --accentCarrot: #ea6032;
    --accentBrown: #7f6c65;
    --accentBlue: #3978e3;
    --accentOrange: #ff9800;

    --mainPrimary1: #6b7280;
    --mainPrimary2: #666d92;
    --mainSecondary: #0796a7;
    --mainTertiary: #fff;

    --background1: #ffffff;
    --background2: #f4f5f7;
    --background3: #faf8fc;
    --background4: #0497a6;
    --background5: #27272b;

    --backgroundAdmin1: #1b1e2b;
    --backgroundAdmin2: #353a43;
    --backgroundAdmin3: #323541;

    --menuBackground: #324f51;
    --menuHover: #274445;

    --callGreyBg: #a4b1b2;
    --callInactiveBg: #7f6c65;

    --whatsapp: #25d366;

    --white: #ffffff;
    --whiteShade: #fdfdfd;
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --whatsapp: #25d366;
  }
}

@layer utilities {
  /* Date/Time input baseline styles */
  .dt-input::-webkit-datetime-edit {
    color: var(--blackMain);
  }
  .dt-input--empty::-webkit-datetime-edit {
    color: var(--greySecondary);
  }
  /* Firefox placeholder-like color when empty */
  input[type="date"].dt-input:invalid,
  input[type="time"].dt-input:invalid {
    color: var(--greySecondary);
  }
  /* Remove spinner for time in some browsers */
  input[type="time"].dt-input::-webkit-calendar-picker-indicator {
    opacity: 0;
  }
  input[type="date"].dt-input::-webkit-calendar-picker-indicator {
    opacity: 0;
  }
  /* Base Loader */
  /* HTML: <div class="loader"></div> */
  .loader {
    width: 25px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid #a4b1b2;
    border-right-color: #646c6d;
    animation: l2 1s infinite linear;
  }
  @keyframes l2 {
    to {
      transform: rotate(1turn);
    }
  }
  @keyframes l7 {
    33% {
      background-size:
        calc(100% / 3) 0%,
        calc(100% / 3) 100%,
        calc(100% / 3) 100%;
    }
    50% {
      background-size:
        calc(100% / 3) 100%,
        calc(100% / 3) 0%,
        calc(100% / 3) 100%;
    }
    66% {
      background-size:
        calc(100% / 3) 100%,
        calc(100% / 3) 100%,
        calc(100% / 3) 0%;
    }
  }

  /* Variants for button types */
  .loader-primary {
    border-right-color: #fff; /* White for primary */
  }
  .loader-secondary {
    border-right-color: #0796a7; /* Primary color for light */
  }
  .loader-gradient {
    border-right-color: #fff; /* White for gradient */
  }
  .loader-grey {
    border-right-color: #fff; /* Grey color for grey */
  }

  .button:hover {
    transform: scale(0.98);
  }
  .button:active {
    transform: scale(0.95);
  }

  .hover-group:hover .shrinkable {
    transform: scale(0.8);
    transition: transform 0.3s ease-in-out;
  }

  .hover-group:hover .shrinkable:hover {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
  }

  .hover-group:hover .shrinkable:hover figure {
    background-color: var(--lightGreenLight);
  }

  .shrinkable {
    transition: transform 0.3s ease-in-out;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

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

  ::-webkit-scrollbar {
    width: 10px;
    opacity: 0;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 5px;
    cursor: pointer;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #aaaaaa;
  }

  @media (max-width: 600px) {
    .drawer {
      width: 85vw !important;
    }
  }
}