:root{
  --bg: #ffffff;
  --text: #111827;
  --text-inverted: #e6eef8;
  --opaque-text: rgba(0, 17, 25, 0.64);
  --more-opaque-text: rgba(0, 17, 25, 0.35);
  --muted: #6b7280;
  --primary: #0d6efd;
  --svg-icon-color: rgba(0, 17, 25, 1);
  --select-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --is-dark: 0;
  --bg-color-form:rgba(249, 249, 249, 0.05);
  --jobs-search-bg: rgba(255, 255, 255, 0.62);
  --black-pill:  rgba(0, 17, 25, 1);
  --search-bar-mobile-height: 35px;
  --scroll-color: rgba(95, 95, 95, 0.2);
   --scroll-color: transparent;
  --hover-effect:0.75;
  --search-bar-simple-bg: rgba(254, 254, 255, 1);
  --stat-cards-bg : rgba(249, 249, 249, 0.2);
  --large-text-color:rgba(0, 25, 25, 0.8);
  --box-shadow-jobcard:0px 0px 5px 1px rgba(0, 102, 146, 0.1);
  --search-block-bg-color: rgba(255, 255, 255, 1);
  --search-bar-input-bg-color: rgba(255, 255, 255, 0.1);
  --search-bar-input-text-color: #555;
  --message-audio-bg-color:rgb(200 217 225 / 65%);
  --font-family: 'Aventa', sans-serif;
  --notification-blue-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.5), rgba(249, 249, 249, 0.5)),
linear-gradient(99.2deg, rgba(20, 151, 223, 0.6) 10.34%, rgba(21, 35, 50, 0) 49.85%);
  --notification-green-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.5), rgba(249, 249, 249, 0.5)),
linear-gradient(99.2deg, rgba(63, 197, 100, 0.6) 10.34%, rgba(29, 42, 32, 0) 49.85%);

  --notification-yellow-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.5), rgba(249, 249, 249, 0.5)),
linear-gradient(99.2deg, rgba(233, 139, 52, 0.6) 10.34%, rgba(46, 36, 27, 0) 49.85%);

  --notification-red-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.5), rgba(249, 249, 249, 0.5)),
linear-gradient(99.2deg, rgba(238, 103, 97, 0.6) 10.34%, rgba(48, 33, 30, 0) 49.85%);
  --modal-bg-color: rgba(224, 235, 242, 0.76);
  @media (max-width: 1440px) {
    --box-shadow-jobcard:0px 0px 6.6px 3px rgba(0, 102, 146, 0.1);
  }
}

/* Dark theme variables */
@media (prefers-color-scheme: dark) {
  :root{
    --bg: #0b1220;
    --text: #e6eef8;
    --text-inverted: #111827;
    --opaque-text: rgba(255, 255, 255, 0.64);
    --muted: #9aa6b2;
    --primary: #4da3ff;
    --svg-icon-color: rgba(255, 255, 255, 1);
    --select-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --is-dark: 1;
    --bg-color-form:rgba(0, 0, 0, 0.2);
    --more-opaque-text: rgba(255, 255, 255, 0.35);
    --jobs-search-bg: rgba(255, 255, 255, 0.09);
    --black-pill:  rgba(213, 229, 236, 0.99);
    --scroll-color: transparent;
    --hover-effect:1.5;
    --search-bar-simple-bg: rgba(254, 254, 255, 0.05);
    --stat-cards-bg : rgba(249, 249, 249, 0.06);
    --large-text-color:rgba(255, 255, 255, 0.8);
    --search-block-bg-color: rgba(255, 255, 255, 0.05);
    --search-bar-input-bg-color: rgba(139, 139, 139, 0.05);
    --search-bar-input-text-color: rgba(255, 255, 255, 0.64);
    --audio-bg-color:  #647077;
    --notification-blue-bg:linear-gradient(0deg, rgba(249, 249, 249, 0.5), rgba(249, 249, 249, 0.5)), linear-gradient(99.2deg, rgba(20, 151, 223, 0.6) 10.34%, rgba(21, 35, 50, 0.0) 49.85%);
    --notification-green-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.06), rgba(249, 249, 249, 0.06)),
linear-gradient(99.2deg, rgba(63, 197, 100, 0.4) 10.34%, rgba(29, 42, 32, 0.096) 49.85%);
     --notification-yellow-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.06), rgba(249, 249, 249, 0.06)),
linear-gradient(99.2deg, rgba(233, 139, 52, 0.4) 10.34%, rgba(46, 36, 27, 0.096) 49.85%);
    --notification-red-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.06), rgba(249, 249, 249, 0.06)),
