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

/* Local Open Sans font faces for better performance */
/* Light (300) */
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* SemiBold (600) */
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ExtraBold (800) */
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-ExtraBoldItalic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@layer base {
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

@layer components {
  .swiper-button-next::after,
  .swiper-button-prev::after {
    @apply text-xs text-white font-bold m-0 !important;
  }

  .Vue-Toastification__container .Vue-Toastification__toast.context-change-toast {
    @apply !flex !items-center
      !min-w-0 !w-auto
      !mx-auto !mb-[20vh] !p-4
      rounded-2xl
      bg-backgroundTertiary dark:bg-backgroundTertiary-dark;
  }

  /* Force mobile container constraints on all fixed elements */
  .fixed,
  .modal {
    @apply max-w-md left-1/2 -translate-x-1/2 !important;
  }

  /* Special handling for floating buttons with right positioning */
  .fixed.floating-button {
    left: calc(50% + min(224px - 1rem - 3.5rem, 50vw - 1rem - 3.5rem)) !important;
    transform: none !important;
  }
}

:root {
  /* Datepicker Light Theme */
  .dp__theme_light {
    --dp-background-color: theme('colors.backgroundPrimary.DEFAULT');
    --dp-text-color: theme('colors.textPrimary.DEFAULT');
    --dp-hover-color: theme('colors.highlightSecondaryContrast.DEFAULT');
    --dp-hover-text-color: theme('colors.textPrimary.DEFAULT');
    --dp-hover-icon-color: theme('colors.highlightTertiary.DEFAULT');
    --dp-primary-color: theme('colors.highlightPrimary.DEFAULT');
    --dp-primary-text-color: theme('colors.white');
    --dp-secondary-color: theme('colors.textSecondary.DEFAULT');
    --dp-border-color: theme('colors.separatorLine.DEFAULT');
    --dp-menu-border-color: theme('colors.separatorLine.DEFAULT');
    --dp-border-color-hover: theme('colors.highlightSecondary.DEFAULT');
    --dp-disabled-color: theme('colors.inputBackgroundDisabled.DEFAULT');
    --dp-disabled-color-text: theme('colors.textSecondary.DEFAULT');
    --dp-icon-color: theme('colors.highlightTertiary.DEFAULT');
    --dp-danger-color: theme('colors.inputError.DEFAULT');
    --dp-success-color: theme('colors.highlightTertiary.DEFAULT');
  }

  /* Datepicker Dark Theme */
  .dp__theme_dark {
    --dp-background-color: theme('colors.backgroundPrimary.dark');
    --dp-text-color: theme('colors.textPrimary.dark');
    --dp-hover-color: theme('colors.highlightSecondaryContrast.dark');
    --dp-hover-text-color: theme('colors.textPrimary.dark');
    --dp-hover-icon-color: theme('colors.highlightTertiary.dark');
    --dp-primary-color: theme('colors.highlightPrimary.dark');
    --dp-primary-text-color: theme('colors.white');
    --dp-secondary-color: theme('colors.textSecondary.dark');
    --dp-border-color: theme('colors.separatorLine.dark');
    --dp-menu-border-color: theme('colors.separatorLine.dark');
    --dp-border-color-hover: theme('colors.highlightSecondary.dark');
    --dp-disabled-color: theme('colors.inputBackgroundDisabled.dark');
    --dp-disabled-color-text: theme('colors.textSecondary.dark');
    --dp-icon-color: theme('colors.highlightTertiary.dark');
    --dp-danger-color: theme('colors.inputError.dark');
    --dp-success-color: theme('colors.highlightTertiary.dark');
  }

  /* Datepicker Component Styles */
  .dp__main {
    @apply w-full font-[inherit];
  }

  [class*='dp__'] {
    @apply font-[inherit];
  }

  .dp__input {
    @apply block text-base px-2.5 h-14 pt-4 pl-10 !outline-none focus:ring-0
      rounded-lg w-full
      border-2 border-solid
      border-separatorLine dark:border-separatorLine-dark
      focus:border-highlightSecondary dark:focus:border-highlightSecondary-dark
      bg-inputBackground dark:bg-inputBackground-dark
      placeholder-textPrimary dark:placeholder-textPrimary-dark;
  }

  .error .dp__input {
    @apply !border-inputError dark:!border-inputError-dark;
  }

  .dp__menu {
    @apply shadow-lg rounded-lg border border-solid border-separatorLine dark:border-separatorLine-dark;
  }

  .dp__overlay {
    @apply rounded-lg;
  }

  /* .dp__active_date {
    @apply bg-highlightSecondary dark:bg-highlightSecondary-dark text-textPrimary dark:text-textPrimary-dark;
  } */

  .dp__today {
    @apply border-highlightSecondary dark:border-highlightSecondary-dark;
  }

  .dp__action_buttons {
    @apply border-t border-solid border-separatorLine dark:border-separatorLine-dark;
  }

  /* .dp__overlay_cell_active {
    @apply bg-highlightSecondary dark:bg-highlightSecondary-dark text-textPrimary dark:text-textPrimary-dark;
  } */

  .dp__calendar_header_separator {
    @apply border-separatorLine dark:border-separatorLine-dark;
  }

  .dp__calendar_header {
    @apply text-textPrimary dark:text-textPrimary-dark;
  }

  /* .dp__button {
    @apply text-textPrimary dark:text-textPrimary-dark hover:bg-buttonActiveHoverSecondary dark:hover:bg-buttonActiveHoverSecondary-dark;
  } */
  /*
  .dp__button_bottom {
    @apply text-highlightSecondary dark:text-highlightSecondary-dark hover:bg-buttonActiveHoverSecondary dark:hover:bg-buttonActiveHoverSecondary-dark;
  } */
}