/* Shared component rules. Keep application visibility/state classes intact. */
body.ij-site {
  --ij-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ij-ui-text: #17271f;
  --ij-ui-muted: #647068;
  --ij-ui-line: rgba(23,39,31,.14);
  --ij-ui-brand: #0b4b3a;
  --ij-ui-radius: 4px;
  font-family: var(--ij-font) !important;
  color: var(--ij-ui-text);
  line-height: 1.6;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Templates previously declared several text faces. Icon elements and their
   pseudo-elements retain the fonts supplied by their respective libraries. */
body.ij-site :where(header, footer, main, section, article, aside, nav, div,
  h1, h2, h3, h4, h5, h6, p, a, button, label, input, textarea, select,
  summary, table, th, td, li, dt, dd, span, strong, em, small):not(:where(
  .bi, [class^="bi-"], [class*=" bi-"], .fa, .fas, .far, .fab,
  .fa-solid, .fa-regular, .fa-brands, .dashicons)) {
  font-family: var(--ij-font) !important;
}
body.ij-site *, body.ij-site *::before, body.ij-site *::after { box-sizing: border-box; }
body.ij-site :where(img, video, canvas, iframe) { max-width: 100%; }
body.ij-site :where(img, video) { height: auto; }
body.ij-site :where(h1, h2, h3, h4, p, li, dt, dd, address) { overflow-wrap: anywhere; }
body.ij-site :where(input, textarea, select) { min-width: 0; max-width: 100%; }
body.ij-site textarea { resize: vertical; }
body.ij-site :where(button, input, select, textarea, a):focus-visible {
  outline: 3px solid var(--ij-ui-brand) !important;
  outline-offset: 3px;
}
body.ij-site :where(input[type="checkbox"], input[type="radio"]) {
  flex-shrink: 0;
  accent-color: var(--ij-ui-brand);
}
body.ij-site .ij-switch { flex-shrink: 0; }
body.ij-site .ij-switch input:focus-visible + .ij-slider {
  outline: 3px solid var(--ij-ui-brand);
  outline-offset: 3px;
}
body.ij-site .ij-skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 30000;
  padding: .8rem 1rem;
  border-radius: 8px;
  background: #fff;
  color: var(--ij-ui-brand);
  box-shadow: none;
  transform: translateY(-200%);
}
body.ij-site .ij-skip-link:focus { transform: translateY(0); }
body.ij-site #main-content { scroll-margin-top: calc(var(--ij-header-h, 76px) + 1rem); }

/* Shrink actual flex/grid children before their content pushes a column or
   action outside the viewport. Carousels keep their intentional tracks. */
body.ij-site :is(.ij-container, .ij-profile-wrap, .ij-auth-wrap, .ij-settings-wrap,
  .ij-help-wrap, .ij-hub-wrap, .nx-wrap, .ij-profile-grid, .ij-settings-grid,
  .ij-hero-grid, .ij-card, .ij-settings-card, .nx-panel, .nx-grid, .nx-field,
  .ij-settings-field, .ij-card-head, .ij-job-content, .ij-profile-main-info,
  .ij-profile-left, .ij-info-value, .ij-vip-panel, .ij-vip-card, .ij-vip-name,
  .ij-dash-desktop, .ij-dash-mobile, .tab-pane, .card-body, .ui-field) { min-width: 0; }
