/* ==========================================================================
   JobConnect — Job Portal
   Bootstrap 5 override + custom theme
   Brand: blue #1565E8 / orange #FF6A00 / navy #0C1729
   Fonts: Poppins (headings) + Inter (UI)
   ========================================================================== */

:root {
  /* Brand */
  --jc-blue: #1565E8;
  --jc-blue-dark: #0F4FC4;
  --jc-blue-press: #0A3FB5;
  --jc-blue-wash: #E8F1FE;
  --jc-blue-soft: #C6DDFC;
  --jc-orange: #FF6A00;
  --jc-orange-dark: #D14E00;
  --jc-orange-wash: #FFF1E6;
  --jc-navy: #0C1729;
  --jc-navy-2: #0F1F3D;

  /* Neutrals */
  --jc-bg: #F4F6FA;
  --jc-bg-2: #EDF1F8;
  --jc-bg-3: #E7ECF4;
  --jc-line: #E4E9F2;
  --jc-line-2: #DAE1EC;
  --jc-line-3: #C4CEDC;
  --jc-muted-3: #A9B5C7;
  --jc-muted: #5B6B85;
  --jc-text: #2A3A54;
  --jc-strong: #172B4D;
  --jc-green: #1E8E5A;

  /* Type */
  --jc-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jc-font-head: 'Poppins', 'Inter', system-ui, sans-serif;

  /* Radii + shadows */
  --jc-r-sm: 8px;
  --jc-r-md: 10px;
  --jc-r-lg: 14px;
  --jc-shadow-xs: 0 1px 2px rgba(23, 43, 77, .05);
  --jc-shadow-sm: 0 1px 3px rgba(23, 43, 77, .07);
  --jc-shadow-md: 0 4px 14px rgba(23, 43, 77, .08);
  --jc-shadow-lg: 0 12px 32px rgba(23, 43, 77, .12);

  /* Bootstrap remap */
  --bs-primary: #1565E8;
  --bs-primary-rgb: 21, 101, 232;
  --bs-body-font-family: var(--jc-font);
  --bs-body-color: #2A3A54;
  --bs-body-bg: #F4F6FA;
  --bs-border-color: #E4E9F2;
  --bs-link-color: #1565E8;
  --bs-link-hover-color: #0F4FC4;
  --bs-border-radius: 10px;
}

/* --------------------------------------------------------------- base ---- */

/* Hide number input spinner arrows */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: var(--jc-font);
  font-size: 14px;
  color: var(--jc-text);
  background: var(--jc-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

body:not(.jv-admin) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body:not(.jv-admin) #jcMain {
  flex: 1 0 auto;
}

body:not(.jv-admin) .jc-footer {
  flex-shrink: 0;
  margin-top: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
.jc-head {
  font-family: var(--jc-font-head);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--jc-strong);
}

a {
  text-decoration: none;
  color: var(--jc-blue);
}

a:hover {
  color: var(--jc-blue-dark);
}

::selection {
  background: var(--jc-blue-soft);
}

.jc-container {
  max-width: 1280px;
}

:focus-visible {
  outline: 2px solid var(--jc-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.jc-skip {
  position: absolute;
  top: -999px;
  left: -999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}

.jc-skip:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  background: var(--jc-blue);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--jc-r-sm);
  box-shadow: var(--jc-shadow-md);
  text-decoration: none;
  font-weight: 600;
  z-index: 9999;
}

/* -------------------------------------------------------------- forms ---- */

.jc-form-label,
.form-label {
  font-family: var(--jc-font, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--jc-strong, #1E293B);
  margin-bottom: 6px;
  display: inline-block;
  line-height: 1.4;
}

.jc-form-label .req,
.form-label .req,
.req.text-danger,
.text-danger.req {
  color: #EF4444 !important;
  font-weight: 700;
  font-size: 13.5px;
  margin-left: 2px;
  display: inline-block;
}

/* ------------------------------------------------------------ buttons ---- */

.btn {
  font-family: var(--jc-font, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  border-radius: var(--jc-r-sm, 8px);
  padding: 8px 16px;
  font-size: 13.5px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all .16s ease;
}

.btn:focus,
.btn:active {
  box-shadow: none !important;
}

.btn-jc {
  background: var(--jc-blue, #1565E8);
  border: 1px solid var(--jc-blue, #1565E8);
  color: #fff !important;
  box-shadow: 0 4px 12px -2px rgba(21, 101, 232, 0.32);
}

.btn-jc:hover {
  background: var(--jc-blue-dark, #0F4FC4);
  border-color: var(--jc-blue-dark, #0F4FC4);
  color: #fff !important;
  box-shadow: 0 6px 16px -2px rgba(21, 101, 232, 0.42);
  transform: translateY(-1px);
}

.btn-jc:active {
  background: var(--jc-blue-press, #0A3FB5);
  transform: scale(.985);
  color: #fff !important;
}

.btn-jc-outline {
  background: #fff;
  border: 1px solid var(--jc-blue, #1565E8);
  color: var(--jc-blue, #1565E8);
  transition: all .16s ease;
}

.btn-jc-outline:hover {
  background: var(--jc-blue-wash, #E8F1FE);
  color: var(--jc-blue-dark, #0F4FC4);
}

.btn-jc-ghost {
  background: #fff;
  border: 1px solid var(--jc-line-2, #DAE1EC);
  color: var(--jc-strong, #172B4D) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-jc-ghost:hover {
  background: var(--jc-bg-2, #EDF1F8);
  border-color: var(--jc-line-3, #C4CEDC);
  color: var(--jc-strong, #172B4D) !important;
}

/* ------------------------------------------------------------- header ---- */

.jc-header {
  background: #fff;
  border-bottom: 1px solid var(--jc-line);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.jc-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.jc-logo img {
  height: 36px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media(max-width : 575px) {
  .jc-logo img {
    height: 25px;
  }
}

.jc-footer .jc-logo img,
.jc-footer .jc-logo-img {
  height: 34px;
}

.jc-auth-lockup .jc-logo-img {
  height: 40px;
}

.jc-logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #1565E8 0%, #1565E8 48%, #FF6A00 52%, #FF9A2E 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--jc-font-head);
  font-size: 13px;
  font-weight: 700;
}

.jc-logo-text {
  font-family: var(--jc-font-head);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--jc-strong);
}

.jc-logo-text span {
  color: var(--jc-orange);
}

.jc-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.jc-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--jc-text);
  white-space: nowrap;
  padding: 20px 0;
  border-bottom: 2px solid transparent;
}

.jc-nav a:hover {
  color: var(--jc-blue);
}

.jc-nav a.active {
  color: var(--jc-blue);
  font-weight: 600;
  border-bottom-color: var(--jc-orange);
}

.jc-tag-new {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--jc-orange);
  border-radius: 4px;
  padding: 2px 5px;
}

/* ------------------------------------------------------------- search ---- */

.jc-searchbar-wrap {
  background: #fff;
  border-bottom: 1px solid var(--jc-line);
}

.jc-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--jc-line-2);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--jc-shadow-xs);
}

.jc-search-field {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  height: 44px;
  min-width: 0;
  flex: 1 1 200px;
  position: relative;
}

.jc-search-field input {
  border: 0;
  outline: none;
  width: 100%;
  min-width: 0;
  font-size: 14px;
  color: var(--jc-strong);
  background: transparent;
}

.jc-search-field input::placeholder {
  color: var(--jc-muted);
}

.jc-search-divider {
  width: 1px;
  height: 26px;
  background: var(--jc-line);
}

.jc-searchbar .btn {
  height: 44px;
  padding-inline: 20px;
  flex-shrink: 0;
}

.jc-city-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 240px;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--jc-line-2);
  border-radius: var(--jc-r-md);
  box-shadow: var(--jc-shadow-md);
  padding: 6px;
  margin: 0;
  list-style: none;
  z-index: 1060;
}

.jc-city-dropdown.show {
  display: block;
}

.jc-city-dropdown li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--jc-r-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--jc-text);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.jc-city-dropdown li:hover,
.jc-city-dropdown li.active {
  background: var(--jc-bg-2);
  color: var(--jc-blue);
}

/* -------------------------------------------------------------- chips ---- */

.jc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--jc-text);
  background: #fff;
  border: 1px solid var(--jc-line-2);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.jc-chip:hover {
  background: var(--jc-bg-2);
}

.jc-chip.active {
  background: var(--jc-blue-wash);
  border-color: var(--jc-blue);
  color: var(--jc-blue-dark);
}

.jc-chip-scroller {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.jc-chip-scroller::-webkit-scrollbar {
  display: none;
}

/* ------------------------------------------------------------ filters ---- */

.jc-panel {
  background: #fff;
  border: 1px solid var(--jc-line);
  border-radius: var(--jc-r-lg);
}

.jc-filters {
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.jc-filters::-webkit-scrollbar {
  width: 5px;
}

.jc-filters::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.jc-filters::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.jc-filter-block {
  padding: 16px;
  border-bottom: 1px solid var(--jc-line);
}

.jc-filter-block:last-child {
  border-bottom: 0;
}

.jc-filter-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--jc-muted);
}

.jc-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--jc-text);
  cursor: pointer;
  user-select: none;
  padding: 1px 0;
}

.jc-opt:hover {
  color: var(--jc-strong);
}

.jc-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

.jc-box,
.jc-radio {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--jc-line-3);
  background: #fff;
  display: inline-grid;
  place-items: center;
  transition: background .14s ease, border-color .14s ease;
}

.jc-box {
  border-radius: 4px;
}

.jc-radio {
  border-radius: 999px;
}

.jc-box svg {
  opacity: 0;
}

.jc-opt input:checked~.jc-box {
  background: var(--jc-blue);
  border-color: var(--jc-blue);
}

.jc-opt input:checked~.jc-box svg {
  opacity: 1;
}

.jc-opt input:checked~.jc-radio {
  border: 5px solid var(--jc-blue);
}

.jc-opt-count {
  font-size: 12px;
  color: var(--jc-muted);
  margin-left: auto;
}

.jc-filters input[type="range"].form-range,
.offcanvas-body input[type="range"].form-range,
input[type="range"].form-range {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 6px !important;
  border-radius: 99px !important;
  background: #E5E9F0;
  outline: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 10px 0 !important;
  cursor: pointer !important;
}

.jc-filters input[type="range"].form-range::-webkit-slider-runnable-track,
.offcanvas-body input[type="range"].form-range::-webkit-slider-runnable-track,
input[type="range"].form-range::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 6px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

.jc-filters input[type="range"].form-range::-moz-range-track,
.offcanvas-body input[type="range"].form-range::-moz-range-track,
input[type="range"].form-range::-moz-range-track {
  width: 100% !important;
  height: 6px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

.jc-filters input[type="range"].form-range::-moz-range-progress,
.offcanvas-body input[type="range"].form-range::-moz-range-progress,
input[type="range"].form-range::-moz-range-progress {
  height: 6px !important;
  border-radius: 99px !important;
  background: #1565E8 !important;
}

.jc-filters input[type="range"].form-range::-webkit-slider-thumb,
.offcanvas-body input[type="range"].form-range::-webkit-slider-thumb,
input[type="range"].form-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: -6px !important;
  border-radius: 50% !important;
  background: #1565E8 !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 1px 4px rgba(21, 101, 232, 0.4), 0 0 0 1px rgba(21, 101, 232, 0.2) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.jc-filters input[type="range"].form-range::-moz-range-thumb,
.offcanvas-body input[type="range"].form-range::-moz-range-thumb,
input[type="range"].form-range::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #1565E8 !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 1px 4px rgba(21, 101, 232, 0.4), 0 0 0 1px rgba(21, 101, 232, 0.2) !important;
  cursor: pointer !important;
}

.jc-filters input[type="range"].form-range:hover::-webkit-slider-thumb,
.offcanvas-body input[type="range"].form-range:hover::-webkit-slider-thumb,
input[type="range"].form-range:hover::-webkit-slider-thumb {
  transform: scale(1.25) !important;
  box-shadow: 0 2px 8px rgba(21, 101, 232, 0.5), 0 0 0 4px rgba(21, 101, 232, 0.2) !important;
}

.jc-mini-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--jc-line-2);
  border-radius: var(--jc-r-sm);
  padding: 0 10px;
  height: 36px;
}

.jc-mini-search input {
  border: 0;
  outline: none;
  background: transparent;
  width: 100%;
  min-width: 0;
  font-size: 13px;
}

/* --------------------------------------------------------- job cards ---- */

.jc-sort-select {
  font-size: 13px;
  font-weight: 600;
  color: var(--jc-strong);
  background: #fff;
  border: 1px solid var(--jc-line-2);
  border-radius: var(--jc-r-sm);
  padding: 8px 10px;
  outline: none;
  cursor: pointer;
}

/* --------------------------------------------------- mobile filter bar --- */
.jc-mobile-bar {
  padding: 14px 0 10px;
  background: #fff;
  border-bottom: 1px solid var(--jc-line);
  margin-bottom: 12px;
}

.jc-mobile-bar .btn-jc-ghost {
  height: 42px;
  background: #fff;
  border: 1px solid var(--jc-line-2);
  border-radius: var(--jc-r-sm);
  font-weight: 600;
  color: var(--jc-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.jc-mobile-bar .btn-jc-ghost:hover {
  background: var(--jc-bg-2);
  border-color: var(--jc-blue);
  color: var(--jc-blue);
}

.jc-mobile-bar .jc-sort-select {
  height: 42px;
  border-radius: var(--jc-r-sm);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.jc-job {
  position: relative;
  background: #fff;
  border: 1px solid var(--jc-line);
  border-radius: var(--jc-r-lg);
  padding: 16px 18px;
  cursor: pointer;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.jc-job:hover {
  box-shadow: var(--jc-shadow-md);
  border-color: #7FB2F7;
}

.jc-job.featured::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: var(--jc-orange);
}

.jc-logo-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: var(--jc-font-head);
  font-size: 18px;
  font-weight: 700;
}

.jc-job-title {
  font-family: var(--jc-font-head);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--jc-blue);
  margin: 0;
}

.jc-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--jc-muted);
}

