/* add custom CSS here */
/* Local font imports */

@font-face {
  font-family: 'Gucci Sans Pro';
  src: url('/static/fonts/GucciSansPro-Bold.a6efa8d0.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gucci Sans Pro';
  src: url('/static/fonts/GucciSansPro-Book.3f934bcf.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gucci Sans Pro';
  src: url('/static/fonts/GucciSansPro-Light.dec1c4e4.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gucci Sans Pro';
  src: url('/static/fonts/GucciSansPro-Medium.40f2ffbe.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Apply local font globally */
body,
body *,
.novo-header,
.novo-header *,
app-sidebar,
app-sidebar *,
.job-detail,
.job-detail *,
button,
input,
select,
textarea {
  font-family: 'Gucci Sans Pro', sans-serif !important;
}

  body [class*="credits"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    z-index: -1 !important;
  }

  .novo-header {
    display: none !important;
  }
  
:root {
  --sidebar-color: #f3f3f3;
  --link-color: #6d909d;
}

.novo-header {
  background-color: #000000 !important;
}

app-sidebar[_ngcontent-serverapp-c103][_nghost-serverapp-c100] {
  background-color: var(--sidebar-color) !important;
}

a, .link-color, .novo-icon.search {
  color: var(--link-color) !important;
}

/* Prevent ALL elements in header and search areas from linking */
.novo-header *,
.search-container *,
.search-box *,
app-search *,
app-header *,
.header-section *,
.search-section *,
[class*="search"] *,
[class*="header"] * {
  pointer-events: none !important;
  cursor: default !important;
  text-decoration: none !important;
}

/* Specifically target search box and its children */
.search-box,
.search-box input,
.search-box button,
.search-box a,
.search-box div,
.search-container,
.search-container input,
.search-container button,
.search-container a,
.search-container div {
  pointer-events: auto !important;
  cursor: text !important;
  text-decoration: none !important;
}

/* Allow input fields to be clickable and editable */
input,
input[type="text"],
input[type="search"],
.search-input,
[class*="search"] input {
  pointer-events: auto !important;
  cursor: text !important;
}

/* Allow buttons to be clickable */
button,
[role="button"],
.search-button,
[class*="search"] button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* But allow our explicitly created clickable elements */
body > div[style*="cursor: pointer"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.novo-icon.search {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Override color="positive" for the specific button */
button[theme="fab"][tooltipposition="bottom"][data-automation-id="novo-search-fab"][icon="bhi-search"][side="right"] {
  background-color: transparent !important;
}

/* Update button text color */
button .flex-wrapper {
  color: var(--link-color) !important;
}

/* Update checkbox icon color */
i.bhi-checkbox-filled {
  color: var(--link-color) !important;
}

/* Custom styles for job detail page */
.job-detail .flex-wrapper button {
  background-color: var(--link-color) !important;
  color: white !important;
}

/* Ensure the button text is visible */
button[theme="primary"][data-automation-id="apply-button"] {
  background-color: var(--link-color) !important;
}

button[theme="primary"][data-automation-id="apply-button"] .flex-wrapper {
  color: white !important;
}

/* Apply modal header bar color */
.cdk-overlay-container header,
novo-modal header,
[role="dialog"] header,
[class*="modal"] header {
  background-color: var(--link-color) !important;
  color: white !important;
}
.cdk-overlay-container header *,
novo-modal header *,
[role="dialog"] header *,
[class*="modal"] header * {
  color: white !important;
}

/* Ensure all primary/submit buttons in modals have white text */
.cdk-overlay-container button[theme="primary"],
.cdk-overlay-container button[theme="primary"] .flex-wrapper,
.cdk-overlay-container button[color="primary"],
.cdk-overlay-container button[color="primary"] .flex-wrapper,
.cdk-overlay-container button[type="submit"],
.cdk-overlay-container button[type="submit"] .flex-wrapper,
novo-modal button[theme="primary"],
novo-modal button[theme="primary"] .flex-wrapper,
[class*="modal"] button[theme="primary"],
[class*="modal"] button[theme="primary"] .flex-wrapper,
[role="dialog"] button[theme="primary"],
[role="dialog"] button[theme="primary"] .flex-wrapper {
  color: white !important;
  background-color: var(--link-color) !important;
}

/* Apply link color to relevant elements */
.job-detail a,
.job-detail .novo-link {
  color: var(--link-color) !important;
}

.category {
  color: var(--link-color) !important;
}

/* Job detail page background */
job-details,
app-job-details,
[class*="job-detail"],
.job-details-container,
.job-details-wrapper {
  background-color: var(--sidebar-color) !important;
}

/* Also apply to the main content wrapper on job detail pages */
job-details .wrapper,
app-job-details .wrapper,
job-details > div,
app-job-details > div {
  background-color: var(--sidebar-color) !important;
}

/* Additional style customizations */

/* Global text color */
body,
body *,
.novo-header *,
app-sidebar *,
.job-detail *,
p, span, div, li, td, th, label, h1, h2, h3, h4, h5, h6 {
  color: #000000 !important;
}

/* Cancel/dialogue button styling */
.cdk-overlay-container button[theme="dialogue"],
.cdk-overlay-container button[theme="dialogue"] .flex-wrapper,
button[data-automation-id="cancel-button"],
button[data-automation-id="cancel-button"] .flex-wrapper,
novo-modal button[theme="dialogue"],
novo-modal button[theme="dialogue"] .flex-wrapper,
[role="dialog"] button[theme="dialogue"],
[role="dialog"] button[theme="dialogue"] .flex-wrapper,
[class*="modal"] button[theme="dialogue"],
[class*="modal"] button[theme="dialogue"] .flex-wrapper {
  background-color: #f3f3f3 !important;
  color: #000000 !important;
}

/* Job card border radius */
novo-list-item,
novo-list novo-list-item,
[class*="job-card"],
[class*="job-item"],
[class*="list-item"],
.job-card,
.card {
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* Prevent any click events on header elements */
.header-title,
.header-titles,
.header-titles h1,
.novo-header a,
.novo-header .header-title,
.novo-header .header-titles h1,
.novo-header .header-icon,
.novo-header .bhi-company,
.novo-header .novo-icon,
.novo-header .novo-icon.search,
.novo-header [class*="header"],
.novo-header [class*="title"],
.search-container a,
.search-container [class*="link"],
.search-box a,
.search-box [class*="link"],
app-search a,
app-search [class*="link"] {
  pointer-events: none !important;
  cursor: default !important;
  text-decoration: none !important;
}

/* Ensure search functionality works */
input,
input[type="text"],
input[type="search"],
.search-input,
[class*="search"] input {
  pointer-events: auto !important;
  cursor: text !important;
}

/* Allow buttons to be clickable */
button,
[role="button"],
.search-button,
[class*="search"] button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Mobile filter popup fixes */
@media (max-width: 768px) {
  /* Ensure filter overlays are properly positioned and accessible */
  .cdk-overlay-container,
  .cdk-global-overlay-wrapper {
    z-index: 1050 !important;
  }

  .cdk-overlay-pane {
    z-index: 1051 !important;
    position: fixed !important;
  }

  .cdk-overlay-backdrop {
    z-index: 1049 !important;
    background: rgba(0, 0, 0, 0.5) !important;
  }

  /* Fix filter popup close button */
  .dropdown-container.data-table-dropdown .header button,
  .dropdown-container .header button,
  [role="dialog"] button[aria-label*="close"],
  [role="dialog"] button[aria-label*="Close"],
  .filter-popup .close-button,
  .filter-container .close,
  .filter-modal .close,
  .modal-header .close,
  .modal .close,
  .popup-close,
  .close-icon,
  .bhi-times,
  button[aria-label="Close"],
  button[data-dismiss],
  [class*="close"] button,
  [class*="filter"] [class*="close"],
  [class*="modal"] [class*="close"] {
    position: relative !important;
    z-index: 1052 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 8px !important;
    margin: 0 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Ensure close button icons are visible and clickable */
  .dropdown-container.data-table-dropdown .header button i,
  .dropdown-container .header button i,
  [role="dialog"] button[aria-label*="close"] i,
  [role="dialog"] button[aria-label*="Close"] i,
  .filter-popup .close-button i,
  .filter-container .close i,
  .filter-modal .close i,
  .modal-header .close i,
  .modal .close i,
  .popup-close i,
  .close-icon i,
  .bhi-times,
  button[aria-label="Close"] i,
  button[data-dismiss] i,
  [class*="close"] button i,
  [class*="filter"] [class*="close"] i,
  [class*="modal"] [class*="close"] i {
    pointer-events: none !important;
    font-size: 16px !important;
    color: #3d464d !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
  }

  /* Hover and active states for close buttons */
  .dropdown-container.data-table-dropdown .header button:hover,
  .dropdown-container .header button:hover,
  [role="dialog"] button[aria-label*="close"]:hover,
  [role="dialog"] button[aria-label*="Close"]:hover,
  .filter-popup .close-button:hover,
  .filter-container .close:hover,
  .filter-modal .close:hover,
  .modal-header .close:hover,
  .modal .close:hover,
  .popup-close:hover,
  .close-icon:hover,
  button[aria-label="Close"]:hover,
  button[data-dismiss]:hover,
  [class*="close"] button:hover,
  [class*="filter"] [class*="close"]:hover,
  [class*="modal"] [class*="close"]:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 3px !important;
  }

  .dropdown-container.data-table-dropdown .header button:hover i,
  .dropdown-container .header button:hover i,
  [role="dialog"] button[aria-label*="close"]:hover i,
  [role="dialog"] button[aria-label*="Close"]:hover i,
  .filter-popup .close-button:hover i,
  .filter-container .close:hover i,
  .filter-modal .close:hover i,
  .modal-header .close:hover i,
  .modal .close:hover i,
  .popup-close:hover i,
  .close-icon:hover i,
  button[aria-label="Close"]:hover i,
  button[data-dismiss]:hover i,
  [class*="close"] button:hover i,
  [class*="filter"] [class*="close"]:hover i,
  [class*="modal"] [class*="close"]:hover i {
    opacity: 1 !important;
  }

  /* Fix filter dropdown positioning */
  .dropdown-container.data-table-dropdown {
    position: fixed !important;
    z-index: 1051 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Ensure proper touch scrolling for filter content */
  .dropdown-container.data-table-dropdown .dropdown-list-options {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Fix filter search input on mobile */
  .dropdown-container.data-table-dropdown list item.filter-search input {
    font-size: 16px !important; /* Prevent zoom on iOS */
    -webkit-appearance: none !important;
    border-radius: 0 !important;
  }

  /* Prevent body scroll when filter is open */
  body.filter-open,
  body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/* Additional mobile-specific fixes */
@media (max-width: 480px) {
  .dropdown-container.data-table-dropdown {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 100px) !important;
    left: 10px !important;
    right: 10px !important;
    margin: 0 !important;
  }
}