/* ── FJC Listings — Frontend Styles ─────────────────────────────────────────
   Three layouts: cards, table, feed. Kadence-safe with !important.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --fjc-lst-dark:   #0f172a;
    --fjc-lst-dark2:  #1e293b;
    --fjc-lst-green:  #00d084;
    --fjc-lst-blue:   #3b82f6;
    --fjc-lst-muted:  #64748b;
    --fjc-lst-border: #e2e8f0;
    --fjc-lst-bg:     #f8fafc;
    --fjc-lst-radius: 12px;
}

.fjc-lst { box-sizing: border-box !important; font-family: inherit !important; margin: 0 0 32px !important; }
.fjc-lst *, .fjc-lst *::before, .fjc-lst *::after { box-sizing: border-box !important; }

.fjc-lst__section-title {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    letter-spacing: -.02em !important;
    border: none !important;
    background: none !important;
}

.fjc-lst-empty {
    color: var(--fjc-lst-muted) !important;
    font-style: italic !important;
    padding: 24px !important;
    border: 1px dashed var(--fjc-lst-border) !important;
    border-radius: var(--fjc-lst-radius) !important;
    text-align: center !important;
}

/* ── Shared badges ───────────────────────────────────────────────────────── */

.fjc-lst-tag {
    display: inline-block !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    white-space: nowrap !important;
    line-height: 1.6 !important;
}

.fjc-lst-type-pill {
    display: inline-block !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border-radius: 100px !important;
    padding: 2px 10px !important;
    white-space: nowrap !important;
    line-height: 1.6 !important;
}

.fjc-lst-salary-badge {
    display: inline-block !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #059669 !important;
    white-space: nowrap !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT 1 — CARDS
   ══════════════════════════════════════════════════════════════════════════ */

.fjc-lst--cards {
    display: grid !important;
    gap: 20px !important;
    grid-template-columns: repeat( 3, 1fr ) !important;
}
@media ( max-width: 900px ) {
    .fjc-lst--cards { grid-template-columns: repeat( 2, 1fr ) !important; }
}
@media ( max-width: 540px ) {
    .fjc-lst--cards { grid-template-columns: 1fr !important; }
}

.fjc-lst-card {
    background: #fff !important;
    border: 1px solid var(--fjc-lst-border) !important;
    border-radius: var(--fjc-lst-radius) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transition: box-shadow .2s, transform .2s, border-color .2s !important;
}
.fjc-lst-card:hover {
    box-shadow: 0 8px 28px rgba(59,130,246,.12) !important;
    transform: translateY(-3px) !important;
    border-color: var(--fjc-lst-blue) !important;
}

/* Card header strip */
.fjc-lst-card__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 14px 18px 0 !important;
}

.fjc-lst-card__icon {
    font-size: 1.8rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.fjc-lst-card__header-right {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    justify-content: flex-end !important;
}

/* Card body */
.fjc-lst-card__body {
    padding: 12px 18px 16px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.fjc-lst-card__title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #0f172a !important;
    margin: 4px 0 6px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.fjc-lst-card__company,
.fjc-lst-card__location,
.fjc-lst-card__salary {
    font-size: 0.85rem !important;
    color: #475569 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

.fjc-lst-card__salary {
    color: #059669 !important;
    font-weight: 600 !important;
}

/* Card footer */
.fjc-lst-card__footer {
    padding: 0 18px 18px !important;
    margin-top: auto !important;
}

.fjc-lst-card__btn {
    display: inline-block !important;
    background: var(--fjc-lst-dark) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
    border-radius: 6px !important;
    border: none !important;
    box-shadow: none !important;
    transition: background .15s !important;
}
.fjc-lst-card__btn:hover {
    background: var(--fjc-lst-blue) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT 2 — TABLE
   ══════════════════════════════════════════════════════════════════════════ */

.fjc-lst--table { display: block !important; overflow-x: auto !important; }

.fjc-lst-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: 0.9rem !important;
    border: 1px solid var(--fjc-lst-border) !important;
    border-radius: var(--fjc-lst-radius) !important;
    overflow: hidden !important;
}

.fjc-lst-table__th {
    padding: 12px 16px !important;
    text-align: left !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: var(--fjc-lst-muted) !important;
    border-bottom: 2px solid var(--fjc-lst-border) !important;
    background: var(--fjc-lst-bg) !important;
    white-space: nowrap !important;
}
.fjc-lst-table__th--right { text-align: right !important; }

.fjc-lst-table__row { transition: background .12s !important; }
.fjc-lst-table__row:hover { background: #f0f9ff !important; }
.fjc-lst-table__row:nth-child(even) { background: #fafafa !important; }
.fjc-lst-table__row:nth-child(even):hover { background: #f0f9ff !important; }

.fjc-lst-table__td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #1e293b !important;
    vertical-align: middle !important;
}
.fjc-lst-table__td--title { min-width: 220px !important; }
.fjc-lst-table__td--right  { text-align: right !important; }
.fjc-lst-table__td--muted  { color: var(--fjc-lst-muted) !important; font-size: 0.82rem !important; white-space: nowrap !important; }

.fjc-lst-table__job-title {
    font-weight: 600 !important;
    color: #0f172a !important;
    display: block !important;
    margin-bottom: 3px !important;
}

.fjc-lst-table__btn {
    display: inline-block !important;
    background: var(--fjc-lst-dark) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    border: none !important;
    box-shadow: none !important;
    transition: background .15s !important;
}
.fjc-lst-table__btn:hover {
    background: var(--fjc-lst-blue) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT 3 — FEED
   ══════════════════════════════════════════════════════════════════════════ */

.fjc-lst--feed {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.fjc-lst-feed-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 4px !important;
    border-bottom: 1px solid var(--fjc-lst-border) !important;
    transition: background .12s !important;
}
.fjc-lst-feed-item:first-child { border-top: 1px solid var(--fjc-lst-border) !important; }
.fjc-lst-feed-item:hover { background: var(--fjc-lst-bg) !important; padding-left: 12px !important; border-radius: 8px !important; }

@media ( max-width: 540px ) {
    .fjc-lst-feed-item { flex-wrap: wrap !important; }
    .fjc-lst-feed-item__action { width: 100% !important; }
}

.fjc-lst-feed-item__icon {
    font-size: 1.8rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    background: var(--fjc-lst-bg) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--fjc-lst-border) !important;
}

.fjc-lst-feed-item__body {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.fjc-lst-feed-item__meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

.fjc-lst-feed-item__title {
    font-size: 0.97rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.fjc-lst-feed-item__details {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.fjc-lst-feed-item__detail {
    font-size: 0.8rem !important;
    color: var(--fjc-lst-muted) !important;
    white-space: nowrap !important;
}
.fjc-lst-feed-item__detail--salary {
    color: #059669 !important;
    font-weight: 600 !important;
}

.fjc-lst-feed-item__action { flex-shrink: 0 !important; }

.fjc-lst-feed-item__btn {
    display: inline-block !important;
    background: var(--fjc-lst-dark) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    transition: background .15s !important;
}
.fjc-lst-feed-item__btn:hover {
    background: var(--fjc-lst-blue) !important;
    color: #fff !important;
    text-decoration: none !important;
}