.jc-meta.salary {
  color: var(--jc-green);
  font-weight: 600;
}

.jc-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: #2A3A54;
  background: var(--jc-bg-2);
  border-radius: 6px;
  padding: 5px 9px;
}

.jc-pill.featured {
  color: #C04200;
  background: #FFF1E6;
  border: 1px solid #FFD8BA;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.jc-pill.urgent {
  color: var(--jc-orange-dark);
  background: var(--jc-orange-wash);
  font-weight: 600;
}

.jc-pill.skill {
  color: var(--jc-blue);
  background: var(--jc-blue-wash);
  font-weight: 500;
  font-size: 12.5px;
  padding: 6px 10px;
}

.jc-pill.benefit {
  color: #2A3A54;
  background: #fff;
  border: 1px solid var(--jc-line);
  font-size: 12.5px;
  padding: 6px 10px;
}

.jc-save {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  border-radius: var(--jc-r-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--jc-muted-3);
}

.jc-save:hover {
  background: var(--jc-bg-2);
}

.jc-save.saved {
  color: var(--jc-blue);
}

.jc-save.saved svg {
  fill: var(--jc-blue);
}

.jc-easy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--jc-blue);
}

.jc-job-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--jc-line);
}

/* ------------------------------------------------------- pagination ---- */

.jc-page-btn {
  min-width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border-radius: var(--jc-r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--jc-text);
  background: #fff;
  border: 1px solid var(--jc-line-2);
  cursor: pointer;
}

.jc-page-btn:hover {
  background: var(--jc-bg-2);
}

.jc-page-btn.active {
  background: var(--jc-blue);
  border-color: var(--jc-blue);
  color: #fff;
}

.jc-page-nav {
  font-size: 13px;
  font-weight: 600;
  color: var(--jc-blue);
  background: none;
  border: 0;
  padding: 8px 12px;
  cursor: pointer;
}

.jc-page-nav:disabled {
  color: var(--jc-muted-3);
  cursor: default;
}

/* -------------------------------------------------------- right rail ---- */

.jc-rail {
  position: sticky;
  top: 78px;
}

.jc-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--jc-bg-2);
  overflow: hidden;
}

.jc-progress>i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1565E8, #FF6A00);
}

.jc-promo {
  background: linear-gradient(160deg, #0F1F3D 0%, #14264A 100%);
  border-radius: var(--jc-r-lg);
  padding: 20px;
  color: #fff;
}

.jc-promo .jc-store {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--jc-r-sm);
  padding: 9px 0;
  cursor: pointer;
}

.jc-promo .jc-store:hover {
  background: rgba(255, 255, 255, .1);
}

/* ------------------------------------------------------------ drawer ---- */

.offcanvas.jc-drawer {
  width: min(620px, 100%);
}

.jc-drawer .offcanvas-header {
  border-bottom: 1px solid var(--jc-line);
  align-items: flex-start;
  gap: 14px;
  padding: 18px 24px;
}

.jc-drawer .offcanvas-body {
  padding: 20px 24px 34px;
}

.jc-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--jc-line);
  border: 1px solid var(--jc-line);
  border-radius: 12px;
  overflow: hidden;
}

.jc-meta-grid>div {
  background: #fff;
  padding: 13px 15px;
}

.jc-meta-grid dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--jc-muted);
  margin: 0;
}

.jc-meta-grid dd {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--jc-strong);
  margin: 5px 0 0;
}

.jc-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.jc-list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.8px;
  line-height: 1.6;
}

.jc-list.dot li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--jc-blue);
  margin-top: 8px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------- faq ---- */

.jc-faq {
  background: #fff;
  border-top: 1px solid var(--jc-line);
}

.jc-faq .accordion-item {
  border: 1px solid var(--jc-line);
  border-radius: 12px !important;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
}

.jc-faq .accordion-button {
  font-family: var(--jc-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--jc-strong);
  background: #fff;
  padding: 15px 18px;
  box-shadow: none !important;
}

.jc-faq .accordion-button:not(.collapsed) {
  background: var(--jc-bg);
  color: var(--jc-strong);
}

.jc-faq .accordion-button::after {
  width: 26px;
  height: 26px;
  background: var(--jc-bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23172B4D' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-radius: 999px;
  transition: transform .18s ease, background-color .18s ease;
}

.jc-faq .accordion-button:not(.collapsed)::after {
  transform: rotate(45deg);
  background-color: var(--jc-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.jc-faq .accordion-body {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--jc-muted);
  padding: 0 18px 16px;
}

/* --------------------------------------------------------- seo links ---- */

.jc-seo {
  background: var(--jc-bg);
  border-top: 1px solid var(--jc-line);
}

.jc-seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 24px;
}

.jc-seo-grid a {
  font-size: 13.2px;
  color: var(--jc-muted);
}

.jc-seo-grid a:hover {
  color: var(--jc-blue);
}

/* ------------------------------------------------------------ footer ---- */

.jc-footer {
  background: var(--jc-navy);
  color: #fff;
}

.jc-footer a {
  font-size: 13.2px;
  color: rgba(255, 255, 255, .72);
}

.jc-footer a:hover {
  color: #fff;
}

.jc-footer-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FF9A2E;
}

.jc-social {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}

.jc-social:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.jc-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.jc-footer-bottom a,
.jc-footer-bottom span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .5);
}

/* -------------------------------------------------------- responsive ---- */

@media (max-width: 991.98px) {
  .jc-filters {
    position: static;
    max-height: none;
  }

  .jc-rail {
    position: static;
  }
}

@media (max-width: 767.98px) {
  .jc-searchbar {
    padding: 8px;
  }

  .jc-search-divider {
    display: none;
  }

  .jc-search-field {
    flex: 1 1 100%;
    border: 1px solid var(--jc-line);
    border-radius: var(--jc-r-sm);
  }

  .jc-searchbar .btn {
    width: 100%;
  }

  .jc-job {
    padding: 14px;
  }

  .jc-job-title {
    font-size: 15px;
  }

  .jc-logo-box {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .jc-drawer .offcanvas-header,
  .jc-drawer .offcanvas-body {
    padding-inline: 16px;
  }
}

.jc-icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--jc-r-sm);
  display: inline-grid;
  place-items: center;
  color: var(--jc-muted);
  background: transparent;
  border: 0;
  font-size: 16px;
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}

.jc-icon-btn:hover {
  background: var(--jc-bg-2);
  color: var(--jc-strong);
}

.jc-icon-btn.is-active {
  color: var(--jc-blue);
  background: var(--jc-blue-wash);
}

.jc-icon-btn__count {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--jc-blue);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.jc-dot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--jc-orange);
  border: 1.5px solid #fff;
}

.jc-vr {
  width: 1px;
  height: 24px;
  background: var(--jc-line);
  margin-inline: 4px;
}

.jc-btn-post {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--jc-r-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--jc-strong);
  white-space: nowrap;
}

.jc-btn-post:hover {
  background: var(--jc-bg-2);
  color: var(--jc-blue);
}

.jc-header .btn-sm {
  height: 36px;
  padding-inline: 16px;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
}

.jc-avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 3px;
  border-radius: 999px;
  border: 1px solid var(--jc-line-2);
  background: #fff;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}

.jc-avatar-btn:hover,
.jc-avatar-btn[aria-expanded="true"] {
  background: var(--jc-bg-2);
  border-color: var(--jc-line-3);
}

.jc-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--jc-navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.jc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jc-account-menu {
  display: none;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--jc-line-2);
  border-radius: var(--jc-r-md);
  box-shadow: var(--jc-shadow-md);
  background: #fff;
  z-index: 1060;
}

.jc-account-menu.show,
.dropdown-menu.show,
.dropdown.show>.dropdown-menu,
.jc-avatar-btn.show~.jc-account-menu,
.jc-avatar-btn[aria-expanded="true"]~.jc-account-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
}

.jc-account-menu__head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--jc-line);
  margin-bottom: 4px;
}

.jc-account-menu__name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--jc-strong);
}

.jc-account-menu__email {
  font-size: 12px;
  color: var(--jc-muted);
}

.jc-account-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--jc-r-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--jc-text);
  transition: background .12s ease, color .12s ease;
}

.jc-account-menu .dropdown-item i {
  font-size: 15px;
  color: var(--jc-muted);
}

.jc-account-menu .dropdown-item:hover {
  background: var(--jc-bg-2);
  color: var(--jc-strong);
}

.jc-account-menu .dropdown-item:hover i {
  color: var(--jc-blue);
}

.jc-account-menu .dropdown-item.text-danger:hover {
  background: #FFF1F0;
  color: #D32F2F;
}

.jc-account-menu .dropdown-item.text-danger:hover i {
  color: #D32F2F;
}

/* ------------------------------------------------------------- toast / flash ---- */
.jc-flash {
  position: fixed !important;
  top: 80px !important;
  right: 24px !important;
  z-index: 1095 !important;
  width: calc(100% - 32px) !important;
  max-width: 380px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  pointer-events: none !important;
}

.jc-flash>* {
  pointer-events: auto !important;
}

.jc-flash .jv-flash,
.jc-flash .alert {
  margin: 0 !important;
  border-radius: 10px !important;
  padding: 12px 38px 12px 16px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid transparent !important;
  animation: jcSlideIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.jc-flash .alert-success {
  background: #F0FDF4 !important;
  color: #15803D !important;
  border-color: #BBF7D0 !important;
}

.jc-flash .alert-danger {
  background: #FEF2F2 !important;
  color: #B91C1C !important;
  border-color: #FECACA !important;
}

.jc-flash .alert-warning {
  background: #FFFBEB !important;
  color: #B45309 !important;
  border-color: #FDE68A !important;
}

.jc-flash .alert-info {
  background: #F0F9FF !important;
  color: #0369A1 !important;
  border-color: #BAE6FD !important;
}

.jc-flash .btn-close {
  padding: 14px !important;
  font-size: 10px !important;
  opacity: 0.6 !important;
}

.jc-flash .btn-close:hover {
  opacity: 1 !important;
}

@keyframes jcSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   SEAMLESS NOTIFICATION FILTER TABS (CLEAN & MODERN, NO NESTED BG)
   ========================================================================== */
.jv-clean-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  text-decoration: none;
  transition: all 0.16s ease;
  line-height: 1.2;
}

.jv-clean-tab:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #CBD5E1;
}

.jv-clean-tab.is-active {
  background: #1565E8;
  color: #FFFFFF;
  border-color: #1565E8;
  box-shadow: 0 2px 8px rgba(21, 101, 232, 0.28);
}

.jv-clean-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  background: #E2E8F0;
  color: #334155;
  transition: all 0.16s ease;
}

.jv-clean-tab.is-active .jv-clean-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.jv-clean-tab.has-unread:not(.is-active) .jv-clean-badge {
  background: #FEE2E2;
  color: #DC2626;
}

/* ==========================================================================
   NOTIFICATIONS POPUP DROPDOWN (COMPACT & SLEEK)
   ========================================================================== */
.jv-notify {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  width: 340px !important;
  max-width: 90vw !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.15), 0 0 1px 1px rgba(15, 23, 42, 0.05) !important;
  margin-top: 6px !important;
  transform: none !important;
}

@keyframes jvNotifyPop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.jv-notify__header {
  padding: 9px 14px;
  background: #FAFAFC;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jv-notify__title {
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

.jv-notify__pill {
  background: #EEF4FF;
  color: #1565E8;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 12px;
}

.jv-notify__markall {
  font-size: 11.5px;
  font-weight: 600;
  color: #1565E8;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
}

.jv-notify__markall:hover {
  color: #0B4AB8;
  text-decoration: underline;
}

.jv-notify__list {
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.jv-notify__list::-webkit-scrollbar {
  width: 4px;
}

.jv-notify__list::-webkit-scrollbar-track {
  background: #F8FAFC;
}

.jv-notify__list::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

.jv-notify__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #F1F5F9;
  background: #FFFFFF;
  text-decoration: none;
  transition: all 0.15s ease;
  position: relative;
}

.jv-notify__item:last-child {
  border-bottom: none;
}

.jv-notify__item:hover {
  background: #F8FAFC;
}

.jv-notify__item.is-unread {
  background: #F4F8FF;
  border-left: 3px solid #1565E8;
}

.jv-notify__item.is-unread:hover {
  background: #EAF2FF;
}

.jv-notify__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #EEF4FF;
  color: #1565E8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

.jv-notify__item.is-unread .jv-notify__icon {
  background: #1565E8;
  color: #FFFFFF;
}

.jv-notify__title-text {
  font-size: 12.5px;
  font-weight: 600;
  color: #0F172A;
  line-height: 1.3;
  margin-bottom: 2px;
}

.jv-notify__msg {
  font-size: 11.5px;
  color: #64748B;
  line-height: 1.35;
  margin-bottom: 4px;
  word-break: break-word;
}

.jv-notify__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
}