linear-gradient(99.2deg, rgba(238, 103, 97, 0.4) 10.34%, rgba(48, 33, 30, 0.096) 49.85%);
  --modal-bg-color: rgba(16, 24, 32, 0.26);
  }
}

/* When user explicitly sets data-theme="dark" or "light" override prefers-color-scheme */
:root[data-theme='dark']{
  --bg: rgba(10, 10, 10, 1);
  --text: #e6eef8;
  --text-inverted: #111827;
  --opaque-text: rgba(255, 255, 255, 0.64);
  --muted: #9aa6b2;
  --primary: #4da3ff;
 --svg-icon-color: rgba(255, 255, 255, 1);
  --select-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --is-dark: 1;
  --bg-color-form:rgba(0, 0, 0, 0.2);
  --more-opaque-text: rgba(255, 255, 255, 0.35);
  --jobs-search-bg: rgba(255, 255, 255, 0.09);
  --black-pill:  rgba(213, 229, 236, 0.99);
  /* --scroll-color: rgba(253, 253, 253, 0.2); */
    --scroll-color: transparent;
  --hover-effect:1.5;
  --search-bar-simple-bg: rgba(254, 254, 255, 0.05);
  --stat-cards-bg : rgba(249, 249, 249, 0.06);
  --large-text-color:rgba(255, 255, 255, 0.8);
  --search-block-bg-color: rgba(255, 255, 255, 0.05);
  --search-bar-input-bg-color:  rgba(254, 254, 255, 0.05);
  --search-bar-input-text-color: rgba(255, 255, 255, 0.64);
  --audio-bg-color:  #647077;
  --notification-blue-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.06), rgba(249, 249, 249, 0.06)),
linear-gradient(99.2deg, rgba(20, 151, 223, 0.4) 10.34%, rgba(21, 35, 50, 0.096) 49.85%);

  --notification-green-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.06), rgba(249, 249, 249, 0.06)),
linear-gradient(99.2deg, rgba(63, 197, 100, 0.4) 10.34%, rgba(29, 42, 32, 0.096) 49.85%);

  --notification-yellow-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.06), rgba(249, 249, 249, 0.06)),
linear-gradient(99.2deg, rgba(233, 139, 52, 0.4) 10.34%, rgba(46, 36, 27, 0.096) 49.85%);
  --notification-red-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.06), rgba(249, 249, 249, 0.06)),
linear-gradient(99.2deg, rgba(238, 103, 97, 0.4) 10.34%, rgba(48, 33, 30, 0.096) 49.85%);
  --modal-bg-color: rgba(16, 24, 32, 0.26);
}

:root[data-theme='light']{
  --bg: #ffffff;
  --text: #111827;
  --text-inverted: #e6eef8;
  --opaque-text: rgba(0, 17, 25, 0.64);
  --muted: #6b7280;
  --primary: #0d6efd;
  --is-dark: 0;
  --svg-icon-color: rgba(0, 17, 25, 1);
  --select-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --bg-color-form:rgba(249, 249, 249, 0.05);
  --more-opaque-text: rgba(0, 17, 25, 0.35);
  --jobs-search-bg: rgba(255, 255, 255, 0.62);
  --black-pill:  rgba(0, 17, 25, 1);
  /* --scroll-color: rgba(95, 95, 95, 0.2); */
    --scroll-color: transparent;
  --hover-effect:0.75;
  --search-bar-simple-bg: rgba(254, 254, 255, 1);
  --stat-cards-bg : rgba(249, 249, 249, 0.2);
  --large-text-color:rgba(0, 25, 25, 0.8);
  --search-block-bg-color: rgba(255, 255, 255, 1);
  --search-bar-input-bg-color: rgba(249, 249, 249, 0.1);
  --search-bar-input-text-color: #555;
  --audio-bg-color:  rgba(211, 227, 234, 0.65);
  --notification-blue-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.5), rgba(249, 249, 249, 0.5)), linear-gradient(99.2deg, rgba(20, 151, 223, 0.6) 10.34%, rgba(21, 35, 50, 0.0) 49.85%);

  --notification-green-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.5), rgba(249, 249, 249, 0.5)),
linear-gradient(99.2deg, rgba(63, 197, 100, 0.6) 10.34%, rgba(29, 42, 32, 0) 49.85%);

  --notification-yellow-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.5), rgba(249, 249, 249, 0.5)),
linear-gradient(99.2deg, rgba(233, 139, 52, 0.6) 10.34%, rgba(46, 36, 27, 0) 49.85%);
  --notification-red-bg: linear-gradient(0deg, rgba(249, 249, 249, 0.5), rgba(249, 249, 249, 0.5)),
