/* ============================================================================
   NEURAL JOBS — COMPONENT LAYER
   One rule per UI primitive, matched to Astryx's MEASURED component values
   (read off the self-hosted Astryx proof page, not approximated):
     button  32px tall, 12px radius, 500 weight, 12px x-pad
     badge   20px pill (radius 9999), 13px font, 8px x-pad
     card    18px radius, 1px border @ .10, soft two-layer shadow
     input   52px pill on the WRAPPER (.fromGroup), bare input inside
   Loads AFTER neural-jobs.css. Goal: every button/input/badge/card/modal/
   dropdown/pagination/breadcrumb/tab/alert looks like the same design system
   whether it is Blade markup or an Astryx React island.
   ============================================================================ */

:root {
  --njc-btn-h: 40px;            /* Astryx is 32px; web forms need a touch more hit area */
  --njc-btn-radius: 12px;       /* --radius-element */
  --njc-card-radius: 18px;      /* --radius-container */
  --njc-pill: 9999px;           /* --radius-full */
  --njc-accent: #6D5DFB;        /* brand violet, for fills */
  --njc-accent-text: #CEBCFF;   /* Astryx dark-mode accent, for text/links */
  --njc-on-accent: #ffffff;
  --njc-surface: #1C1B21;
  --njc-surface-2: #312F36;
  --njc-border: rgba(242,239,249,.10);
  --njc-border-strong: #6A6673;
  --njc-text: #E4E1EA;
  --njc-text-mid: #ADA9B7;
  --njc-text-mut: #8B97AE;
  --njc-success: #34D399; --njc-success-bg: rgba(52,211,153,.14);
  --njc-danger:  #F87171; --njc-danger-bg:  rgba(248,113,113,.14);
  --njc-warning: #FBBF24; --njc-warning-bg: rgba(251,191,36,.14);
  --njc-info:    #60A5FA; --njc-info-bg:    rgba(96,165,250,.14);
  --njc-shadow: 0 1px 1px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.2);
}

/* ---------------------------------------------------------------- BUTTONS */
/* Base. NOTE: no `:not()` chains here — each :not() adds a class point of
   specificity, and an earlier (0,4,1) base selector silently out-ranked the
   (0,2,1) variant rules below, killing the outline-button borders. */
body .btn,
body button.btn,
body a.btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px;
  min-height: var(--njc-btn-h) !important; padding: 0 18px !important;
  border-radius: var(--njc-btn-radius) !important;
  font-weight: 500 !important; font-size: 15px !important; line-height: 1 !important;
  border: 1px solid transparent !important; box-shadow: none !important;
  transition: background-color .15s, border-color .15s, color .15s, transform .1s;
  text-decoration: none !important; white-space: nowrap;
}
body .btn:active { transform: translateY(1px); }
body .btn-lg { min-height: 48px !important; padding: 0 24px !important; font-size: 16px !important; }
body .btn-sm { min-height: 32px !important; padding: 0 12px !important; font-size: 13px !important; }