.jv-notify__time {
  font-size: 10.5px;
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.jv-notify__actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.jv-btn-read {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #EBFDF5;
  border: 1px solid #A7F3D0;
  color: #059669;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.jv-btn-read:hover {
  background: #059669;
  border-color: #059669;
  color: #FFFFFF;
}

.jv-btn-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  color: #E11D48;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.jv-btn-dismiss:hover {
  background: #E11D48;
  border-color: #E11D48;
  color: #FFFFFF;
}

.jv-notify__footer {
  padding: 9px 14px;
  background: #FAFAFC;
  border-top: 1px solid #F1F5F9;
  text-align: center;
}

.jv-notify__footer a {
  font-size: 12px;
  font-weight: 600;
  color: #1565E8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}

.jv-notify__footer a:hover {
  color: #0B4AB8;
}

/* ==========================================================================
   SAVED JOB CARDS (LIGHT PASTEL & CLEAN PROFESSIONAL DESIGN)
   ========================================================================== */
.jv-light-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.jv-light-card:hover {
  border-color: #BFDBFE;
  box-shadow: 0 12px 24px -6px rgba(37, 99, 235, 0.1), 0 4px 8px -4px rgba(37, 99, 235, 0.05);
  transform: translateY(-3px);
}

.jv-light-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  width: 100%;
  min-width: 0;
}

.jv-light-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.jv-light-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jv-light-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.jv-light-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.jv-light-title a {
  color: #0F172A;
  text-decoration: none;
  transition: color 0.15s ease;
}

.jv-light-title a:hover {
  color: #2563EB;
}

.jv-light-company {
  font-size: 13px;
  color: #64748B;
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jv-light-bookmark-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #64748B;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 0 0 34px;
  flex-shrink: 0;
}

.jv-light-bookmark-btn:hover {
  background: #FEF2F2;
  color: #EF4444;
  border-color: #FCA5A5;
  transform: scale(1.05);
}

.jv-light-bookmark-btn.is-saved {
  background: #EFF6FF;
  color: #2563EB;
  border-color: #BFDBFE;
}

.jv-light-bookmark-btn.is-saved:hover {
  background: #FEF2F2;
  color: #EF4444;
  border-color: #FCA5A5;
}

.jv-light-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 0 10px;
  font-size: 13px;
  width: 100%;
  min-width: 0;
}

.jv-light-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #64748B;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jv-light-meta-salary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #059669;
  background: #ECFDF5;
  padding: 2.5px 8px;
  border-radius: 6px;
  border: 1px solid #A7F3D0;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}

.jv-light-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 14px;
  width: 100%;
}

.jv-light-chip {
  display: inline-flex;
  align-items: center;
  padding: 3.5px 10px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  line-height: 1.4;
  white-space: nowrap;
}

.jv-light-divider {
  border-top: 1px dashed #E2E8F0;
  margin: 14px 0 12px;
  width: 100%;
}

.jv-light-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6.5px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  background: #2563EB;
  border: 1px solid #2563EB;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.2);
  white-space: nowrap;
}

.jv-light-apply-btn:hover {
  color: #FFFFFF;
  background: #1D4ED8;
  border-color: #1D4ED8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.jv-light-applied-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5.5px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #15803D;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  line-height: 1.35;
  white-space: nowrap;
}

.jv-action-btn-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid #94A3B8;
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.jv-action-btn-group .jv-action-btn {
  border: none;
  border-right: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #475569;
  padding: 6px 12px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  text-decoration: none;
  line-height: 1;
}

.jv-action-btn-group .jv-action-btn:last-child {
  border-right: none;
}

.jv-action-btn-group .jv-action-btn:hover {
  background: #F1F5F9;
  color: #2563EB;
}

.jv-action-btn-group .jv-action-btn.active,
.jv-action-btn-group .jv-action-btn:active {
  background: #94A3B8;
  color: #FFFFFF;
}

/* ==========================================================================
   PUBLIC MESSAGES & CHAT INTERFACE (WhatsApp / Intercom Style)
   ========================================================================== */
.jv-chat-container {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  overflow: hidden;
  height: calc(100vh - 210px);
  min-height: 580px;
}

.jv-chat-sidebar {
  width: 360px;
  min-width: 300px;
  border-right: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}

.jv-chat-sidebar-header {
  padding: 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
}

.jv-chat-search {
  position: relative;
  margin-top: 12px;
}

.jv-chat-search input {
  background: #F3F4F6;
  border: 1px solid transparent;
  border-radius: 20px;
  padding-left: 36px;
  font-size: 13px;
  height: 38px;
  width: 100%;
  transition: all 0.2s ease;
}

.jv-chat-search input:focus {
  background: #FFFFFF;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.jv-chat-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  font-size: 14px;
}

.jv-chat-list {
  flex: 1;
  overflow-y: auto;
  background: #FAFAFA;
}

.jv-chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid #F3F4F6;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
  cursor: pointer;
}

.jv-chat-item:hover {
  background: #F1F5F9;
}

.jv-chat-item.is-active {
  background: #EFF6FF;
  border-left: 3.5px solid #1565E8;
}

.jv-chat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.jv-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #F8FAFC;
  min-width: 0;
}

.jv-chat-main-header {
  padding: 12px 20px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}

.jv-chat-messages-area {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #F8FAFC;
}

.jv-bubble-row {
  display: flex;
  flex-direction: column;
  max-width: 72%;
}

.jv-bubble-row.is-incoming {
  align-self: flex-start;
}

.jv-bubble-row.is-outgoing {
  align-self: flex-end;
}

