@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@500;600&family=Inter:wght@500;600&display=swap');

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

@font-face {
  font-family: 'Nohemi';
  src: font-url(/assets/Nohemi-Black-a73f122464218216080d37ac3052d7348c8e91ccc9c3c4e9efd75a55a03dc526.ttf) format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Nohemi';
  src: font-url(/assets/Nohemi-ExtraBold-8a926432208ba6519078a452ee3cd49e66679e320b2470ad97be8e2824ce80fd.ttf) format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Nohemi';
  src: font-url(/assets/Nohemi-Bold-50106de64b072115ba9418d257dadba9bbc54c0f3fa4c2d6b13af341e5c3e235.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Nohemi';
  src: font-url(/assets/Nohemi-SemiBold-ff2f549b6203890b4840d9f3e9d5c82baad19ec786943735718cd5d6bfe9586a.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Nohemi';
  src: font-url(/assets/Nohemi-Medium-b72dab01d7d9dcbe2833d40a537d9a2aba476a7651f4ab88efac98c28bcff644.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Nohemi';
  src: font-url(/assets/Nohemi-Regular-ba5257afc06ad22d710c4a597975adc9d7dba6eef17b1d82875b565f67b21294.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Nohemi';
  src: font-url(/assets/Nohemi-Light-e7dd1be7c2be5433be8af259ff95b91a5568c7dac045187a6ca63f19fb5da3ff.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Nohemi';
  src: font-url(/assets/Nohemi-ExtraLight-b291c6e7c746c1270511eea8f88f42203c631fb82f1c641159948d2fb6e01147.ttf) format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Nohemi';
  src: font-url(/assets/Nohemi-Thin-cb8b72f05e73c26cfacfc1644fa38fc59b01a41895f6c07f2b4bf82b881d7ff6.ttf) format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Public Sans';
  src: font-url(/Public-Sans-Black.ttf) format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Public Sans';
  src: font-url(/Public-Sans-ExtraBold.ttf) format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Public Sans';
  src: font-url(/Public-Sans-Bold.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Public Sans';
  src: font-url(/Public-Sans-SemiBold.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Public Sans';
  src: font-url(/Public-Sans-Medium.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Public Sans';
  src: font-url(/Public-Sans-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Public Sans';
  src: font-url(/Public-Sans-Light.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Public Sans';
  src: font-url(/Public-Sans-ExtraLight.ttf) format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Public Sans';
  src: font-url(/Public-Sans-Thin.ttf) format('truetype');
  font-weight: 100;
  font-style: normal;
}


@layer base {
  body {
    @apply font-sans bg-white text-gray-900 dark:bg-gray-900 dark:text-white;
  }

  /* Global scrollbar styles */
  * {
    scrollbar-width: thin;
    scrollbar-color: gray snow;
  }

  *::-webkit-scrollbar {
    width: 4px;
  }

  *::-webkit-scrollbar-track {
    background: snow;
    border-radius: 4px;
    border: 1px solid lightgray;
  }

  *::-webkit-scrollbar-thumb {
    background-color: gray;
    border-radius: 4px;
    border: 1px solid gray;
  }
}

@layer components {
  /* Flash messages */
  .alert {
    @apply
    p-4
    mb-4
    text-sm
    text-gray-800
    rounded-lg
    bg-gray-50
    dark:bg-gray-800
    dark:text-gray-300
  }

  .alert.alert-danger,
  .alert.alert-alert {
    @apply
    text-red-800
    bg-red-50
    dark:bg-red-800
    dark:text-red-400
  }

  .alert.alert-success {
    @apply
    text-green-800
    bg-green-50
    dark:bg-green-800
    dark:text-green-400
  }

  .alert.alert-notice {
    @apply
    text-blue-800
    bg-blue-50
    dark:bg-blue-800
    dark:text-blue-400
  }

  .nav-link {
    @apply flex items-center p-2 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700
  }

  .nav-link svg {
    @apply mr-3
  }

  .nav-link.is-current-page {
    @apply bg-gray-100 dark:text-white dark:bg-gray-700
  }

  .profile-nav-link {
    @apply flex gap-3 items-center px-4 py-2 w-full text-base font-medium text-tertiary-300 rounded-full transition duration-75 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700;
  }

  .profile-nav-link svg {
    @apply text-primary;
  }

  .profile-nav-link.selected {
    @apply bg-primary rounded-full text-white;
  }

  .profile-nav-link.selected svg {
    @apply text-white;
  }

   /* Hide scrollbar for Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  /* Buttons */
  .btn {
    @apply
    h-fit
    inline-flex
    text-center
    items-center
    justify-center
    bg-primary
    cursor-pointer
    rounded-full
    px-4
    py-2
    text-sm
    font-medium
    text-white
    shadow-sm
    ring-1
    ring-inset
    ring-primary-100
    hover:bg-primary-400
    hover:no-underline
    focus:outline-none
    focus:ring-2
    focus:ring-primary-500
    focus:ring-offset-2
    transition-colors;
  }

  .btn.btn-secondary {
    @apply
    bg-secondary
    border
    border-secondary
    ring-secondary-100
    hover:bg-secondary-400
    focus:ring-secondary-500;
  }

  .btn.btn-outlined {
    @apply
    bg-transparent
    text-primary
    border
    ring-0
    border-primary
    hover:ring-1
    hover:ring-primary
  }

  .btn.disabled {
    @apply
    opacity-50
    cursor-not-allowed
  }

  .btn-sm {
    @apply text-xs px-2 py-1;
  }

  .btn-md {
    @apply text-sm px-5 py-3;
  }

  .btn-lg {
    @apply text-base px-6 py-3;
  }

  .btn-xl {
    @apply text-lg px-8 py-4;
  }

  .btn-2xl {
    @apply text-xl px-10 py-5;
  }

  .btn-3xl {
    @apply text-2xl px-12 py-6;
  }

  /* Forms */
  .form-label {
    @apply
    block
    text-sm
    font-medium
    text-gray-900
    dark:text-white
  }

  .form-input,
  .form-select,
  .form-textarea,
  .form-richtext,
  .form-multiselect {
    @apply
    bg-gray-50
    border-0
    border-b
    border-black
    text-gray-900
    text-sm
    focus:ring-transparent
    focus:border-primary
    block
    w-full
    p-2.5
    dark:bg-gray-400
    dark:border-white
    dark:placeholder-gray-400
    dark:text-white
    dark:focus:ring-white
  }

  .form-textarea {
    @apply
    resize-none
    h-24
  }

  .form-checkbox {
    @apply
    h-4
    w-4
    border-gray-500
    focus:ring-primary-500
    rounded
  }

  .form-checkbox:checked {
    @apply
    bg-primary-200
    focus:bg-primary;
  }

  .form-radio {
    @apply
    h-4
    w-4
    border-primary-200
    hover:bg-primary-200
    focus:ring-primary-200;
  }

  .form-radio:checked {
    @apply
    bg-primary-600
    hover:bg-primary-200
    focus:bg-primary-600;
  }

  .required::before {
    content: "*";
  }

  .text-link {
    @apply text-primary font-bold;
  }

  .title-lg {
    @apply font-nohemi text-4xl font-extrabold text-primary;
  }

  .title-xl {
    @apply font-nohemi text-5xl font-extrabold text-primary;
  }

  .devise-screens-container {
    @apply flex flex-col justify-center min-h-[calc(100vh-110px)];
  }

  .session-card {
    @apply w-full md:min-w-[480px] max-w-sm md:max-w-md m-auto p-4 sm:p-6 md:p-8
  }

  .option {
    @apply px-4 py-2 bg-gray-200 hover:bg-gray-400 hover:text-white;
  }

  .option.active {
    @apply bg-black text-white hover:bg-gray-600;
  }

  .form-radio:checked ~ .radio-label {
    @apply border-b border-primary text-primary font-bold;
  }

  .plan-radio:checked ~ .plan {
    @apply text-white shadow-lg bg-gradient-to-t from-[#4712A5] to-[#AA92D6];

    .discount {
      @apply text-primary bg-white;
    }

    .price {
      @apply text-white;
    }

    .icon-container {
      @apply bg-white text-primary;

      .icon {
        @apply text-primary;
      }
    }

    .white-text-when-selected {
      @apply text-white;
    }

    .primary-100-text-when-selected {
      @apply text-primary-100;
    }
  }

  /* Range sliders */
  .range_container {
    @apply flex flex-col mx-auto my-4;
  }

  .sliders_control {
    @apply relative min-h-[30px];
  }

  .form_control {
    @apply relative flex justify-between text-xl text-[#635a5a];
  }

  /* Custom styles for range slider thumbs */
  input[type="range"]::-webkit-slider-thumb {
    @apply pointer-events-auto cursor-pointer;
  }

  input[type="range"]::-moz-range-thumb {
    @apply pointer-events-auto cursor-pointer;
  }

  input[type=range] {
    @apply w-full my-4 bg-transparent appearance-none;
  }

  input[type=range]:focus {
    @apply outline-none
  }

  input[type=range]::-webkit-slider-runnable-track {
    @apply bg-transparent border w-full h-0.5 cursor-pointer
  }

  input[type=range]::-moz-range-track {
    @apply bg-transparent border w-full h-0.5 cursor-pointer
  }

  input[type=range]::-ms-track {
    @apply bg-transparent border w-full h-0.5 cursor-pointer
  }

  input[type=range]::-webkit-slider-thumb {
    @apply -mt-1.5 w-4 h-4 border border-black rounded-full cursor-pointer appearance-none;
    background-color: white;
    position: relative;
    border: 1px solid #4712a5;
    z-index: 1;
  }

  input[type=range]::-moz-range-thumb {
    @apply -mt-1.5 w-4 h-4 border border-black rounded-full cursor-pointer appearance-none;
    background-color: #4712a5;
  }

  input[type=range]::-ms-thumb {
    @apply -mt-1.5 w-4 h-4 border border-black rounded-full cursor-pointer appearance-none;
    background-color: #4712a5;
  }

  /* Styles for input[type="number"] */
  input[type="number"] {
    @apply text-[#8a8383] text-lg border-none;
  }

  /* Remove spin buttons in numeric inputs */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    @apply opacity-100;
  }

  /* Range slider base styles */
  input[type="range"] {
    @apply h-0.5 w-full absolute bg-[#C6C6C6] pointer-events-none;
  }

  #fromSlider {
    @apply h-0;
  }

  /* Tabs */
  .tabs-container {
    @apply flex items-center overflow-x-auto no-scrollbar border-b border-gray-200 my-4 gap-4;
  }

  .tab {
    @apply inline-flex p-2 text-gray-600 items-center gap-1;
  }

  .tab.active {
    @apply text-primary border-b-2 border-primary font-medium;
  }

  /* Pills */
  .pill {
    @apply inline-block items-center text-center px-3 py-1 rounded-xl font-medium whitespace-nowrap overflow-hidden text-ellipsis;
  }

  .pill.pill-primary {
    @apply bg-primary text-white;
  }

  .pill.pill-secondary,
  .pill.pill-archived
  {
    @apply bg-secondary text-white;
  }

  .pill.pill-on_hold {
    @apply bg-amber-200 text-yellow-800;
  }

  .pill.pill-applicant_in_review,
  .pill.pill-draft
  {
    @apply bg-blue-200 text-blue-800;
  }

  .pill.pill-resume_viewed {
    @apply bg-primary-200 text-primary-800;
  }

  .pill.pill-approved,
  .pill.pill-published
  {
    @apply bg-green-200 text-green-800;
  }

  .pill.pill-ended_process,
  .pill.pill-completed
  {
    @apply bg-gray-200 text-gray-800;
  }

  /* Turbo modal */
  .turbo-modal {
    @apply
    fixed
    z-50
    left-1/2
    top-1/2
    transform
    -translate-x-1/2
    -translate-y-1/2
    overflow-auto
    bg-white
    rounded
    shadow-lg
  }

  /* Pagy styles */
  .pagy {
    @apply flex items-center space-x-2 font-semibold text-sm text-gray-500;

    a {
      @apply block px-3 py-1 rounded-full transition duration-200;

      &:hover {
        @apply text-purple-500 bg-gray-100;
      }
    }

    a:not([href]) { /* Disabled links */
      @apply text-gray-300 cursor-pointer;
    }

    a.current {
      @apply text-white bg-primary;
    }

    span {
      @apply px-3 py-1 rounded-full text-gray-400;
    }
  }

  /* Purchases Table Tabs */
  .tab-nav-link.active {
    @apply inline-flex gap-2 px-8 items-center justify-center p-4 text-primary border-b-2 border-primary rounded-t-lg dark:text-primary-800 dark:border-primary-800
  }

  .tab-nav-link {
    @apply inline-flex gap-2 px-8 items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg text-quaternary-400 hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300
  }

}

/* Form validation improvements */
form[data-controller*="form-validation"],
form[data-controller*="resume-validation"] {
  scroll-behavior: smooth;
}

/* Better spacing around form fields for scroll-to behavior */
form[data-controller*="form-validation"] input:required,
form[data-controller*="form-validation"] textarea:required,
form[data-controller*="form-validation"] select:required,
form[data-controller*="resume-validation"] input:required,
form[data-controller*="resume-validation"] textarea:required,
form[data-controller*="resume-validation"] select:required {
  scroll-margin: 2rem;
}


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */