/* JobGara global site polish — applies even on legacy markup */
@import url("../assets/jobgara/css/tokens.css");

body {
  font-family: var(--jg-font, "Plus Jakarta Sans", system-ui, sans-serif) !important;
  background: var(--jg-bg, #f0f3f8) !important;
  color: var(--jg-text, #101828);
}

h1, h2, h3, h4, h5, h6,
.card-title,
.section-title {
  font-family: var(--jg-font-display, "Plus Jakarta Sans", system-ui, sans-serif) !important;
  letter-spacing: -0.02em;
}

/* Legacy cards → modern */
.card,
.company-card,
.dashboard-card {
  background: var(--jg-surface, #fff) !important;
  border: 1px solid var(--jg-border, #e4e7ec) !important;
  border-radius: var(--jg-radius, 14px) !important;
  box-shadow: var(--jg-shadow) !important;
  overflow: hidden;
}

.card:hover,
.company-card:hover {
  box-shadow: var(--jg-shadow-md) !important;
}

.card-header {
  background: var(--jg-surface) !important;
  border-bottom: 1px solid var(--jg-border) !important;
  font-weight: 700;
}

.card-body {
  padding: 1.15rem 1.25rem !important;
}

/* Buttons */
.btn-primary,
input[type="submit"].btn-primary,
button.btn-primary {
  background: var(--jg-primary, #155eef) !important;
  border-color: var(--jg-primary, #155eef) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.22);
}

.btn-primary:hover {
  background: var(--jg-primary-dark, #0b3db8) !important;
  border-color: var(--jg-primary-dark, #0b3db8) !important;
}

.btn-success { border-radius: 10px !important; font-weight: 600 !important; }
.btn-info { border-radius: 10px !important; }
.btn-warning { border-radius: 10px !important; font-weight: 600 !important; }
.btn-outline-primary { border-radius: 10px !important; font-weight: 600 !important; }

.form-control,
.form-select,
select.form-control,
input.form-control,
textarea.form-control {
  border-radius: 10px !important;
  border-color: var(--jg-border) !important;
  min-height: 44px;
  font-family: inherit !important;
}

.form-control:focus {
  border-color: var(--jg-primary) !important;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.15) !important;
}

.table thead th {
  background: var(--jg-surface-2) !important;
  color: var(--jg-text-muted) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--jg-border) !important;
}

.badge,
.badge-secondary {
  border-radius: 999px !important;
  font-weight: 600 !important;
}

.company-logo {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid var(--jg-border) !important;
  background: #fff;
}

/* Job listing cards */
.jg-job-card,
.card.job-card-modern {
  background: #fff !important;
  border: 1px solid var(--jg-border) !important;
  border-radius: 12px !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  height: auto !important;
}

.jg-job-card:hover,
.card.job-card-modern:hover {
  transform: translateY(-3px);
  border-color: rgba(21, 94, 239, 0.35) !important;
  box-shadow: var(--jg-shadow-md) !important;
}

.jg-job-card .job-title,
.job-card-modern .job-title {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: var(--jg-text) !important;
  margin-bottom: 0.1rem !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  line-height: 1.3;
}

.jg-job-card .job-title:hover,
.job-card-modern a:hover .job-title {
  color: var(--jg-primary) !important;
}

.jg-job-card .company-name {
  color: var(--jg-text-muted) !important;
  font-weight: 600;
  font-size: 0.9rem;
  max-width: none !important;
  white-space: normal !important;
}

.jg-job-card .location {
  color: var(--jg-text-muted) !important;
  font-size: 0.85rem;
  margin-bottom: 0.35rem !important;
}

.jg-job-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--jg-border);
  font-size: 0.8rem;
  color: var(--jg-text-muted);
}

.jg-page-banner {
  background: linear-gradient(145deg, #0b1220 0%, #1e3a8a 45%, #155eef 100%);
  color: #fff;
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--jg-shadow-md);
}

.jg-page-banner h1,
.jg-page-banner h2 {
  color: #fff !important;
  margin: 0 0 0.35rem;
  font-weight: 800;
}

.jg-page-banner p {
  margin: 0;
  opacity: 0.85;
}

.layout-wrapper,
.content-wrapper {
  font-family: inherit;
}

.company-card {
  background: var(--jg-surface);
  border: 1px solid var(--jg-border);
  border-radius: var(--jg-radius);
  box-shadow: var(--jg-shadow);
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.company-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--jg-shadow-md);
}

.jg-layout-public .card {
  border-radius: var(--jg-radius);
}

.jg-layout-public .section-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--jg-text) !important;
  border-bottom: none;
  margin-bottom: 1rem;
}

.jg-layout-public .section-title a {
  color: inherit !important;
  text-decoration: none;
}

/* Soften old purple / harsh gradients when still inline */
.hero-section {
  background: linear-gradient(145deg, #0b1220 0%, #1e3a8a 55%, #155eef 100%) !important;
  border-radius: 0 !important;
}

/* Container breathing room */
.container.my-5,
.container.company-list {
  background: transparent !important;
}