linear-gradient(99.2deg, rgba(238, 103, 97, 0.6) 10.34%, rgba(48, 33, 30, 0) 49.85%);
  --modal-bg-color: rgba(224, 235, 242, 0.76);
}

/* Basic element styles to demonstrate theme */
html,body{height:100%;}
body{
  background-color:var(--bg);
  color:var(--text);
  font-family: var(--font-family);
  /* Scrollbar transparente */
  scrollbar-width: none;
  -ms-overflow-style: none;
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  /* background-color: var(--scroll-color); */
  background-color: transparent;
  border-radius: 4px;
  border: 2px solid transparent;
}

}

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

main{
    background-repeat: no-repeat;
    min-height: 100lvh;
    padding: 1.5rem;
    /* padding-bottom: 0; */
    @media (max-width: 1440px) {
      padding: 1rem;
    }
}

.general-layout{
    background-image: url("/public/images/layout-bg.webp");
    background-position: top center;
    background-size: cover;
    display: flex;
    overflow-x: hidden;
    /* padding-bottom: 0; */
  @media (max-width: 900px) {
    padding: 1rem;
   
  }
    @media (max-width: 480px) {
        background-image: url("/public/images/layout-bg-mobile.webp");
    }

    .side-menu{
      width: 250px;
      @media (min-width: 2250px) {
        width: 400px;
      }
      @media (min-width: 3150px) {
        width: 500px;
      }
    }
    .right-content{
      flex: 1;
              display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    @media (max-width: 900px) {
     flex-direction: column;
    .right-content{
      flex: unset;
    }
    }
}



svg path, svg circle, svg rect{
  fill: var(--svg-icon-color);
}

button.theme-toggle{
  background:transparent;border:1px solid var(--muted);color:var(--text);padding:0.4rem 0.6rem;border-radius:6px;cursor:pointer;
}

/* small utility */
.muted{color:var(--muted)}

p, h1, h2, h3, h4, h5, h6, span, a, strong, svg path{
  transition: color ease-in 0.125s;
}

/* For WebKit-based browsers (Chrome, Safari, Edge, Opera) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* For other browsers (as a general fallback) */
input[type="number"] {
  appearance: textfield;
}

/* Allow native calendar picker indicator for date inputs */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: inline-block;
  -webkit-appearance: auto; /* restore native appearance in WebKit browsers */
  
}

/* For Firefox */
/* Use native appearance by default so the browser shows the date picker */
input[type="date"] {
  -moz-appearance: auto;
  appearance: auto;
}

/* Make native calendar picker indicator visually transparent but keep it clickable */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  pointer-events: auto;
  margin-right: 0.5rem;

  z-index: 9999;
}

/* Firefox: attempt to hide the picker glyph if supported */
input[type="date"]::-moz-calendar-picker-indicator {
  opacity: 0;
   margin-right: 0.5rem;
  z-index: 9999;
}



/* @media (max-width: 900px) {
    .content{
        margin-top: calc(var(--search-bar-mobile-height) + 3rem);
    }
} */


/*.job-card,*/a:not(.job-card__link,.menu-item, .color-notification, .language-pill), button:not(.menu-item, .recommendation-btn, .add-more-btn, .tab-button, .language-pill),  .interview-card, .file-card{
  transition: filter 0.2s ease;
  cursor: pointer;
}

/*.job-card:hover,*/ a:not(.job-card__link,.menu-item, .color-notification, .language-pill):hover, button:not(.menu-item, .recommendation-btn, .add-more-btn, .tab-button, .language-pill):hover, .interview-card:hover, .file-card:hover,  .file-card.active ,.sales-card:hover,  .sales-card.active{
  filter: brightness(var(--hover-effect));
}
/* 
.job-card{
  border: 1px solid transparent;
  transition: all 0.2s ease-in;
  cursor: pointer;
  background: linear-gradient(109.17deg, rgba(249, 249, 249, 0.06) 37.1%, rgba(20, 151, 223, 0.06) 90.91%);
  &:hover{
    border-color: rgba(20, 151, 223, 0.18);
    box-shadow: 0px 0px 35.6px 4px rgba(20, 151, 223, 0.09);
    .job-card__link{
      text-shadow: 0px 0px 35.8px 0px rgba(20, 151, 223, 0.95);

    }
  }

} */

button#search-btn-mobile {
    width: 2rem;
    padding-inline: 0.5rem;
    background-color: transparent;
    outline: none;
    border: none;
    margin-right: 0.25rem;
}

@import "./components/toast.css";