.jv-bubble {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  position: relative;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.jv-bubble-incoming {
  background: #FFFFFF;
  color: #1E293B;
  border: 1px solid #E2E8F0;
  border-bottom-left-radius: 2px;
}

.jv-bubble-outgoing {
  background: #DCFCE7;
  color: #064E3B;
  border: 1px solid #BBF7D0;
  border-bottom-right-radius: 2px;
}

.jv-bubble-meta {
  font-size: 11px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.jv-bubble-incoming .jv-bubble-meta {
  color: #64748B;
}

.jv-bubble-outgoing .jv-bubble-meta {
  color: #059669;
  justify-content: flex-end;
}

.jv-chat-composer {
  padding: 12px 20px;
  background: #FFFFFF;
  border-top: 1px solid #E5E7EB;
}

.jv-chat-input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jv-chat-input {
  flex: 1;
  background: #F3F4F6;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 10px 18px;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.jv-chat-input:focus {
  background: #FFFFFF;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.jv-chat-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #1565E8;
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  flex-shrink: 0;
}

.jv-chat-send-btn:hover {
  background: #0F4FC4;
  transform: scale(1.05);
}

@media (max-width: 767.98px) {
  .jv-chat-container {
    height: calc(100vh - 160px);
    min-height: 500px;
    border-radius: 12px;
  }

  .jv-chat-sidebar {
    width: 100%;
    min-width: 100%;
    border-right: none;
  }

  .jv-bubble-row {
    max-width: 88%;
  }

  .jv-chat-messages-area {
    padding: 14px 12px;
  }

  .jv-chat-main-header,
  .jv-chat-composer {
    padding: 10px 14px;
  }
}
/* ==========================================================================
   JobConnect — Auth pages (login / signup / forgot-password)
   ========================================================================== */

@import 'bootstrap/dist/css/bootstrap.min.css';
@import 'bootstrap-icons/font/bootstrap-icons.css';

:root {
  --jc-blue: #1565E8;
  --jc-blue-dark: #0F4FC4;
  --jc-blue-press: #0A3FB5;
  --jc-blue-wash: #E8F1FE;
  --jc-blue-soft: #C6DDFC;
  --jc-orange: #FF6A00;
  --jc-orange-dark: #D14E00;
  --jc-orange-wash: #FFF1E6;
  --jc-navy: #0C1729;
  --jc-navy-2: #0F1F3D;
  --jc-bg: #F4F6FA;
  --jc-bg-2: #EDF1F8;
  --jc-bg-3: #E7ECF4;
  --jc-line: #E4E9F2;
  --jc-line-2: #DAE1EC;
  --jc-line-3: #C4CEDC;
  --jc-muted-3: #A9B5C7;
  --jc-muted: #5B6B85;
  --jc-text: #2A3A54;
  --jc-strong: #172B4D;
  --jc-green: #1E8E5A;
  --jc-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jc-font-head: 'Poppins', 'Inter', system-ui, sans-serif;
  --jc-r-sm: 8px;
  --jc-r-md: 10px;
  --jc-r-lg: 14px;
}

/* toast / flash */
.jc-flash {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 1090;
  max-width: 24rem;
}

.toast-container {
  z-index: 1090;
}

body.jc-auth-body,
body:has(.jc-auth),
body:has(.jc-auth.center) {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

html:has(.jc-auth),
html:has(.jc-auth.center) {
  scroll-padding-bottom: 0 !important;
}

.jc-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* ------------------------------------------------------- brand panel ---- */

.jc-auth-brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #0C1729 0%, #10254A 52%, #143163 100%);
  color: #fff;
  padding: 44px clamp(28px, 4vw, 72px);
  display: flex;
  flex-direction: column;
}

.jc-auth-brand::before,
.jc-auth-brand::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.jc-auth-brand::before {
  width: 520px;
  height: 520px;
  right: -180px;
  top: -160px;
  background: radial-gradient(circle, rgba(21, 101, 232, .55) 0%, rgba(21, 101, 232, 0) 68%);
}

.jc-auth-brand::after {
  width: 420px;
  height: 420px;
  left: -140px;
  bottom: -170px;
  background: radial-gradient(circle, rgba(255, 106, 0, .34) 0%, rgba(255, 106, 0, 0) 66%);
}

.jc-auth-brand>* {
  position: relative;
  z-index: 1;
}

.jc-auth-brand .jc-logo-text {
  color: #fff;
}

.jc-auth-brand .jc-logo-text span {
  color: #FF9A2E;
}

.jc-auth-headline {
  color: #fff;
  font-family: var(--jc-font-head, 'Poppins', sans-serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.02em;
  margin: 0;
}

.jc-auth-points {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.jc-auth-points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}

.jc-auth-points .tick {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #7FB2F7;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.jc-auth-points strong {
  color: #fff;
  font-weight: 600;
}

.jc-auth-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: auto;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  overflow: hidden;
}

.jc-auth-stat {
  background: rgba(12, 23, 41, .55);
  padding: 16px 18px;
}

.jc-auth-stat b {
  display: block;
  font-family: var(--jc-font-head, 'Poppins', sans-serif);
  font-size: 20px;
  font-weight: 600;
}

.jc-auth-stat span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
}

.jc-auth-quote {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
}

.jc-auth-quote b {
  color: #fff;
}

/* --------------------------------------------------------- form panel --- */

.jc-auth-form {
  background: var(--jc-bg, #F8FAFC);
  padding: 40px clamp(20px, 3vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.jc-auth-inner {
  width: 100%;
  max-width: 448px;
  margin: 0 auto;
}

.jc-logo-img,
.jc-auth-lockup .jc-logo-img {
  height: 42px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.jc-auth-mobile-logo {
  display: none;
}

.jc-auth-card {
  background: #fff;
  border: 1px solid var(--jc-line, #E2E8F0);
  border-radius: 18px;
  box-shadow: 0 14px 40px -18px rgba(23, 43, 77, .22), 0 2px 6px rgba(23, 43, 77, .05);
  padding: 30px;
}

.jc-auth-card::before {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--jc-blue, #0D6EFD) 0%, var(--jc-orange, #FF6A00) 100%);
  margin-bottom: 18px;
}

.jc-auth-title {
  font-family: var(--jc-font-head, 'Poppins', sans-serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--jc-strong, #0F172A);
  margin: 0 0 4px;
}

.jc-auth-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--jc-muted, #64748B);
  line-height: 1.5;
  margin: 0 0 20px;
}

.jc-form-label,
.form-label {
  font-family: var(--jc-font, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--jc-strong, #1E293B);
  margin-bottom: 6px;
  display: inline-block;
  line-height: 1.4;
}

.jc-form-label .req,
.form-label .req,
.req.text-danger,
.text-danger.req {
  color: #EF4444 !important;
  font-weight: 700;
  font-size: 13.5px;
  margin-left: 2px;
  display: inline-block;
}

/* Role switch (Job seeker / Employer) */
.jc-role-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}

.jc-role {
  border: 1px solid var(--jc-line-2, #E2E8F0);
  border-radius: 12px;
  padding: 13px 14px;
  cursor: pointer;
  background: #fff;
  transition: border-color .14s ease, background .14s ease;
}

.jc-role:hover {
  background: var(--jc-bg, #F8FAFC);
}

.jc-role input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.jc-role .ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--jc-bg-2, #F1F5F9);
  color: var(--jc-muted, #64748B);
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  transition: background .14s ease, color .14s ease;
}

.jc-role b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--jc-strong, #0F172A);
}

.jc-role span {
  display: block;
  font-size: 11.8px;
  color: var(--jc-muted, #64748B);
  margin-top: 2px;
  line-height: 1.4;
}

.jc-role:has(input:checked) {
  border-color: var(--jc-blue, #0D6EFD);
  background: var(--jc-blue-wash, #EFF6FF);
}

.jc-role:has(input:checked) .ico {
  background: var(--jc-blue, #0D6EFD);
  color: #fff;
}

/* Password field with reveal */
.jc-pw-wrap {
  position: relative;
}

.jc-pw-wrap .form-control {
  padding-right: 44px;
}

.jc-pw-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  border-radius: var(--jc-r-sm, 8px);
  color: var(--jc-muted, #64748B);
  display: grid;
  place-items: center;
}

.jc-pw-toggle:hover {
  background: var(--jc-bg-2, #F1F5F9);
  color: var(--jc-strong, #0F172A);
}

.jc-pw-meter {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}

.jc-pw-meter i {
  height: 4px;
  flex: 1;
  border-radius: 999px;
  background: var(--jc-bg-3, #E2E8F0);
  transition: background .18s ease;
}

.jc-pw-meter.s1 i:nth-child(1) {
  background: #C0392B;
}

.jc-pw-meter.s2 i:nth-child(-n+2) {
  background: #E08A2E;
}

.jc-pw-meter.s3 i:nth-child(-n+3) {
  background: #2E8BC0;
}

.jc-pw-meter.s4 i {
  background: var(--jc-green, #10B981);
}

/* OTP / social alternatives */
.jc-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jc-muted, #64748B);
}

.jc-auth-divider::before,
.jc-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--jc-line, #E2E8F0);
}

.jc-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 42px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--jc-strong, #0F172A);
  background: #fff;
  border: 1px solid var(--jc-line-2, #E2E8F0);
  border-radius: var(--jc-r-sm, 8px);
  transition: background .15s ease, border-color .15s ease;
}

.jc-social-btn:hover {
  background: var(--jc-bg-2, #F1F5F9);
  color: var(--jc-strong, #0F172A);
  border-color: #CBD5E1;
}

.jc-auth-foot {
  font-size: 13.5px;
  color: var(--jc-muted, #64748B);
  text-align: center;
  margin: 20px 0 0;
}

.jc-auth-legal {
  font-size: 11.8px;
  line-height: 1.6;
  color: var(--jc-muted, #64748B);
  text-align: center;
  margin: 14px 0 0;
}

/* Trust row under the card */
.jc-auth-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 12px;
  color: var(--jc-muted, #64748B);
}

.jc-auth-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ------------------------------------------------------- signup steps ---- */

.jc-auth-steps {
  list-style: none !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.jc-auth-steps li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12.2px !important;
  font-weight: 600 !important;
  color: var(--jc-muted, #64748B) !important;
  white-space: nowrap !important;
}

.jc-auth-steps li+li::before {
  content: '' !important;
  width: 16px !important;
  height: 1.5px !important;
  border-radius: 2px !important;
  background: var(--jc-line-2, #CBD5E1) !important;
  margin-right: 1px !important;
}

.jc-auth-steps li span {
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: var(--jc-bg-2, #F1F5F9) !important;
  color: var(--jc-muted, #64748B) !important;
  border: 1px solid var(--jc-line-2, #CBD5E1) !important;
}

.jc-auth-steps li.active {
  color: var(--jc-strong, #0F172A) !important;
}

.jc-auth-steps li.active span {
  background: var(--jc-blue, #0D6EFD) !important;
  border-color: var(--jc-blue, #0D6EFD) !important;
  color: #fff !important;
}

.jc-auth-steps li.done {
  color: var(--jc-blue-dark, #0B5ED7) !important;
}

.jc-auth-steps li.done span {
  background: var(--jc-blue-wash, #EFF6FF) !important;
  border-color: var(--jc-blue, #0D6EFD) !important;
  color: var(--jc-blue, #0D6EFD) !important;
}

.jc-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--jc-muted, #64748B);
  margin-bottom: 14px;
}

.jc-auth-back:hover {
  color: var(--jc-blue, #0D6EFD);
}

.jc-auth-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.8px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--jc-blue, #0D6EFD);
  background: var(--jc-blue-wash, #EFF6FF);
  border-radius: 999px;
  padding: 5px 11px;
}

/* Role option rows on the account-type step */
.jc-role-link {
  display: flex !important;
  align-items: flex-start !important;
  gap: 13px !important;
  border: 1px solid var(--jc-line-2, #E2E8F0) !important;
  border-radius: 12px !important;
  padding: 15px 16px !important;
  background: #fff !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease !important;
}

.jc-role-link:hover {
  border-color: var(--jc-blue, #0D6EFD) !important;
  background: var(--jc-blue-wash, #EFF6FF) !important;
  box-shadow: 0 4px 12px -2px rgba(21, 101, 232, 0.12) !important;
}

.jc-role-link .ico {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: var(--jc-blue-wash, #EFF6FF) !important;
  color: var(--jc-blue, #0D6EFD) !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  transition: background .14s ease, color .14s ease !important;
}

.jc-role-link:hover .ico {
  background: var(--jc-blue, #0D6EFD) !important;
  color: #fff !important;
}

.jc-role-link .txt {
  flex: 1 !important;
  min-width: 0 !important;
}

.jc-role-link b {
  display: block !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--jc-strong, #0F172A) !important;
}

.jc-role-link .txt span {
  display: block !important;
  font-size: 12.8px !important;
  line-height: 1.5 !important;
  color: var(--jc-muted, #64748B) !important;
  margin-top: 3px !important;
}

.jc-role-link .arrow {
  color: var(--jc-muted, #94A3B8) !important;
  flex-shrink: 0 !important;
  margin-top: 8px !important;
  transition: color .14s ease !important;
}

.jc-role-link:hover .arrow {
  color: var(--jc-blue, #0D6EFD) !important;
}

/* ------------------------------------------------------- petal motif ----- */

.jc-auth-motif {
  position: absolute;
  z-index: 0;
  right: -120px;
  top: 50%;
  width: 440px;
  height: 440px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .82;
}

.jc-auth-motif::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(21, 101, 232, .34) 0%, rgba(21, 101, 232, 0) 70%);
}

.jc-auth-motif::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow:
    0 0 0 34px rgba(255, 255, 255, .045),
    inset 0 0 0 26px rgba(255, 255, 255, .045);
}

.jc-auth-motif i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 168px;
  height: 168px;
  margin: -84px 0 0 -84px;
  border-radius: 60% 0 60% 0;
  border: 1px solid rgba(255, 255, 255, .22);
  background: linear-gradient(140deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 62%);
  transform-origin: 50% 50%;
}

.jc-auth-motif i:nth-child(1) {
  transform: rotate(0deg);
}

.jc-auth-motif i:nth-child(2) {
  transform: rotate(45deg);
}

.jc-auth-motif i:nth-child(3) {
  transform: rotate(90deg);
}

.jc-auth-motif i:nth-child(4) {
  transform: rotate(135deg);
}

.jc-auth-motif i:nth-child(5) {
  transform: rotate(180deg);
}

.jc-auth-motif i:nth-child(6) {
  transform: rotate(225deg);
}

.jc-auth-motif i:nth-child(7) {
  transform: rotate(270deg);
}

.jc-auth-motif i:nth-child(8) {
  transform: rotate(315deg);
}

.jc-auth-motif i.sm {
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-color: rgba(255, 154, 46, .38);
  background: linear-gradient(140deg, rgba(255, 154, 46, .12) 0%, rgba(255, 154, 46, 0) 66%);
}

.jc-auth-motif i.sm:nth-child(9) {
  transform: rotate(22deg);
}

.jc-auth-motif i.sm:nth-child(10) {
  transform: rotate(112deg);
}

.jc-auth-motif i.sm:nth-child(11) {
  transform: rotate(202deg);
}

.jc-auth-motif i.sm:nth-child(12) {
  transform: rotate(292deg);
}

.jc-auth-motif b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 999px;
  background: #FF9A2E;
  box-shadow: 0 0 0 7px rgba(255, 154, 46, .18), 0 0 26px rgba(255, 154, 46, .45);
}

@media (prefers-reduced-motion: no-preference) {
  .jc-auth-motif {
    animation: jcMotifIn 1.1s cubic-bezier(.22, .61, .36, 1) both;
  }

  @keyframes jcMotifIn {
    from {
      opacity: 0;
      transform: translateY(-50%) rotate(-14deg) scale(.94);
    }

    to {
      opacity: .82;
      transform: translateY(-50%) rotate(0) scale(1);
    }
  }
}

@media (max-width: 1399.98px) {
  .jc-auth-motif {
    width: 360px;
    height: 360px;
    right: -140px;
  }
}

/* ==========================================================================
   Centered auth shell
   ========================================================================== */

.jc-auth.center {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: radial-gradient(760px 420px at 50% -8%, #e8f1fe, #e8f1fe00 62%), radial-gradient(560px 340px at 100% 100%, #fff1e6, #fff1e600 60%), var(--jc-bg, #F8FAFC);
  padding: 20px 16px;
  padding-top: 60px;
}

.jc-auth.center .jc-auth-motif {
  right: -170px;
  width: 420px;
  height: 420px;
  opacity: .34;
}

.jc-auth.center .jc-auth-motif::before {
  background: radial-gradient(circle, rgba(21, 101, 232, .16) 0%, rgba(21, 101, 232, 0) 70%);
}

.jc-auth.center .jc-auth-motif i {
  border-color: rgba(21, 101, 232, .16);
  background: none;
}

.jc-auth.center .jc-auth-motif i.sm {
  border-color: rgba(255, 106, 0, .2);
}

.jc-auth.center .jc-auth-motif::after {
  border-color: rgba(21, 101, 232, .1);
  box-shadow: 0 0 0 34px rgba(21, 101, 232, .03), inset 0 0 0 26px rgba(21, 101, 232, .03);
}

.jc-auth.center .jc-auth-motif b {
  background: var(--jc-orange, #FF6A00);
  box-shadow: 0 0 0 7px rgba(255, 106, 0, .12);
}

@media (prefers-reduced-motion: no-preference) {
  .jc-auth.center .jc-auth-motif {
    animation: jcMotifInLight 1.1s cubic-bezier(.22, .61, .36, 1) both;
  }

  @keyframes jcMotifInLight {
    from {
      opacity: 0;
      transform: translateY(-50%) rotate(-12deg) scale(.94);
    }

    to {
      opacity: .34;
      transform: translateY(-50%) rotate(0) scale(1);
    }
  }
}

.jc-auth.center .jc-auth-form {
  position: relative;
  z-index: 1;
  background: none;
  padding: 0;
  display: block;
  width: 100%;
}

.jc-auth.center .jc-auth-inner {
  max-width: 448px;
  margin: 0 auto;
}

/* --- brand lockup ------------------------------------------------------- */

.jc-auth-lockup {
  text-align: center;
  margin-bottom: 14px;
}

.jc-auth-tagline {
  font-size: 12.5px;
  color: var(--jc-muted, #64748B);
  margin: 4px 0 0;
}

.jc-auth.center .jc-auth-card {
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 10px 30px -12px rgba(23, 43, 77, .18), 0 2px 6px rgba(23, 43, 77, .04);
}

.jc-auth.center .jc-auth-card::before {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--jc-blue, #0D6EFD) 0%, var(--jc-orange, #FF6A00) 100%);
  margin-bottom: 12px;
}

.jc-auth.center .jc-auth-title {
  font-size: 19px;
  margin: 0 0 2px;
}

.jc-auth.center .jc-auth-sub {
  font-size: 12.5px;
  margin: 0 0 14px;
}

/* filled inputs */
.jc-auth.center .form-control {
  background: #F4F7FD;
  border-color: #DDE6F5;
  height: 42px;
  font-size: 13.5px;
}

.jc-auth.center .form-control:focus {
  background: #fff;
  border-color: var(--jc-blue, #0D6EFD);
  box-shadow: 0 0 0 3px rgba(21, 101, 232, .13);
}

.jc-auth.center .jc-input-group {
  background: #F4F7FD;
  border-color: #DDE6F5;
}

.jc-auth.center .jc-input-group:focus-within {
  background: #fff;
}

.jc-auth.center .jc-input-group .form-control {
  height: 40px;
}

.jc-auth.center .btn-jc {
  background: linear-gradient(94deg, var(--jc-blue, #0D6EFD) 0%, #0F55CE 100%);
  color: #fff;
  border: 0;
  height: 42px !important;
  border-radius: var(--jc-r-sm, 8px);
  box-shadow: 0 6px 16px -6px rgba(21, 101, 232, .55);
}

.jc-auth.center .btn-jc:hover {
  background: linear-gradient(94deg, #0B5ED7 0%, #0C46A8 100%);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(21, 101, 232, .62);
}

/* value strip under the card */
.jc-auth-value {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.jc-auth-value div {
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--jc-line, #E2E8F0);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}

.jc-auth-value b {
  display: block;
  font-family: var(--jc-font-head, 'Poppins', sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--jc-strong, #0F172A);
}

.jc-auth-value span {
  font-size: 11px;
  color: var(--jc-muted, #64748B);
}

@media (max-width: 575.98px) {
  .jc-auth.center {
    padding: 20px 12px 36px;
  }

  .jc-auth.center .jc-auth-card {
    padding: 18px;
  }

  .jc-auth.center .jc-auth-motif {
    display: none;
  }

  .jc-auth-value {
    grid-template-columns: 1fr;
  }
}

.jc-auth.center .jc-auth-motif i {
  border-radius: 62% 4px 62% 4px;
}

.jc-auth.center .jc-auth-motif::after {
  inset: 26%;
}

@media (max-width: 1199.98px) {
  .jc-auth.center .jc-auth-motif {
    display: none;
  }
}

/* ------------------------------------------------------------- choice checkbox ---- */

.jc-choice {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  user-select: none !important;
}

.jc-choice input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.jc-choice .mark {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border: 1.5px solid var(--jc-line-3, #CBD5E1) !important;
  background: #fff !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  transition: all .14s ease !important;
}

.jc-choice .mark.square {
  border-radius: 4px !important;
}

.jc-choice .mark.round {
  border-radius: 999px !important;
}

.jc-choice .mark svg {
  opacity: 0 !important;
  transition: opacity .12s ease !important;
}

.jc-choice input:checked~.mark {
  background: var(--jc-blue, #0D6EFD) !important;
  border-color: var(--jc-blue, #0D6EFD) !important;
}

.jc-choice input:checked~.mark svg {
  opacity: 1 !important;
}

/* -------------------------------------------------------- mobile input group ---- */

.jc-input-group {
  display: flex !important;
  align-items: stretch !important;
  background: #F4F7FD !important;
  border: 1px solid #DDE6F5 !important;
  border-radius: var(--jc-r-sm, 8px) !important;
  height: 42px !important;
  overflow: hidden !important;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease !important;
}

.jc-input-group:focus-within {
  background: #fff !important;
  border-color: var(--jc-blue, #0D6EFD) !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 232, .13) !important;
}

.jc-input-group .prefix {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  background: #EEF3FB !important;
  border-right: 1px solid #DDE6F5 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--jc-muted, #64748B) !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.jc-input-group .form-control {
  border: 0 !important;
  background: transparent !important;
  height: 100% !important;
  box-shadow: none !important;
  padding: 0 12px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* --------------------------------------------------------- onboarding wizard ---- */

.jv-onboard-card {
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 14px 40px -18px rgba(23, 43, 77, .16), 0 2px 6px rgba(23, 43, 77, .04) !important;
}

.jv-onboard-card::before {
  display: none !important;
}

.jv-onboard__progress {
  height: 6px !important;
  border-radius: 999px !important;
  background: #E2E8F0 !important;
  overflow: hidden !important;
}

.jv-onboard__progress .progress-bar {
  background: linear-gradient(90deg, #1565E8 0%, #FF6A00 100%) !important;
  border-radius: 999px !important;
  transition: width .3s ease !important;
}

.jv-onboard__step-body .form-control,
.jv-onboard__step-body .form-select {
  border-color: #E2E8F0;
  border-radius: 10px;
  font-size: 14px;
}

.jv-onboard__step-body .form-control:focus,
.jv-onboard__step-body .form-select:focus {
  border-color: #1565E8;
  box-shadow: 0 0 0 3px rgba(21, 101, 232, 0.15);
}

.jv-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jv-chipset .btn {
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-color: #E2E8F0;
  color: #475569;
  background: #fff;
  transition: all 0.15s ease;
}

.jv-chipset .btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}

.jv-chipset .btn-check:checked + .btn {
  background: #1565E8;
  border-color: #1565E8;
  color: #fff;
  font-weight: 600;
}
/* ==========================================================================
   JOBCONNECT — PANEL / ADMIN STYLESHEET
   ==========================================================================

   Loaded alongside app.css by the admin, employer and candidate panel
   layouts. app.css supplies Bootstrap, the base typography and the public
   site; this file owns everything behind a login — the shell, sidebar,
   header, cards, stat tiles and tables.

   Nothing here re-imports Bootstrap. It layers on top of it.

   Palette is sampled from public/assets/images/logo.png:
     blue   #2B84D8 (bright)  →  #002080 (deep navy)   — the "J"
     orange #F06000 (mid)     →  #F03000 (red-orange)  — the "C"
     gold   #F0C000                                    — the "C" rim

   Contents
     1.  Tokens
     2.  Shell
     3.  Sidebar
     4.  Header
     5.  Breadcrumb
     6.  Cards
     7.  Stat tiles
     8.  Tables
     9.  Status + badges
     10. Charts
     11. Notification dropdown
     12. Avatars + media
     13. Panel primitives
     14. Forms
     15. Utilities
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.jv-admin {
    /* --- brand blue (the "J") --- */
    --jv-blue-50: #F0F6FC;
    --jv-blue-100: #D6E7F6;
    --jv-blue-200: #B9CEFB;
    --jv-blue-400: #3C82F6;
    --jv-blue-500: #0A66C2;
    --jv-blue-600: #084E96;
    --jv-blue-700: #06407C;

    /* --- brand navy (sidebar, hero) --- */
    --jv-navy-700: #1E3A5F;
    --jv-navy-800: #132F4C;
    --jv-navy-900: #0F172A;
    --jv-navy-950: #0B1220;

    /* --- brand orange (the "C") --- */
    --jv-orange-50: #FFF4EC;
    --jv-orange-100: #FFE1CC;
    --jv-orange-300: #FFAE6B;
    --jv-orange-400: #FF8A2B;
    --jv-orange-500: #F06000;
    --jv-orange-600: #E24A00;
    --jv-orange-700: #F03000;
    --jv-gold: #F0C000;

    /* --- semantic --- */
    --jv-success: #16A34A;
    --jv-success-bg: #EAF7EE;
    --jv-success-text: #15803D;
    --jv-danger: #DC2B3C;
    --jv-danger-bg: #FDECEE;
    --jv-danger-text: #B42318;
    --jv-warning: #FD7001;
    --jv-warning-bg: #FFF3E8;
    --jv-warning-text: #B54708;
    --jv-info: #06A6C4;
    --jv-info-bg: #E4F7FB;
    --jv-info-text: #0E7490;
    --jv-violet: #7C3AED;
    --jv-violet-bg: #F1E9FE;
    --jv-violet-text: #6127D3;

    /* White is never legible on the brand orange (2.8:1), so anything that
       fills with orange and writes in white uses this deeper end of the ramp. */
    --jv-accent-strong: #C4400A;

    /* --- neutrals --- */
    --jv-ink: #0F172A;
    --jv-body: #1E293B;
    --jv-muted: #64748B;
    --jv-faint: #646E88;
    --jv-line: #E2E8F0;
    --jv-line-soft: #F1F5F9;
    --jv-surface: #FFFFFF;
    --jv-canvas: #F8FAFC;

    /* --- flat brand fills (no gradients anywhere in the panel) --- */
    /* The wordmark blue, matching app.css so an action looks the same on
       both sides of the login. */
    --jv-brand: #0A66C2;
    --jv-brand-hover: #084E96;
    --jv-accent: #FD7001;
    --jv-accent-hover: #E24A00;
    --jv-hero-bg: #132F4C;
    /* Rail sits in the logo's blue family rather than near-black, so the
       orange active row still pops against it. One flat fill, top to bottom. */
    --jv-rail-bg: #0F172A;

    /* --- elevation --- */
    --jv-shadow-sm: 0 1px 3px rgba(16, 26, 53, .07), 0 1px 2px rgba(16, 26, 53, .04);
    --jv-shadow-md: 0 4px 16px rgba(16, 26, 53, .07), 0 1px 3px rgba(16, 26, 53, .04);
    --jv-shadow-lg: 0 18px 40px rgba(5, 22, 63, .16);

    --jv-radius: 16px;
    --jv-radius-sm: 10px;
    --jv-rail-w: 268px;
    --jv-header-h: 64px;
    --jv-foot-h: 54px;
}


/* ==========================================================================
   2. SHELL
   ========================================================================== */

/* The shell fills the viewport exactly and never scrolls itself. Header and
   footer are fixed flex rails; only .jv-admin__content scrolls. */
body.jv-admin {
    background: var(--jv-canvas);
    color: var(--jv-body);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* From lg up the rail is a flex column beside the content. Below lg the
   sidebar is a Bootstrap offcanvas, so the body must stay a normal block. */
@media (min-width: 992px) {
    body.jv-admin {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
    }
}

.jv-admin__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.jv-admin__header {
    flex: 0 0 auto;
}

.jv-admin__content {
    flex: 1 1 auto;
    /* Without this a flex item refuses to shrink below its content, and the
       overflow lands on the body instead of here. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.jv-admin__footer {
    flex: 0 0 auto;
    /* Locked to the same height as the sidebar footer so the two read as one
       bar across the bottom of the screen. */
    min-height: var(--jv-foot-h);
    display: flex;
    align-items: center;
    background: var(--jv-surface);
    border-top: 1px solid var(--jv-line);
    font-size: .8125rem;
    color: var(--jv-muted);
}

/* Padding lives here rather than on a py-3 utility, so the compact rule below
   can actually override it — Bootstrap's spacing utilities are !important. */
.jv-admin__footer>.container-fluid {
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* A phone has little enough vertical room without a 54px bar taking a slice of
   it. The sidebar is an offcanvas at this width, so its own footer is off
   screen and the two no longer need to match. */
@media (max-width: 767.98px) {
    .jv-admin__footer {
        min-height: 35px;
        font-size: 10px;
    }

    .jv-admin__footer>.container-fluid {
        padding-top: .25rem;
        padding-bottom: .25rem;
    }
}


/* ==========================================================================
   3. SIDEBAR
   ========================================================================== */

.jv-sidebar {
    --bs-offcanvas-width: 280px;
    display: flex;
    flex-direction: column;
    /* Bootstrap forces `background-color: transparent !important` on
       .offcanvas-lg from lg up, so the rail fill needs !important to hold.
       admin.css is loaded after bootstrap, so it wins the specificity tie. */
    background-color: var(--jv-rail-bg) !important;
    color: #C3CFE6;
    border-right: 0;
}

@media (min-width: 992px) {
    .jv-sidebar.offcanvas-lg:not(.offcanvas) {
        position: sticky;
        top: 0;
        z-index: 1030;
        flex: 0 0 var(--jv-rail-w);
        width: var(--jv-rail-w);
        height: 100vh;
        overflow: hidden;
        transform: none;
    }
}

/* --- brand --- */
.jv-sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    /* Pinned to the same token the top bar uses, so the brand strip and the
       page header line up across the seam. Vertical centring does the rest —
       padding here would drift the moment the logo is resized. */
    min-height: var(--jv-header-h);
    padding: 0 1.45rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    flex: 0 0 auto;
}

/* Keep this in step with the height attribute on the <img>; the attribute is
   what reserves the space before this stylesheet lands. */
.jv-sidebar__brand img {
    height: 45px;
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}

/* The logo carries a tagline under the wordmark, so the badge needs a little
   more room than the wordmark alone would want. */
.jv-sidebar__brand>a {
    gap: .7rem !important;
}

.jv-sidebar__tag {
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .25rem .5rem;
    border-radius: 99px;
    background-color: var(--jv-accent-strong) !important;
    color: #fff !important;
}

/* --- nav --- */
.jv-sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .85rem .7rem;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.jv-sidebar__nav::-webkit-scrollbar {
    width: 6px;
}

.jv-sidebar__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
    border-radius: 99px;
}

.jv-sidebar__nav::-webkit-scrollbar-track {
    background: transparent;
}

/* Band label dividing the nav into Main / Management / Business / Content /
   Settings. Not a heading element: it labels a visual band and the groups under
   it are already reachable, so promoting it to <h*> would add noise for screen
   readers rather than structure. */
.jv-sidebar__section {
    padding: .95rem .75rem .3rem;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* At 10px these count as body text for WCAG, so .5 alpha (3.5:1) was not
       enough; .62 is the lowest that clears 4.5:1 on the rail. */
    color: rgba(195, 207, 230, .62);
    pointer-events: none;
}

/* The first band sits right under the logo and needs no extra lead-in. */
.jv-sidebar__section:first-child {
    padding-top: .1rem;
}

.jv-sidebar .jv-sidebar__link,
.jv-sidebar .jv-sidebar__group {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .55rem .75rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: .8438rem;
    font-weight: 500;
    line-height: 1.4;
    color: #C3CFE6;
    text-align: left;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}

.jv-sidebar__link>i:first-child,
.jv-sidebar__group>i:first-child {
    font-size: 1rem;
    width: 18px;
    text-align: center;
    opacity: .85;
    flex: 0 0 18px;
}

.jv-sidebar__link:hover,
.jv-sidebar__group:hover,
.jv-sidebar__link:focus-visible,
.jv-sidebar__group:focus-visible {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

.jv-sidebar__link:hover>i:first-child,
.jv-sidebar__group:hover>i:first-child {
    opacity: 1;
}

/* The active row picks up the logo's orange "C". A group header gets the
   same treatment when one of its children owns the screen, so Users reads
   exactly like Dashboard does. Both selectors share one rule on purpose. */
.jv-sidebar__link.is-active,
.jv-sidebar__group.is-active {
    background-color: var(--jv-accent-strong);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(196, 64, 10, .34);
}

.jv-sidebar__link.is-active>i:first-child,
.jv-sidebar__group.is-active>i:first-child {
    opacity: 1;
}

/* Hover must not wash the orange out; the hover rule above is equally
   specific and would otherwise win on the group. */
.jv-sidebar__link.is-active:hover,
.jv-sidebar__group.is-active:hover,
.jv-sidebar__link.is-active:focus-visible,
.jv-sidebar__group.is-active:focus-visible {
    background: var(--jv-accent-strong);
    color: #fff;
}

.jv-sidebar__caret {
    font-size: .6875rem;
    opacity: .5;
    transition: transform .2s ease;
}

.jv-sidebar__group[aria-expanded="true"] .jv-sidebar__caret {
    transform: rotate(180deg);
}

.jv-sidebar__group.is-active .jv-sidebar__caret {
    opacity: .9;
}

.jv-sidebar__group[aria-expanded="true"] {
    color: #fff;
}

/* --- child links --- */
.jv-sidebar__sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* The 1.35rem margin lands the guide line directly under the parent
       icon, so the rail reads as descending from the group it belongs to. */
    margin: .25rem 0 .4rem 1.35rem;
    padding-left: .55rem;
    border-left: 1px solid rgba(255, 255, 255, .09);
}

.jv-sidebar .jv-sidebar__link--sub {
    position: relative;
    gap: .6rem;
    padding: .4rem .6rem;
    font-size: .8125rem;
    color: rgba(195, 207, 230, .76);
}

/* Children read as secondary to their group header: smaller, dimmer icons
   rather than the same 18px mark the parent rows use. */
.jv-sidebar .jv-sidebar__link--sub>i:first-child {
    font-size: .875rem;
    width: 15px;
    flex: 0 0 15px;
    opacity: .62;
}

.jv-sidebar .jv-sidebar__link--sub:hover {
    color: #fff;
}

.jv-sidebar .jv-sidebar__link--sub:hover>i:first-child {
    opacity: .9;
}

.jv-sidebar .jv-sidebar__link--sub.is-active {
    /* A sub link also carries .jv-sidebar__link, so the shared active rule
       above matches it too. Restate the quieter tint and cancel that rule's
       solid fill and drop shadow: the orange button belongs to the group
       header, and the child sits under it. */
    background-color: rgba(240, 96, 0, .16);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

.jv-sidebar .jv-sidebar__link--sub.is-active>i:first-child {
    opacity: 1;
}

/* Marks the active child on the guide line itself, so the eye can trace it
   back to the open group without reading every label. */
.jv-sidebar .jv-sidebar__link--sub.is-active::before {
    content: "";
    position: absolute;
    left: calc(-.55rem - 1px);
    top: 50%;
    width: 2px;
    height: 15px;
    margin-top: -7.5px;
    border-radius: 99px;
    background: var(--jv-accent);
}

/* --- footer --- */
.jv-sidebar__footer {
    flex: 0 0 auto;
    min-height: var(--jv-foot-h);
    padding: 0 .7rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
}

/* The logout form is only a POST wrapper; the button is the whole target. */
.jv-sidebar__footer form {
    width: 100%;
    margin: 0;
}

.jv-sidebar .btn-close {
    flex: 0 0 auto;
}


/* ==========================================================================
   4. HEADER
   ========================================================================== */

.jv-admin__header {
    position: relative;
    z-index: 1020;
    min-height: var(--jv-header-h);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--jv-line);
    /* The inner row is shorter than the bar, so as a plain block it sat at the
       top and the page title read higher than the logo across the seam. */
    display: flex;
    align-items: center;
}

.jv-admin__header>* {
    flex: 1 1 auto;
    min-width: 0;
}

.jv-admin__title {
    font-size: 1.125rem;
    letter-spacing: -.02em;
    color: var(--jv-ink);
}

.jv-admin__title .fw-semibold {
    font-weight: 800 !important;
}

.jv-admin__search {
    width: min(340px, 32vw);
}

/* One element, not an input-group: the two-segment version drew a seam where
   the icon box met the field, and the joint moved on focus. The icon is
   painted inside the field instead and the padding reserves its lane. */
.jv-search {
    position: relative;
    display: flex;
    align-items: center;
}

.jv-search__icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.925rem;
    line-height: 1;
    color: #6b7280;
    pointer-events: none;
    z-index: 5;
}

.jv-admin .jv-admin__header .jv-search__input,
.jv-search__input {
    height: 40px !important;
    padding-left: 2.6rem !important;
    padding-right: 1rem !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #f9fafb !important;
    font-size: 0.875rem !important;
    color: #1f2937 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.jv-admin .jv-admin__header .jv-search__input::placeholder,
.jv-search__input::placeholder {
    color: #9ca3af !important;
}

.jv-admin .jv-admin__header .jv-search__input:hover,
.jv-search__input:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
}

.jv-admin .jv-admin__header .jv-search__input:focus,
.jv-search__input:focus {
    background: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.jv-search:focus-within .jv-search__icon {
    color: #2563eb !important;
}

/* Separates what the app is telling you from your own account. */
.jv-admin__sep {
    width: 1px;
    height: 24px;
    flex: 0 0 1px;
    margin: 0 .4rem;
    background: var(--jv-line);
}

/* header icon buttons */
.jv-admin__header .btn-link {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--jv-muted) !important;
    text-decoration: none;
    transition: background-color .16s, color .16s;
}

.jv-admin__header .btn-link:hover {
    background: var(--jv-blue-50);
    color: var(--jv-blue-500) !important;
}

/* the profile button is wider than a plain icon */
.jv-admin__header .dropdown>.btn-link.d-flex {
    width: auto;
    height: 40px;
    padding: 0 .7rem 0 .25rem;
    gap: .5rem;
    border: 1px solid var(--jv-line);
    border-radius: 99px;
    background: #fff;
}

.jv-admin__header .dropdown>.btn-link.d-flex:hover {
    border-color: var(--jv-blue-200);
    background: var(--jv-blue-50);
}

.jv-admin__header .dropdown>.btn-link.d-flex .bi-chevron-down {
    font-size: .6875rem;
    color: var(--jv-faint);
}

.jv-badge-dot {
    font-size: .625rem;
    font-weight: 800;
    padding: .2em .45em;
    border: 2px solid #fff;
}

/* Helper Utilities */
.gap-1\.5 {
    gap: 0.375rem !important;
}

.mb-1\.5 {
    margin-bottom: 0.375rem !important;
}

/* Premium Skill Badges in Tables & Cards */
.jv-skill-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    background-color: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.jv-header-icon-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #4b5563 !important;
    transition: all 0.2s ease !important;
}

.jv-header-icon-btn:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

.jv-header-badge {
    top: -5px !important;
    right: -5px !important;
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 4px !important;
    border-radius: 99px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 19px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}


/* ==========================================================================
   5. BREADCRUMB
   ========================================================================== */

.jv-breadcrumb .breadcrumb {
    font-size: .8125rem;
    margin-bottom: .85rem !important;
}

.jv-breadcrumb a {
    color: var(--jv-muted);
    text-decoration: none;
}

.jv-breadcrumb a:hover {
    color: var(--jv-blue-500);
}

.jv-breadcrumb .breadcrumb-item.active {
    color: var(--jv-ink);
    font-weight: 600;
}


/* ==========================================================================
   6. CARDS
   ========================================================================== */

.jv-card {
    background: var(--jv-surface);
    border: 1px solid var(--jv-line);
    border-radius: var(--jv-radius);
    box-shadow: var(--jv-shadow-sm);
    transition: box-shadow .18s ease, border-color .18s ease;
}

.jv-card>.card-header,
.jv-card .card-header {
    background: transparent !important;
    /* The hairline is this rule's job. The views used to also carry Bootstrap's
       .border-0, which is `border: 0 !important` and would win over anything
       set here — that class has been removed from every card header. */
    border-bottom: 1px solid var(--jv-line);
    padding: 1.1rem 1.25rem .85rem;
}

.jv-card .card-header h2,
.jv-card .card-header h3 {
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--jv-ink);
}

.jv-card .card-header .small {
    color: var(--jv-muted);
}

.jv-card .card-body {
    padding: 13px 20px;
}

.jv-card .card-footer {
    background: transparent;
    border-top: 1px solid var(--jv-line-soft);
    padding: .85rem 1.25rem;
}

/* card links pick up the brand on hover */
.jv-card .card-header a.small {
    font-weight: 700;
    color: var(--jv-blue-500);
    text-decoration: none;
}

.jv-card .card-header a.small:hover {
    color: var(--jv-orange-600);
}


/* --- page greeting --- */
.jv-greeting__eyebrow {
    display: block;
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--jv-accent);
    margin-bottom: .15rem;
}

.jv-greeting__name {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
    color: var(--jv-ink);
    margin: 0;
}


/* ==========================================================================
   7. STAT TILES
   ========================================================================== */

.jv-stat {
    display: flex;
    align-items: center;
    gap: .85rem;
    height: 100%;
    padding: 1rem 1.1rem;
    background: var(--jv-surface);
    border: 1px solid var(--jv-line);
    border-radius: var(--jv-radius);
    box-shadow: var(--jv-shadow-sm);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

/* brand rule that wipes in across the top on hover */
.jv-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--jv-brand);
    opacity: 0;
    transition: opacity .18s ease;
}

.jv-stat--link:hover {
    box-shadow: var(--jv-shadow-md);
    transform: translateY(-2px);
    border-color: var(--jv-blue-200);
    color: inherit;
}

.jv-stat--link:hover::before {
    opacity: 1;
}

.jv-stat__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}

/* The Blade component ships Bootstrap's solid text-bg-* helpers. Soften them
   into tinted tiles here so the component itself needs no change. */
.jv-stat__icon.text-bg-primary {
    background-color: var(--jv-blue-50) !important;
    color: var(--jv-blue-500) !important;
}

.jv-stat__icon.text-bg-secondary {
    background-color: var(--jv-violet-bg) !important;
    color: var(--jv-violet) !important;
}

.jv-stat__icon.text-bg-dark {
    background-color: #E7ECF8 !important;
    color: var(--jv-navy-800) !important;
}

.jv-stat__icon.text-bg-success {
    background-color: var(--jv-success-bg) !important;
    color: var(--jv-success-text) !important;
}

.jv-stat__icon.text-bg-warning {
    background-color: var(--jv-orange-50) !important;
    color: var(--jv-orange-600) !important;
}

.jv-stat__icon.text-bg-info {
    background-color: var(--jv-info-bg) !important;
    color: var(--jv-info-text) !important;
}

.jv-stat__icon.text-bg-danger {
    background-color: var(--jv-danger-bg) !important;
    color: var(--jv-danger-text) !important;
}

.jv-stat__body {
    min-width: 0;
    flex: 1 1 auto;
}

.jv-stat__label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--jv-muted);
    line-height: 1.35;
}

.jv-stat__value {
    /* The tile is only ~122px wide inside a col-xl-2 once the icon and padding
       are taken out, so a fixed 1.5rem clipped even a modest currency value.
       Scale with the viewport and let a long figure wrap rather than spill. */
    font-size: clamp(1.15rem, .72rem + .62vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
    color: var(--jv-ink);
    min-width: 0;
    overflow-wrap: break-word;
    font-variant-numeric: tabular-nums;
}

/* Long money figures get a touch more headroom to shrink into. */
.jv-stat__value--tight {
    font-size: clamp(1rem, .62rem + .55vw, 1.3rem);
    letter-spacing: -.02em;
}

.jv-stat__hint {
    font-size: .6875rem;
    color: var(--jv-faint);
    line-height: 1.35;
    /* An exact rupee figure has no spaces to break at, so it needs explicit
       permission to wrap or it runs past a half-width tile on a phone. */
    overflow-wrap: anywhere;
}


/* ==========================================================================
   8. TABLES
   ========================================================================== */

.jv-table {
    margin-bottom: 0;
    --bs-table-bg: transparent;
}

/* The dashboard panels are half-width cards. With no floor the table squeezes
   to fit instead of overflowing, so titles wrapped to three lines and the
   status badge was clipped at the card edge while .table-responsive never had
   anything to scroll. A minimum width makes it scroll sideways instead. */
.jv-table--panel {
    min-width: 30rem;
}

.jv-table--panel>thead>tr>th,
.jv-table--panel>tbody>tr>td {
    white-space: nowrap;
}

/* A sideways-scrolling table clipped at the card edge gives no sign that there
   is more to the right. A always-visible slim bar says so; the fade at the
   edge says it again for anyone who reads shape before chrome. */
.jv-card .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--jv-line) transparent;
}

.jv-card .table-responsive::-webkit-scrollbar {
    height: 8px;
}

.jv-card .table-responsive::-webkit-scrollbar-thumb {
    background: #CFD7E6;
    border-radius: 99px;
}

.jv-card .table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--jv-faint);
}

.jv-card .table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.jv-table>thead>tr>th {
    padding: .7rem 1rem;
    font-size: .6563rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--jv-faint);
    background: var(--jv-canvas);
    border-bottom: 1px solid var(--jv-line);
    white-space: nowrap;
    vertical-align: middle;
}

.jv-table>tbody>tr>td {
    padding: .8rem 1rem;
    font-size: .8438rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--jv-line-soft);
    color: var(--jv-body);
}

.jv-table>tbody>tr:last-child>td {
    border-bottom: 0;
}

.jv-table>tbody>tr {
    transition: background-color .14s ease;
}

.jv-table>tbody>tr:hover {
    background: var(--jv-blue-50);
}

.jv-table a {
    color: var(--jv-ink);
    font-weight: 600;
    text-decoration: none;
}

.jv-table a:hover {
    color: var(--jv-blue-500);
}

/* A table sitting flush inside a card keeps the card's rounded corners.
   overflow-x: auto, not overflow: hidden — hidden clipped the corners but also
   took the sideways scroll away, so a table wider than its card could not be
   reached at all. A scroll container clips to the radius just the same. */
.jv-card>.table-responsive:last-child {
    border-bottom-left-radius: var(--jv-radius);
    border-bottom-right-radius: var(--jv-radius);
    overflow-x: auto;
}


/* ==========================================================================
   9. STATUS + BADGES
   ========================================================================== */

.jv-admin__main .badge {
    font-weight: 700;
    font-size: .6875rem;
    padding: .4em .7em;
    border-radius: 99px;
    letter-spacing: .01em;
}

/* Bootstrap's solid contextual badges become soft pills inside the panel. */
.jv-admin__main .badge.text-bg-success {
    background-color: var(--jv-success-bg) !important;
    color: var(--jv-success-text) !important;
}

.jv-admin__main .badge.text-bg-warning {
    background-color: var(--jv-warning-bg) !important;
    color: var(--jv-warning-text) !important;
}

.jv-admin__main .badge.text-bg-danger {
    background-color: var(--jv-danger-bg) !important;
    color: var(--jv-danger-text) !important;
}

.jv-admin__main .badge.text-bg-primary {
    background-color: var(--jv-blue-50) !important;
    color: var(--jv-blue-600) !important;
}

.jv-admin__main .badge.text-bg-info {
    background-color: var(--jv-info-bg) !important;
    color: var(--jv-info-text) !important;
}

.jv-admin__main .badge.text-bg-secondary {
    background-color: #F1F4F9 !important;
    color: var(--jv-muted) !important;
}

.jv-admin__main .badge.text-bg-dark {
    background-color: #E7ECF8 !important;
    color: var(--jv-navy-800) !important;
}

/* the notification count dot stays solid so it reads as an alert */
.jv-admin__main .badge.jv-badge-dot.text-bg-danger {
    background-color: var(--jv-orange-700) !important;
    color: #fff !important;
}

/* the sidebar's own badges must stay legible on navy */
.jv-sidebar .badge.text-bg-danger {
    background-color: var(--jv-accent-strong) !important;
    color: #fff !important;
}

.jv-status-badge,
.jv-app-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}


/* ==========================================================================
   10. CHARTS
   ========================================================================== */

.jv-chart,
.jv-card canvas {
    max-width: 100%;
}


/* ==========================================================================
   11. NOTIFICATION DROPDOWN
   ========================================================================== */

.jv-admin .dropdown-menu {
    border: 1px solid var(--jv-line);
    border-radius: 14px;
    box-shadow: var(--jv-shadow-md);
    padding: .35rem;
    font-size: .8438rem;
}

.jv-admin .dropdown-item {
    border-radius: 9px;
    padding: .5rem .7rem;
}

.jv-admin .dropdown-item:hover,
.jv-admin .dropdown-item:focus {
    background: var(--jv-blue-50);
    color: var(--jv-blue-600);
}

.jv-admin .dropdown-item.text-danger:hover {
    background: var(--jv-danger-bg);
    color: var(--jv-danger) !important;
}

/* ==========================================================================
   NOTIFICATIONS POPUP DROPDOWN (COMPACT & SLEEK)
   ========================================================================== */
.jv-notify {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    width: 340px !important;
    max-width: 90vw !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.15), 0 0 1px 1px rgba(15, 23, 42, 0.05) !important;
    margin-top: 6px !important;
    transform: none !important;
}

@keyframes jvNotifyPop {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.jv-notify__header {
    padding: 9px 14px;
    background: #FAFAFC;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.jv-notify__title {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
}

.jv-notify__pill {
    background: #EEF4FF;
    color: #1565E8;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 12px;
}

.jv-notify__markall {
    font-size: 11.5px;
    font-weight: 600;
    color: #1565E8;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
}

.jv-notify__markall:hover {
    color: #0B4AB8;
    text-decoration: underline;
}

.jv-notify__list {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.jv-notify__list::-webkit-scrollbar {
    width: 4px;
}

.jv-notify__list::-webkit-scrollbar-track {
    background: #F8FAFC;
}

.jv-notify__list::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

.jv-notify__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #F1F5F9;
    background: #FFFFFF;
    text-decoration: none;
    transition: all 0.15s ease;
    position: relative;
}

.jv-notify__item:last-child {
    border-bottom: none;
}

.jv-notify__item:hover {
    background: #F8FAFC;
}

.jv-notify__item.is-unread {
    background: #F4F8FF;
    border-left: 3px solid #1565E8;
}

.jv-notify__item.is-unread:hover {
    background: #EAF2FF;
}

.jv-notify__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #EEF4FF;
    color: #1565E8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}

.jv-notify__item.is-unread .jv-notify__icon {
    background: #1565E8;
    color: #FFFFFF;
}

.jv-notify__title-text {
    font-size: 12.5px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
    margin-bottom: 2px;
}

.jv-notify__msg {
    font-size: 11.5px;
    color: #64748B;
    line-height: 1.35;
    margin-bottom: 4px;
    word-break: break-word;
}

.jv-notify__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 2px;
}

.jv-notify__time {
    font-size: 10.5px;
    color: #94A3B8;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.jv-notify__actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.jv-btn-read {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #EBFDF5;
    border: 1px solid #A7F3D0;
    color: #059669;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.2;
}

.jv-btn-read:hover {
    background: #059669;
    border-color: #059669;
    color: #FFFFFF;
}

.jv-btn-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFF1F2;
    border: 1px solid #FECDD3;
    color: #E11D48;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.jv-btn-dismiss:hover {
    background: #E11D48;
    border-color: #E11D48;
    color: #FFFFFF;
}

.jv-notify__footer {
    padding: 9px 14px;
    background: #FAFAFC;
    border-top: 1px solid #F1F5F9;
    text-align: center;
}

.jv-notify__footer a {
    font-size: 12px;
    font-weight: 600;
    color: #1565E8;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}

.jv-notify__footer a:hover {
    color: #0B4AB8;
}


/* ==========================================================================
   12. AVATARS + MEDIA
   ========================================================================== */

.jv-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background-color: var(--jv-brand);
    color: #fff;
    font-weight: 800;
    font-size: .8125rem;
    line-height: 1;
    overflow: hidden;
}

.jv-avatar--img {
    object-fit: cover;
    background-color: transparent;
}

.jv-avatar-lg {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 16px;
    display: inline-grid;
    place-items: center;
    background-color: var(--jv-brand);
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    overflow: hidden;
}

.jv-company-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid var(--jv-line);
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.jv-company-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 9px;
}

.jv-company-logo--lg {
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    border-radius: 18px;
}

.jv-company-cover {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #e0eafc, #cfdef3);
    position: relative;
    overflow: hidden;
}

.jv-company-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jv-company-logo--overlap {
    margin-top: -42px;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.jv-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 11px;
    object-fit: cover;
    background: var(--jv-canvas);
}

.jv-thumb--lg {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 14px;
}


/* ==========================================================================
   13. PANEL PRIMITIVES
   ========================================================================== */

/* --- figure: a labelled number inside a card --- */
.jv-figure {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.jv-figure__label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--jv-muted);
}

.jv-figure__value {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--jv-ink);
    line-height: 1.2;
}

.jv-figure__meta {
    font-size: .6875rem;
    color: var(--jv-faint);
}

/* --- pipeline: the hiring funnel rows --- */
.jv-pipeline {
    display: flex;
    flex-direction: column;
}

.jv-pipeline__step {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 0;
    border-bottom: 1px dashed var(--jv-line);
    font-size: .8438rem;
}

.jv-pipeline__step:last-child {
    border-bottom: 0;
}

.jv-pipeline__dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--jv-blue-500);
}

.jv-pipeline__label {
    color: var(--jv-muted);
}

.jv-pipeline__step> :last-child {
    margin-left: auto;
    font-weight: 800;
    color: var(--jv-ink);
}

/* --- horizontal application stepper --- */
.jv-stepper-wrap {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 6px;
}

.jv-stepper-bar {
    min-width: 580px;
}

.jv-stepper-item {
    z-index: 2;
}

.jv-stepper-line {
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 3px;
    background-color: #e2e8f0;
    z-index: 1;
    transition: background-color 0.3s ease;
}

.jv-stepper-line.is-active {
    background-color: #1565e8;
}

.jv-stepper-node {
    width: 28px;
    height: 28px;
    border: 2px solid #cbd5e1;
    background-color: #ffffff;
    color: #64748b;
    font-size: 13px;
    transition: all 0.25s ease;
}

.jv-stepper-item.is-done .jv-stepper-node {
    border-color: #1565e8;
    background-color: #1565e8;
    color: #ffffff;
}

.jv-stepper-item.is-current .jv-stepper-node {
    border-color: #1565e8;
    background-color: #ffffff;
    color: #1565e8;
    box-shadow: 0 0 0 4px rgba(21, 101, 232, 0.18) !important;
}

.jv-stepper-pulse {
    width: 10px;
    height: 10px;
    background-color: #1565e8;
}

.jv-stepper-text {
    font-size: 12px;
    color: #64748b;
    line-height: 1.2;
}

.jv-stepper-item.is-done .jv-stepper-text {
    color: #1e293b;
    font-weight: 600;
}

.jv-stepper-item.is-current .jv-stepper-text {
    color: #1565e8;
    font-weight: 700;
}

/* --- date chip (interview cards) --- */
.jv-datechip,
.jv-when {
    flex: 0 0 52px;
    width: 52px;
    padding: .45rem .25rem;
    border-radius: 12px;
    text-align: center;
    background: var(--jv-blue-50);
    color: var(--jv-blue-600);
    line-height: 1.15;
}

.jv-datechip__day,
.jv-when__day {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.jv-datechip__mon,
.jv-when__month {
    display: block;
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .8;
}

.jv-when__time {
    display: block;
    font-size: .625rem;
    color: var(--jv-muted);
}

/* --- chip sets --- */
.jv-chipset {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
}

.jv-chipset--wrap {
    flex-wrap: wrap;
    overflow: visible;
}

/* --- match / progress bars --- */
.jv-match-list__row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem 0;
    font-size: .8125rem;
}

.jv-match-list__bar {
    flex: 1 1 auto;
    height: 6px;
    min-width: 70px;
    border-radius: 99px;
    background: var(--jv-line-soft);
    overflow: hidden;
}

.jv-match-list__bar>span,
.jv-usage__bar>span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background-color: var(--jv-brand);
}

.jv-usage__bar {
    height: 6px;
    border-radius: 99px;
    background: var(--jv-line-soft);
    overflow: hidden;
}

/* --- messages --- */
.jv-msg {
    display: flex;
    gap: .6rem;
    margin-bottom: .85rem;
}

.jv-msg__bubble {
    max-width: 78%;
    padding: .6rem .85rem;
    border-radius: 14px;
    background: var(--jv-canvas);
    border: 1px solid var(--jv-line);
    font-size: .8438rem;
}

.jv-msg__meta {
    font-size: .6875rem;
    color: var(--jv-faint);
    margin-top: .2rem;
}

.jv-msg--mine {
    flex-direction: row-reverse;
}

.jv-msg--mine .jv-msg__bubble {
    background-color: var(--jv-brand);
    border-color: transparent;
    color: #fff;
}

.jv-msg--mine .jv-msg__meta {
    text-align: right;
}

/* --- flash messages --- */

/* The corner stack clears this shell's own header, which is shorter than the
   public one. */
.jv-admin {
    --jc-flash-top: calc(var(--jv-header-h) + 0.875rem);
}

.jv-flash .alert {
    border: 1px solid var(--jv-line);
    border-radius: var(--jv-radius-sm);
    font-size: .8438rem;
}

/* --- sticky rails --- */
.jv-sticky {
    position: sticky;
    /* .jv-admin__content is the scroll container and already starts below the
       header, so this offsets from the content box, not the viewport. */
    top: 1rem;
}

/* --- long-form content --- */
.jv-prose {
    font-size: .9063rem;
    line-height: 1.75;
    color: var(--jv-body);
}

.jv-prose h2,
.jv-prose h3,
.jv-prose h4 {
    margin-top: 1.5rem;
    margin-bottom: .5rem;
    font-weight: 700;
}

.jv-prose ul,
.jv-prose ol {
    padding-left: 1.15rem;
}

.jv-prose>*:last-child {
    margin-bottom: 0;
}

/* --- definition rows --- */

/* Two levels of grid. The list lays out whole pairs — one per line, two side
   by side once there is room. Each .jv-detail__row then puts its own label and
   value beside each other.

   The label track is a fixed width rather than fit-content: each row sizes
   itself independently, so content-derived widths would leave every row's
   value starting at a different x. Override --jv-detail-label on the list if a
   view has unusually long labels. */
.jv-detail {
    --jv-detail-label: 10rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    --bs-gutter-x: 0;
    margin: 0;
}

@media (min-width: 1200px) {
    .jv-detail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3rem;
    }
}

.jv-detail__row {
    display: grid;
    grid-template-columns: var(--jv-detail-label) minmax(0, 1fr);
    border-top: 1px solid var(--jv-line);
}

/* No rule above the first line — one row at 1-up, two at 2-up. */
.jv-detail__row:first-child {
    border-top: 0;
}

@media (min-width: 1200px) {
    .jv-detail__row:nth-child(-n+2) {
        border-top: 0;
    }
}

.jv-detail__label,
.jv-detail__value {
    min-width: 0;
    margin: 0;
    padding: .7rem 0;
}

.jv-detail__label {
    padding-right: 1.1rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--jv-muted);
}

.jv-detail__value {
    font-size: .875rem;
    color: var(--jv-body);
    /* Long slugs and e-mail addresses have no spaces to break on. */
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .jv-detail__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .jv-detail__label {
        padding-bottom: 0;
    }

    .jv-detail__value {
        padding-top: .15rem;
    }
}

.jv-detail__rich {
    font-size: .875rem;
}

/* --- section spacer --- */
.jv-section+.jv-section {
    margin-top: 1.25rem;
}

.jv-tagline {
    font-size: .8125rem;
    color: var(--jv-muted);
}

.jv-verified {
    color: var(--jv-success-text);
}

/* The "Finish these next" chips on the candidate dashboard.
   Without this rule they inherit Bootstrap's .badge white text with no fill,
   so they rendered as invisible text on a white card. */
.jv-todo {
    display: inline-flex;
    align-items: center;
    background-color: var(--jv-blue-50);
    color: var(--jv-blue-700);
    border: 1px solid var(--jv-blue-100);
    font-weight: 600;
    font-size: .75rem;
    padding: .35rem .65rem;
    border-radius: 99px;
    transition: background-color .15s ease, border-color .15s ease;
}

.jv-todo:hover,
.jv-todo:focus-visible {
    background-color: var(--jv-blue-100);
    border-color: var(--jv-blue-200);
    color: var(--jv-blue-700);
}


/* ==========================================================================
   14. FORMS
   ========================================================================== */

.jv-admin .form-control,
.jv-admin .form-select {
    border-color: var(--jv-line);
    border-radius: var(--jv-radius-sm);
    font-size: .8438rem;
    color: var(--jv-body);
}

.jv-admin .form-control:focus,
.jv-admin .form-select:focus {
    border-color: var(--jv-blue-400);
    box-shadow: 0 0 0 3px rgba(15, 98, 240, .12);
}

.jv-admin .form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--jv-body);
    margin-bottom: .3rem;
}

.jv-admin .btn {
    border-radius: var(--jv-radius-sm);
    font-weight: 600;
    font-size: .8438rem;
}

/* Row actions. Icon-only squares that stay neutral until hovered, so a table
   of thirty rows is not ninety coloured outlines competing for attention.
   Each one still needs an aria-label: there is no visible text to read. */
.jv-admin .jv-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--jv-line);
    border-radius: 8px;
    background-color: var(--jv-surface);
    color: var(--jv-muted);
    font-size: .875rem;
    line-height: 1;
    box-shadow: none;
    transition: background-color .13s ease, border-color .13s ease, color .13s ease;
}

.jv-admin .jv-action:hover,
.jv-admin .jv-action:focus-visible {
    border-color: var(--jv-brand);
    background-color: rgba(15, 98, 240, .07);
    color: var(--jv-brand);
}

.jv-admin .jv-action--danger:hover,
.jv-admin .jv-action--danger:focus-visible {
    border-color: #DC3545;
    background-color: rgba(220, 53, 69, .08);
    color: #DC3545;
}

.jv-actions {
    display: inline-flex;
    gap: .3rem;
}


/* Page notes — the one-line explanation of how a screen ranks or gates things.
   Tinted panel with an accent rule so it reads as guidance rather than as
   another muted caption competing with the table beneath it. */
.jv-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    padding: .6rem .85rem;
    border-radius: 10px;
    border-left: 3px solid var(--jv-brand);
    background-color: rgba(15, 98, 240, .07);
    color: var(--jv-body);
    font-size: .8125rem;
    line-height: 1.5;
}

.jv-note>i:first-child {
    flex: 0 0 auto;
    margin-top: .1rem;
    color: var(--jv-brand);
}


/* Status filter chips. White by default so they read as unselected against
   the tinted canvas, brand blue once chosen. */
.jv-admin .jv-chip {
    background-color: var(--jv-surface);
    border: 1px solid var(--jv-line);
    color: var(--jv-body);
    font-weight: 500;
    box-shadow: none;
}

.jv-admin .jv-chip:hover,
.jv-admin .jv-chip:focus-visible {
    background-color: var(--jv-surface);
    border-color: var(--jv-brand);
    color: var(--jv-brand);
}

.jv-admin .jv-chip .badge {
    background-color: var(--jv-canvas);
    /* One step darker than --jv-muted, which lands at 4.46:1 on this tint and
       misses AA for text this small. */
    color: #5A6478;
    font-weight: 600;
}

.jv-admin .jv-chip.is-active,
.jv-admin .jv-chip.is-active:hover,
.jv-admin .jv-chip.is-active:focus-visible {
    background-color: var(--jv-brand);
    border-color: var(--jv-brand);
    color: #fff;
    font-weight: 600;
}

/* Inverted, not a white tint: any translucent white lightens the blue behind
   it, and white-on-tint tops out at 4.42:1 even at 10% opacity. Solid white
   with blue text clears AA and keeps the count legible. */
.jv-admin .jv-chip.is-active .badge {
    background-color: #fff;
    color: var(--jv-brand);
}


.jv-admin .btn-primary {
    background-color: var(--jv-brand);
    /* Transparent rather than 0: a borderless button renders 2px shorter than
       the input beside it, which showed as a low-sitting Search button. */
    border: 1px solid transparent;
    box-shadow: 0 4px 12px rgba(15, 98, 240, .26);
}

.jv-admin .btn-primary:hover,
.jv-admin .btn-primary:focus {
    background-color: var(--jv-brand-hover);
    box-shadow: 0 6px 18px rgba(15, 98, 240, .36);
}

.jv-admin .btn-warning {
    background-color: var(--jv-accent);
    border: 1px solid transparent;
    color: #fff;
}

.jv-admin .btn-warning:hover {
    background-color: var(--jv-accent-hover);
    color: #fff;
}

[data-jv-filter-form] .form-control,
[data-jv-filter-form] .form-select {
    font-size: .8125rem;
}

/* Toolbar in the table card header. Search takes the room it can use and
   stops; the page-size select only ever holds three digits, so it stays
   narrow and sits opposite. */
/* Width, not flex-basis: the header is flex-column below sm, where a basis of
   22rem sizes the MAIN axis and stretched the search box 352px tall. */
.jv-toolbar__search {
    width: 100%;
    min-width: 0;
}

@media (min-width: 576px) {
    .jv-toolbar__search {
        width: 22rem;
    }
}

.jv-admin .jv-toolbar__show {
    width: 5.5rem;
    flex: 0 0 auto;
}

/* `width: auto` sizes a select to its text and ignores the padding Bootstrap
   reserves for the dropdown arrow, so the arrow lands on the last character.
   A real width keeps the arrow in its own gutter. */
.jv-admin .jv-range {
    width: 8.5rem;
    flex: 0 0 auto;
}


/* ==========================================================================
   15. UTILITIES
   ========================================================================== */

/* No blanket `.jv-admin a` colour rule here on purpose. Its specificity
   (0,1,1) outranks single-class rules like .jv-sidebar__link (0,1,0), which
   repainted every sidebar link blue on the navy rail. Content links already
   inherit --bs-link-color from app.css; anything needing a different colour
   states it on its own component. */

.jv-admin :focus-visible {
    outline: 2px solid var(--jv-blue-500);
    outline-offset: 2px;
    border-radius: 6px;
}

/* the empty-state row inside tables */
.jv-table .text-body-secondary {
    color: var(--jv-muted) !important;
}

@media (max-width: 575.98px) {
    .jv-stat {
        padding: .85rem .9rem;
    }

    .jv-stat__value {
        font-size: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .jv-stat,
    .jv-stat::before,
    .jv-card,
    .jv-sidebar__link,
    .jv-sidebar__caret {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Semantic text utilities inside the panel
   --------------------------------------------------------------------------
   Bootstrap's .text-success and friends are tuned as fills, so on a white card
   they sit around 3.4:1. The panel uses the darker text ends of each ramp. */
.jv-admin .text-success {
    color: var(--jv-success-text) !important;
}

.jv-admin .text-warning {
    color: var(--jv-warning-text) !important;
}

.jv-admin .text-danger {
    color: var(--jv-danger-text) !important;
}

.jv-admin .text-info {
    color: var(--jv-info-text) !important;
}

/* ==========================================================================
   15. UNIFIED FORM CONTROLS & SEARCHABLE DROPDOWNS (TOM SELECT)
   ========================================================================== */

/* Outer TomSelect wrapper MUST be completely borderless & transparent to eliminate double-box */
.jv-admin .ts-wrapper,
.jv-admin .ts-wrapper.form-select,
.jv-admin .ts-wrapper.single,
.jv-admin .ts-wrapper.multi,
.ts-wrapper,
.ts-wrapper.form-select,
.ts-wrapper.single,
.ts-wrapper.multi {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* Regular Text Inputs, Textareas & Native Uninitialized Selects */
.jv-admin .form-control,
.jv-admin input.form-control,
.jv-admin textarea.form-control,
.jv-admin select.form-select,
.jv-admin select.form-select:not([data-tom-ready]) {
    background-color: #F4F6FB !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #334155 !important;
    box-shadow: none !important;
    transition: all 0.15s ease-in-out !important;
}

/* TomSelect Inner Control Box (The ONLY visible box for searchable select) */
.jv-admin .ts-wrapper .ts-control,
.jv-admin .ts-wrapper.single .ts-control,
.jv-admin .ts-wrapper.multi .ts-control,
.jv-admin .ts-wrapper.single.input-active .ts-control,
.jv-admin .ts-wrapper.single.dropdown-active .ts-control,
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.single.dropdown-active .ts-control,
.ts-control {
    background-color: #F4F6FB !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0.5rem 2.25rem 0.5rem 0.875rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #334155 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease-in-out !important;
}

.jv-admin .form-control::placeholder,
.ts-control .item.placeholder {
    color: #94A3B8 !important;
}

/* Focus States */
.jv-admin .form-control:focus,
.jv-admin input.form-control:focus,
.jv-admin textarea.form-control:focus,
.jv-admin select.form-select:focus,
.jv-admin .ts-wrapper.focus .ts-control,
.jv-admin .ts-wrapper.input-active .ts-control,
.jv-admin .ts-wrapper.dropdown-active .ts-control,
.ts-wrapper.focus .ts-control,
.ts-wrapper.input-active .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    background-color: #ffffff !important;
    border-color: #0B4AB8 !important;
    box-shadow: 0 0 0 3px rgba(11, 74, 184, 0.12) !important;
}

/* Single Select Selected Item Text */
.jv-admin .ts-wrapper.single .ts-control .item,
.ts-wrapper.single .ts-control .item {
    background: transparent !important;
    color: #334155 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Chevron Down Arrow */
.jv-admin .ts-wrapper.single .ts-control:after,
.ts-wrapper.single .ts-control:after {
    border-color: #64748B transparent transparent transparent !important;
    border-width: 5px 5px 0 5px !important;
    margin-top: -2px !important;
    right: 14px !important;
}

.jv-admin .ts-wrapper.single.dropdown-active .ts-control:after,
.ts-wrapper.single.dropdown-active .ts-control:after {
    border-color: transparent transparent #0B4AB8 transparent !important;
    border-width: 0 5px 5px 5px !important;
}

/* Multi Select */
.jv-admin .ts-wrapper.multi .ts-control,
.ts-wrapper.multi .ts-control {
    height: auto !important;
    min-height: 42px !important;
    max-height: none !important;
    padding: 0.25rem 0.5rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.jv-admin .ts-wrapper.multi .ts-control .item,
.ts-wrapper.multi .ts-control .item {
    background-color: #E2E8F0 !important;
    color: #1E293B !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}

.jv-admin .ts-wrapper.multi .ts-control .item .remove,
.ts-wrapper.multi .ts-control .item .remove {
    border-left: 1px solid #CBD5E1 !important;
    margin-left: 6px !important;
    padding-left: 4px !important;
}

/* Dropdown Menu Popup & Search Input Box */
.ts-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    padding: 6px !important;
    margin-top: 4px !important;
    z-index: 1060 !important;
}

.ts-dropdown .dropdown-input {
    padding: 6px !important;
    background-color: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.ts-dropdown .dropdown-input input {
    height: 36px !important;
    min-height: 36px !important;
    background-color: #ffffff !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    width: 100% !important;
}

.ts-dropdown .option {
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 0.875rem !important;
    color: #334155 !important;
    transition: background-color 0.12s ease !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: #F1F5F9 !important;
    color: #0B4AB8 !important;
    font-weight: 500 !important;
}

.ts-dropdown .option.selected {
    background-color: #0B4AB8 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   16. PUBLISHING CARD & ACTION BUTTONS
   ========================================================================== */

.jv-admin .jv-btn-primary {
    background-color: #0B4AB8 !important;
    border: 1px solid #0B4AB8 !important;
    color: #ffffff !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    height: 42px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: 0 1px 3px rgba(11, 74, 184, 0.2) !important;
    width: 100% !important;
}

.jv-admin .jv-btn-primary:hover,
.jv-admin .jv-btn-primary:focus {
    background-color: #083B96 !important;
    border-color: #083B96 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(11, 74, 184, 0.3) !important;
}

.jv-admin .jv-btn-secondary {
    background-color: #F4F6FB !important;
    border: 1px solid #E2E8F0 !important;
    color: #334155 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    height: 42px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease-in-out !important;
    width: 100% !important;
}

.jv-admin .jv-btn-secondary:hover,
.jv-admin .jv-btn-secondary:focus {
    background-color: #E2E8F0 !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

.jv-admin .jv-btn-ghost {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: #64748B !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    height: 42px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease-in-out !important;
    text-decoration: none !important;
    width: 100% !important;
}

.jv-admin .jv-btn-ghost:hover,
.jv-admin .jv-btn-ghost:focus {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
    border-color: #E2E8F0 !important;
}

.jv-admin .jv-btn-danger {
    background-color: #FEF2F2 !important;
    border: 1px solid #FCA5A5 !important;
    color: #DC2626 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    height: 42px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease-in-out !important;
    text-decoration: none !important;
    width: 100% !important;
}

.jv-admin .jv-btn-danger:hover,
.jv-admin .jv-btn-danger:focus {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25) !important;
}

/* ====================================================== RESET PASSWORD MODAL STYLING */
.modal-backdrop {
  z-index: 1050 !important;
}

.modal-backdrop.show {
  opacity: 0.45 !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

#resetModal {
  z-index: 1060 !important;
}

#resetModal .modal-dialog {
  z-index: 1065 !important;
}

#resetModal .modal-content {
  background-color: #ffffff !important;
  color: #0c1729 !important;
  border-radius: 20px !important;
  position: relative !important;
  z-index: 1070 !important;
}

#resetModal .form-control {
  background-color: #ffffff !important;
  color: #0c1729 !important;
  height: 44px !important;
  box-shadow: none !important;
}

#resetModal .form-control:focus {
  border-color: #1565e8 !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 232, 0.15) !important;
}