body.ij-site :is(.ij-profile-grid, .ij-settings-grid, .ij-stat-grid,
  .ij-hero-grid, .nx-grid, .ij-help-card-grid, .ij-pay-grid, .ij-kv,
  .ij-dash-desktop .row, .ij-dash-mobile .row, #regWizard .grid,
  #regWizard .upload-row) > * { min-width: 0; }
body.ij-site .ij-hero-grid > * { min-width: 0 !important; max-width: 100%; }
body.ij-site .ij-hero-right > * { min-width: 0; max-width: 100%; width: 100%; }
body.ij-site #ijCatCostCard > div:first-child { flex-wrap: wrap; }
body.ij-site #ijCatCostBody :is(div, span, strong) { min-width: 0; overflow-wrap: anywhere; }
body.ij-site :is(.ij-info-value, .ij-job-title, .ij-job-meta, .ij-profile-bio,
  .ij-beschreibung-box, .ij-note-text, .ij-notice-text, .ij-card-sub,
  .ij-cta-sub, .ij-vip-city, .ij-vip-job, .auftragsbeschreibung) { overflow-wrap: anywhere; }

/* Wrapping keeps long action labels readable at every viewport. */
body.ij-site :is(.ij-btn, .ij-btn-primary, .ij-btn-secondary, .ij-btn-danger,
  .nx-btn, .ij-pg-btn, #regWizard .btn-brand, #regWizard .btn-ghost,
  .ij-dash-desktop .btn, .ij-dash-mobile .btn, .modal-footer .btn) {
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  height: auto;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border-radius: 4px !important;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
  letter-spacing: normal;
  vertical-align: middle;
}
body.ij-site :is(.ij-btn, .nx-btn, .ij-pg-btn) > i { flex: 0 0 auto; }
body.ij-site :is(.ij-btn-row, .ij-profile-actions, .ij-settings-actions,
  .ij-delete-footer, .ij-report-actions, .ij-onb-actions, .ijm-actions,
  .modal-footer, .nx-actions) { display: flex; flex-wrap: wrap; gap: .75rem; }
body.ij-site :is(.ij-btn-row, .ij-profile-actions, .ij-settings-actions,
  .ij-delete-footer, .ij-report-actions, .ijm-actions) > :is(a, button) {
  flex: 0 1 auto;
  min-width: 0;
}
body.ij-site :is(.ij-card-head, .ij-settings-card-head, .ij-job-title-row,
  .ij-profile-head, .nx-panelhead, .nx-hero-top) { flex-wrap: wrap; }
body.ij-site :is(.ij-badge, .ij-card-pill, .ij-settings-pill, .ij-pill-badge,
  .ij-pill, .nx-badge, .nx-stepchip, .ij-job-meta span) {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.ij-site :is(.ij-info-row, .ij-rating-row, .ij-profile-meta) { flex-wrap: wrap; }
body.ij-site .ij-beschreibung-box { max-height: none; overflow: visible; }
body.ij-site .ij-pagination { flex-wrap: wrap; gap: .35rem; }
body.ij-site .ij-pagination .page-numbers { min-width: 44px; min-height: 44px; }
body.ij-site .ij-col { min-width: 0; }
body.ij-site .ij-help-steps { flex-wrap: wrap; }
body.ij-site .ij-help-step-pill { min-width: 0; max-width: 100%; }

/* Bound menus locally; do not hide overflow on the page to mask layout bugs. */
body.ij-site header.instantjob-header .ij-nav-container { min-width: 0; }
body.ij-site header.instantjob-header .ij-nav-container > * { min-width: 0; }
body.ij-site header.instantjob-header .ij-user-dropdown-wrap { min-width: 0; max-width: 100%; }
body.ij-site header.instantjob-header .ij-user-trigger { max-width: 100%; min-width: 0; }
body.ij-site header.instantjob-header .ij-user-meta { flex: 1 1 auto; min-width: 0; }
body.ij-site header.instantjob-header .ij-user-name { max-width: 100% !important; }
body.ij-site header.instantjob-header .ij-nav-actions { flex-wrap: wrap; }
body.ij-site header.instantjob-header .ij-user-dropdown {
  width: min(320px, calc(100vw - 2rem)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 2rem) !important;
  max-height: calc(100dvh - var(--ij-header-h, 76px) - 1.5rem);
  overflow-y: auto;
}
body.ij-site header.instantjob-header .ij-user-dropdown .dropdown-item {
  white-space: normal !important;
  overflow-wrap: anywhere;
  min-height: 44px;
  display: flex;
  align-items: center;
}
body.ij-site #mainNav .ij-submenu { max-width: calc(100vw - 2rem); }
body.ij-site #mainNav .ij-submenu a {
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.ij-site header.instantjob-header .ij-mobile-toggle { width: 44px; height: 44px; flex-shrink: 0; }

/* Dashboard offsets previously pushed actions beyond their own cards. */
body.ij-site.ij-dashboard-desktop .ij-dash-desktop,
body.ij-site.ij-dashboard-mobile .ij-dash-mobile { display: block !important; }
body.ij-site .ij-dash-desktop .fullwidth-margins {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}
body.ij-site .ij-dash-desktop :is(#dashboardTabs, .tab-content) { width: 100%; max-width: 100% !important; }
body.ij-site .ij-dash-desktop #dashboardTabs { gap: .25rem; padding-bottom: .5rem !important; scrollbar-width: thin; }
body.ij-site .ij-dash-desktop #dashboardTabs .nav-item { margin: 0; }
body.ij-site .ij-dash-desktop #dashboardTabs .nav-link { min-height: 44px; }
body.ij-site .ij-note .ij-badge-gold {
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-align: left;
}
body.ij-site .ij-dash-desktop :is(.btn-outline-primary, .btn-outline-secondary),
body.ij-site .ij-dash-mobile :is(.btn-outline-primary, .btn-outline-secondary) {
  float: none;
  margin-left: 0;
  margin-top: .5rem;
  max-width: 100%;
}
body.ij-site :is(.ij-dash-desktop, .ij-dash-mobile) .d-flex:not(.flex-column) { flex-wrap: wrap; }
body.ij-site :is(.ij-dash-desktop, .ij-dash-mobile) :is(.badge, .auftragsbeschreibung) {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
body.ij-site .modal { z-index: 20050; padding: .5rem; }
body.ij-site .modal-backdrop { z-index: 20040; }
body.ij-site .modal-dialog { max-width: min(var(--bs-modal-width, 500px), calc(100vw - 2rem)); }
body.ij-site .modal :is(.modal-content, .modal-body, .modal-header, .modal-footer) { min-width: 0; overflow-wrap: anywhere; }
body.ij-site .modal .modal-content { max-height: calc(100dvh - 2rem); overflow-y: auto; }
body.ij-site .modal .form-group-inline { flex-wrap: wrap; gap: 1rem; }
body.ij-site .modal .form-group-inline > div { flex: 1 1 200px; min-width: 0; }
body.ij-site :is(#chatPane, .ij-delete-dialog, .ij-onb-modal) { max-width: calc(100vw - 2rem); }
body.ij-site #chatPane { max-height: calc(100dvh - 180px); }

/* A mobile user agent can also have a wide viewport (tablet, landscape,
   desktop mode). Its server-rendered controls remain available there. */
@media (min-width: 992px) {
  body.ij-site.ij-dashboard-mobile .ij-dash-mobile {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.25rem;
  }
  body.ij-site.ij-dashboard-mobile .ij-dash-mobile .tab-content { max-width: 100%; }
  body.ij-site.ij-dashboard-mobile .ijm-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
  body.ij-site.ij-dashboard-mobile .ijm-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1rem;
    min-height: 44px;
    border: 1px solid var(--ij-ui-line);
    border-radius: 8px;
    background: #fff;
    color: var(--ij-ui-text);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  body.ij-site header.instantjob-header .ij-nav-container { gap: 1rem !important; }
  body.ij-site #mainNav, body.ij-site #mainNav .ij-nav-menu { gap: .8rem; }
  body.ij-site header.instantjob-header .ij-btn { padding: .55rem .7rem; font-size: .8rem; }
}
@media (max-width: 991.98px) {
  body.ij-site.ij-dashboard-desktop #dashboardTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-wrap: wrap !important;
    overflow: visible;
    white-space: normal;
  }
  body.ij-site.ij-dashboard-desktop #dashboardTabs .nav-item { min-width: 0; }
  body.ij-site.ij-dashboard-desktop #dashboardTabs .nav-link {
    width: 100%;
    height: 100%;
    min-height: 44px;
    white-space: normal;
    border: 1px solid var(--ij-ui-line);
    border-radius: 8px;
    line-height: 1.4;
  }
  body.ij-site #mainNav { width: min(90vw, 360px); padding-left: 1.25rem; padding-right: 1.25rem; }
  body.ij-site #mainNav .ij-nav-menu { align-items: stretch; }
  body.ij-site #mainNav .ij-has-submenu { width: 100%; }
  body.ij-site #mainNav .ij-submenu { width: 100%; }
  body.ij-site .ij-dash-mobile { font-size: .9375rem !important; }
  body.ij-site .ij-dash-mobile :is(.btn, .ij-btn) { font-size: .9375rem !important; line-height: 1.4 !important; white-space: normal !important; }
  body.ij-site .ij-dash-mobile :is(.card, .card-hwk, .card-hwk-1, .card-hwk-2) {
    background: #fff !important;
    box-shadow: none !important;
    border-radius: var(--ij-ui-radius) !important;
  }
  body.ij-site .ij-dash-mobile .card-hwk-2 .row.g-3.small.mb-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: .75rem !important; }
  body.ij-site .ij-dash-mobile .card-hwk-2 .row.g-3.small.mb-3 :is(.text-uppercase, .mt-1, .badge),
  body.ij-site .ij-dash-mobile .card-hwk-2 .row.g-3.small.mb-3 .mt-1 * {
    font-size: .8125rem !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    letter-spacing: normal !important;
  }
  body.ij-site .ij-dash-mobile .ijm-nav-btn span { font-size: .6875rem !important; white-space: normal !important; line-height: 1.3 !important; overflow: visible !important; }
  body.ij-site .ij-dash-mobile .ijm-nav-btn { min-width: 0; min-height: 52px !important; }
  body.ij-site :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { font-size: 1rem !important; line-height: 1.5; }
}
@media (max-width: 640px) {
  body.ij-site :is(.ij-profile-wrap, .ij-auth-wrap, .ij-settings-wrap, .ij-help-wrap, .ij-hub-wrap) { padding-left: 1rem; padding-right: 1rem; margin-top: 1.5rem; }
  body.ij-site :is(.ij-profile-head, .ij-profile-left, .ij-avatar-row) { flex-wrap: wrap; }
  body.ij-site :is(.ij-profile-actions, .ij-settings-actions, .ij-btn-row,
    .ij-delete-footer, .ij-report-actions, .ij-onb-actions, #regWizard .actions) > :is(a, button) { flex: 1 1 100%; width: 100%; margin-left: 0; }
  body.ij-site :is(.ij-profile-wrap .ij-card, .ij-settings-card) { padding: 1rem; }
  body.ij-site .ij-job-thumb { flex-basis: auto; max-width: 100%; width: 100%; }
  body.ij-site :is(.ij-info-row, .ij-profile-meta) { gap: .35rem .75rem; }
  body.ij-site .ij-info-label { min-width: 0; flex-basis: 100%; }
  body.ij-site .ij-kv { grid-template-columns: minmax(0, 1fr); }
  body.ij-site .nx-actions > :is(#ij-prev, #ij-next, #ij-submit) { min-width: 0; margin-left: 0; }
  /* A permanent label remains readable when long field values wrap. */
  body.ij-site #regWizard .ui-field label { position: static; display: block; padding: 0 0 .4rem; margin: 0; font-size: .875rem; color: var(--ij-ui-muted); transform: none; line-height: 1.5; }
  body.ij-site #regWizard .ui-field { display: flex; flex-direction: column; }
  body.ij-site #regWizard .ui-field > label { order: -1; }
  body.ij-site #chatPane { right: 1rem; width: calc(100vw - 2rem); }
}
@media (max-width: 575.98px) {
  body.ij-site header.instantjob-header .ij-user-trigger .ij-header-credits { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.ij-site *, body.ij-site *::before, body.ij-site *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