/* primary: brand fill */
body .btn.btn-primary, body .btn.btn-primary2-50, body .btn.btn-primary-50, body .btn.btn-success,
body .btn-primary, body .btn-primary2-50, body .btn-primary-50, body .btn-success {
  background: var(--njc-accent) !important; border-color: var(--njc-accent) !important; color: var(--njc-on-accent) !important;
}
body .btn-primary:hover, body .btn-primary2-50:hover, body .btn-primary-50:hover { background: #7E70FF !important; border-color: #7E70FF !important; }
/* outline / secondary / light: quiet surface */
body .btn.btn-outline-primary, body .btn.btn-outline-plain, body .btn.btn-secondary, body .btn.btn-light, body .btn.btn-outline-light, body .btn.btn-star-white,
body .btn-outline-primary, body .btn-outline-plain, body .btn-secondary, body .btn-light, body .btn-outline-light, body .btn-star-white {
  background: transparent !important; border-color: var(--njc-border-strong) !important; color: var(--njc-text) !important;
}
body .btn.btn-outline-primary:hover, body .btn.btn-outline-plain:hover, body .btn.btn-secondary:hover, body .btn.btn-light:hover {
  background: var(--njc-surface-2) !important; border-color: var(--njc-accent) !important; color: var(--njc-text) !important;
}
body .btn.btn-outline-primary { color: var(--njc-accent-text) !important; border-color: rgba(109,93,251,.55) !important; }
/* semantic */
body .btn.btn-danger, body .btn-danger  { background: var(--njc-danger) !important; border-color: var(--njc-danger) !important; color: #1a0b0b !important; }
body .btn.btn-warning, body .btn-warning { background: var(--njc-warning) !important; border-color: var(--njc-warning) !important; color: #1a1505 !important; }
body .btn-link    { background: transparent !important; border: 0 !important; color: var(--njc-accent-text) !important; padding: 0 !important; min-height: 0 !important; }
body .btn-close   { filter: invert(1) grayscale(1) opacity(.7); }
body .btn:disabled, body .btn.disabled { opacity: .5; cursor: not-allowed; }
body .btn:focus-visible { outline: 2px solid var(--njc-accent) !important; outline-offset: 2px; }

/* ----------------------------------------------------------------- INPUTS */
/* Pill on the wrapper; bare control inside (Astryx TextInput pattern). */
body .fromGroup, body .form-group, body .form-item, body .input-group {
  position: relative;
}
body .form-control, body .form-select, body textarea.form-control,
body input[type="text"], body input[type="email"], body input[type="password"],
body input[type="number"], body input[type="search"], body input[type="url"], body input[type="tel"],
body textarea, body select {
  background: var(--njc-surface-2) !important; color: var(--njc-text) !important;
  border: 1px solid var(--njc-border) !important; border-radius: var(--njc-btn-radius) !important;
  min-height: 48px !important; padding: 0 16px !important; font-size: 15px !important;
  box-shadow: none !important; outline: none !important;
}
body textarea, body textarea.form-control { min-height: 120px !important; padding: 12px 16px !important; line-height: 1.5; resize: vertical; }
body .form-control::placeholder, body input::placeholder, body textarea::placeholder { color: var(--njc-text-mut) !important; }
body .form-control:focus, body input:focus, body textarea:focus, body select:focus {
  border-color: var(--njc-accent) !important; box-shadow: 0 0 0 3px rgba(109,93,251,.22) !important;
}
body .form-control.is-invalid, body .is-invalid { border-color: var(--njc-danger) !important; }
body .invalid-feedback, body .text-danger.error { color: var(--njc-danger) !important; font-size: 13px; }
body label, body .form-label, body .col-form-label { color: var(--njc-text-mid) !important; font-size: 14px; font-weight: 500; }

/* checkbox / radio / switch */
body .form-check-input { width: 18px !important; height: 18px !important; background: var(--njc-surface-2) !important; border: 1px solid var(--njc-border-strong) !important; border-radius: 5px !important; box-shadow: none !important; }
body .form-check-input[type="radio"] { border-radius: 50% !important; }
body .form-check-input:checked { background-color: var(--njc-accent) !important; border-color: var(--njc-accent) !important; }
body .form-switch .form-check-input { width: 38px !important; height: 20px !important; border-radius: var(--njc-pill) !important; }
body .form-check-label { color: var(--njc-text-mid) !important; }

/* select2 (141 uses) — restyle its generated markup */
body .select2-container--default, body .select2-container--bootstrap .select2-selection--single,
body .select2-container--default, body .select2-container--bootstrap .select2-selection--multiple,
body .select2-container .select2-selection {
  background: var(--njc-surface-2) !important; border: 1px solid var(--njc-border) !important;
  border-radius: var(--njc-btn-radius) !important; min-height: 48px !important; color: var(--njc-text) !important;
}
body .select2-container--default, body .select2-container--bootstrap .select2-selection--single .select2-selection__rendered { color: var(--njc-text) !important; line-height: 46px !important; padding-left: 16px !important; }
body .select2-container--default, body .select2-container--bootstrap .select2-selection--single .select2-selection__arrow { height: 46px !important; }
body .select2-container--default, body .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { border-color: var(--njc-text-mid) transparent transparent !important; }
body .select2-dropdown { background: var(--njc-surface) !important; border: 1px solid var(--njc-border) !important; border-radius: var(--njc-btn-radius) !important; box-shadow: var(--njc-shadow) !important; }
body .select2-container--default, body .select2-container--bootstrap .select2-results__option { color: var(--njc-text-mid) !important; padding: 10px 14px !important; }
body .select2-container--default, body .select2-container--bootstrap .select2-results__option--highlighted { background: var(--njc-surface-2) !important; color: var(--njc-text) !important; }
body .select2-container--default, body .select2-container--bootstrap .select2-results__option[aria-selected="true"] { background: rgba(109,93,251,.18) !important; color: var(--njc-text) !important; }
body .select2-search--dropdown .select2-search__field { background: var(--njc-surface-2) !important; border: 1px solid var(--njc-border) !important; color: var(--njc-text) !important; border-radius: 8px !important; }
body .select2-container--default, body .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { background: rgba(109,93,251,.18) !important; border: 0 !important; color: var(--njc-text) !important; border-radius: var(--njc-pill) !important; }
body .select2-container--default, body .select2-container--bootstrap.select2-container--focus .select2-selection { border-color: var(--njc-accent) !important; box-shadow: 0 0 0 3px rgba(109,93,251,.22) !important; }

/* -------------------------------------------------------- BADGES / CHIPS */
body .badge, body .badge-2, body .badge-cutom, body .badge-pill,
body [class*="tw-rounded-full"][class*="tw-px"], body .tag, body .chip {
  display: inline-flex !important; align-items: center !important;
  height: 22px !important; padding: 0 10px !important;
  border-radius: var(--njc-pill) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important;
  background: rgba(228,225,234,.14) !important; color: var(--njc-text) !important; border: 0 !important;
}
body .badge.bg-primary, body .bg-primary.badge, body .badge-primary { background: rgba(109,93,251,.22) !important; color: var(--njc-accent-text) !important; }
body .badge.bg-success, body .badge-success { background: var(--njc-success-bg) !important; color: var(--njc-success) !important; }
body .badge.bg-danger,  body .badge-danger  { background: var(--njc-danger-bg)  !important; color: var(--njc-danger)  !important; }
body .badge.bg-warning, body .badge-warning { background: var(--njc-warning-bg) !important; color: var(--njc-warning) !important; }
body .badge.bg-secondary, body .badge.bg-dark { background: rgba(228,225,234,.14) !important; color: var(--njc-text) !important; }


/* Tailwind arbitrary-value chips ("Full Time", type pills, etc.) — these are
   NOT .badge; they're spans with tw-rounded-[3px]/tw-rounded-full + tw-bg-[#hex].
   Normalize them to the same 20-22px pill as Astryx Badge. */
body span[class*="tw-rounded-["][class*="tw-bg-["],
body span[class*="tw-rounded-full"][class*="tw-bg-["],
body a[class*="tw-rounded-["][class*="tw-bg-["],
body div[class*="tw-rounded-["][class*="tw-bg-["][class*="tw-px-"] {
  display: inline-flex !important; align-items: center !important;
  height: 22px !important; padding: 0 10px !important;
  border-radius: var(--njc-pill) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1 !important;
  border: 0 !important;
}


/* Outlined pills — company industry / job-count tags use tw-rounded-[52px]
   with a transparent bg and a 1px border (no tw-bg-[#hex], so the filled-chip
   rule above skips them). Normalize to the same height and give them a clear
   outline so they read as deliberate tags, not faint leftovers. */
body span[class*="tw-rounded-[52px]"],
body a[class*="tw-rounded-[52px]"],
body span[class*="tw-rounded-[40px]"],
body span[class*="tw-rounded-[50px]"] {
  display: inline-flex !important; align-items: center !important;
  height: 26px !important; padding: 0 12px !important;
  border-radius: var(--njc-pill) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important;
  background: transparent !important; color: var(--njc-text-mid) !important;
  border: 1px solid var(--njc-border-strong) !important;
}


/* Job-type badge on job-detail ("FULL TIME") ships as a solid saturated green
   (#0BA02C) with white text — the one chip still on the vendor palette. Bring
   it onto the muted success tint every other chip uses. Matched by its
   arbitrary-value bg class. */
body span[class*="tw-bg-[#0BA02C]"],
body span[class*="bg-success"],
body .badge.bg-success {
  background: var(--njc-success-bg) !important;
  color: var(--njc-success) !important;
}

/* ------------------------------------------------------------------ CARDS */
body .card, body .tw-card, body .rt-card, body .jobcardStyle1, body .job-card, body .company-card, body .candidate-card, body .panel {
  background: var(--njc-surface) !important; border: 1px solid var(--njc-border) !important;
  border-radius: var(--njc-card-radius) !important; box-shadow: var(--njc-shadow) !important; color: var(--njc-text);
}
body .card-header, body .card-footer { background: transparent !important; border-color: var(--njc-border) !important; }
body .jobcardStyle1:hover, body .job-card:hover, body .company-card:hover { border-color: rgba(109,93,251,.45) !important; }

/* ----------------------------------------------------------------- MODALS */
body .modal-content { background: var(--njc-surface) !important; border: 1px solid var(--njc-border) !important; border-radius: var(--njc-card-radius) !important; box-shadow: 0 24px 64px rgba(0,0,0,.5) !important; color: var(--njc-text); }
body .modal-header, body .modal-footer { border-color: var(--njc-border) !important; }
body .modal-title { color: var(--njc-text) !important; }
body .modal-backdrop.show { opacity: .7; }

/* ---------------------------------------------------------- DROPDOWN MENUS */
body .dropdown-menu { background: var(--njc-surface) !important; border: 1px solid var(--njc-border) !important; border-radius: var(--njc-btn-radius) !important; box-shadow: var(--njc-shadow) !important; padding: 6px !important; }
body .dropdown-item { color: var(--njc-text-mid) !important; border-radius: 8px !important; padding: 8px 12px !important; }
body .dropdown-item:hover, body .dropdown-item:focus, body .dropdown-item.active { background: var(--njc-surface-2) !important; color: var(--njc-text) !important; }
body .dropdown-divider { border-color: var(--njc-border) !important; }

/* ------------------------------------------------------------- PAGINATION */
body .pagination .page-link { background: var(--njc-surface-2) !important; border: 1px solid var(--njc-border) !important; color: var(--njc-text-mid) !important; border-radius: 10px !important; margin: 0 3px; min-width: 40px; text-align: center; }
body .pagination .page-item.active .page-link { background: var(--njc-accent) !important; border-color: var(--njc-accent) !important; color: #fff !important; }
body .pagination .page-link:hover { background: var(--njc-surface) !important; color: var(--njc-text) !important; }
body .pagination .page-item.disabled .page-link { opacity: .45; }

/* ------------------------------------------------------------ BREADCRUMBS */
body .breadcrumb, body .breadcrumbs { background: transparent !important; }
body .breadcrumb-item, body .breadcrumb a, body .breadcrumbs a { color: var(--njc-text-mid) !important; }
body .breadcrumb-item.active, body .breadcrumb .active { color: var(--njc-text) !important; }
body .breadcrumb-item + .breadcrumb-item::before { color: var(--njc-text-mut) !important; }

/* ------------------------------------------------------------------- TABS */
body .nav-tabs { border-bottom: 1px solid var(--njc-border) !important; }
body .nav-tabs .nav-link { color: var(--njc-text-mid) !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; }
body .nav-tabs .nav-link.active { color: var(--njc-text) !important; border-bottom-color: var(--njc-accent) !important; }

/* ----------------------------------------------------------------- ALERTS */
body .alert { border-radius: var(--njc-btn-radius) !important; border: 1px solid transparent !important; }
body .alert-success { background: var(--njc-success-bg) !important; color: var(--njc-success) !important; border-color: rgba(52,211,153,.3) !important; }
body .alert-danger  { background: var(--njc-danger-bg)  !important; color: var(--njc-danger)  !important; border-color: rgba(248,113,113,.3) !important; }
body .alert-warning { background: var(--njc-warning-bg) !important; color: var(--njc-warning) !important; border-color: rgba(251,191,36,.3) !important; }
body .alert-info    { background: var(--njc-info-bg)    !important; color: var(--njc-info)    !important; border-color: rgba(96,165,250,.3) !important; }

/* ---------------------------------------------------------------- AVATARS */
body .avatar, body .icon-thumb img, body .company-logo img, body img.rounded-circle {
  border-radius: 12px !important; background: var(--njc-surface-2); border: 1px solid var(--njc-border); object-fit: contain;
}
body img.rounded-circle { border-radius: 50% !important; }