/* =========================================================
   jobs-portal-brand.css  v1
   Loaded AFTER jobs-portal.css to apply Elinom branding:
   - High-contrast readable theme
   - Brand blue/indigo/cyan palette
   - Properly centered modals on all breakpoints
   ========================================================= */

:root {
  /* Re-tune tokens to match Elinom ERP brand (matches css/jobs.css) */
  --jp-bg:       #f0f4ff;
  --jp-surface:  #ffffff;
  --jp-border:   #dde3ee;
  --jp-text:     #0f172a;       /* near-black for body copy */
  --jp-muted:    #475569;       /* darker muted for labels */
  --jp-accent:   #2563eb;       /* Elinom primary */
  --jp-accent2:  #6366f1;       /* Elinom secondary indigo */
  --jp-green:    #059669;
  --jp-amber:    #d97706;
  --jp-radius:   14px;
  --jp-shadow:   0 16px 48px rgba(37,99,235,.14);
}

/* Body + base colour surface */
body {
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(99,102,241,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(37,99,235,.08), transparent 55%),
    var(--jp-bg) !important;
  color: var(--jp-text) !important;
}

/* ── Hero (keep branded gradient) ─────────────────────── */
.jp-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 45%, #6366f1 85%, #38bdf8 100%);
  padding: 3.75rem 1.25rem 2.75rem;
}
.jp-hero-title { color: #fff !important; }
.jp-hero-sub   { color: rgba(255,255,255,.92) !important; font-weight: 500; }
.jp-hero-accent {
  background: linear-gradient(90deg, #a5f3fc, #c7d2fe, #fef9c3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.jp-search-bar {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 14px 40px rgba(15,23,42,.18);
}
.jp-search-input {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
.jp-search-input::placeholder { color: #64748b !important; }
.jp-search-icon { color: #6366f1 !important; }
.jp-search-btn {
  background: linear-gradient(135deg,#2563eb,#6366f1) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(37,99,235,.35);
}

/* Search chips */
.jp-chip {
  background: rgba(255,255,255,.14) !important;
  color: #e0e7ff !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}
.jp-chip:hover, .jp-chip-active {
  background: #fff !important;
  color: #2563eb !important;
  border-color: #fff !important;
  font-weight: 700;
}

/* ── Sub-nav strip ─────────────────────────────────────── */
.jp-subnav {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(15,23,42,.04);
}
.jp-subnav-tab {
  color: #475569 !important;
  font-weight: 600;
}
.jp-subnav-tab:hover { color: #2563eb !important; }
.jp-tab-active {
  color: #2563eb !important;
  border-bottom-color: #2563eb !important;
}

/* ── Filters panel: light card, high contrast ──────────── */
.jp-filters-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(15,23,42,.06);
  color: #0f172a !important;
}
.jp-filters-header h3 {
  color: #0f172a !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
}
.jp-filter-clear { color: #2563eb !important; font-weight: 700 !important; }
.jp-filter-clear:hover { color: #1d4ed8 !important; }
.jp-filter-label {
  color: #1e293b !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
}
.jp-checkbox-list label {
  color: #0f172a !important;
  font-size: .9rem !important;
  font-weight: 500;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background .15s;
}
.jp-checkbox-list label:hover { background: #eef2ff; }
.jp-checkbox-list input[type=checkbox] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #2563eb !important;
}
.jp-select {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-size: .9rem !important;
  font-weight: 500;
  padding: .55rem .75rem !important;
}
.jp-select:hover { border-color: #6366f1 !important; }
.jp-select:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

/* Mobile filter button */
.jp-filter-toggle {
  background: linear-gradient(135deg,#2563eb,#6366f1) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(37,99,235,.35);
}
.jp-filter-apply-btn {
  background: linear-gradient(135deg,#2563eb,#6366f1) !important;
  color: #fff !important;
}

/* ── Results pane ──────────────────────────────────────── */
.jp-results-meta { color: #334155 !important; font-weight: 600; }
.jp-view-btn {
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}
.jp-view-btn:hover { border-color: #6366f1 !important; color: #2563eb !important; }
.jp-view-active {
  background: linear-gradient(135deg,#2563eb,#6366f1) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── Job cards ─────────────────────────────────────────── */
.jp-job-card, .jp-cand-card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.05);
}
.jp-job-card:hover {
  border-color: #6366f1 !important;
  box-shadow: 0 10px 28px rgba(37,99,235,.16);
  transform: translateY(-2px);
}

/* ── Empty state ───────────────────────────────────────── */
.jp-empty {
  color: #475569 !important;
  background: #fff !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 14px;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.jp-empty i { color: #94a3b8; }

/* ── Modals: CENTERED on all breakpoints ───────────────── */
.jp-modal-overlay {
  align-items: center !important;          /* was flex-start */
  justify-content: center !important;
  padding: 1.5rem !important;
  background: rgba(15,23,42,.55) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.jp-modal-open { display: flex !important; }
.jp-modal {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 32px 80px rgba(15,23,42,.28), 0 0 0 1px rgba(99,102,241,.1) !important;
  margin: auto !important;                   /* guarantee horizontal + vertical centering */
}
.jp-modal-title { color: #0f172a !important; }
.jp-modal-body  { color: #1e293b !important; }
.jp-modal-close {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}
.jp-modal-close:hover {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #2563eb !important;
}

/* Mobile: keep bottom-sheet behavior but fix contrast */
@media (max-width: 768px) {
  .jp-modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .jp-modal {
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh !important;
    margin: 0 !important;
  }
}

/* ── Inputs / textareas used in modals & forms ─────────── */
.jp-input, .jp-textarea {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}
.jp-input:focus, .jp-textarea:focus, .jp-select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.jp-input::placeholder, .jp-textarea::placeholder { color: #94a3b8 !important; }
label, .jp-form-label { color: #1e293b !important; }

/* ── Buttons ───────────────────────────────────────────── */
.jp-btn-primary {
  background: linear-gradient(135deg,#2563eb,#6366f1) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.3);
}
.jp-btn-primary:hover { opacity: .92; transform: translateY(-1px); }
.jp-btn-outline {
  background: #fff !important;
  border: 1.5px solid #2563eb !important;
  color: #2563eb !important;
}
.jp-btn-outline:hover { background: #2563eb !important; color: #fff !important; }

/* ── Toolbar, stat strip ───────────────────────────────── */
.jp-toolbar, .jp-stat-strip {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
.jp-stat-pill span { color: #2563eb !important; }
.jp-stat-pill label { color: #475569 !important; font-weight: 700; }

/* ── Toasts ────────────────────────────────────────────── */
.jp-toast {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.16);
}