/* Saffron redesign — page styles for the `job_portal` app (careers form, HR screens).
   Colours only through var(--vr-…) so dark mode works. */

.jp-brand { max-height: 52px; width: auto; border-radius: 10px; }
.jp-req { color: var(--vr-bad); }
.jp-help { font-size: 12px; color: var(--vr-muted); }
textarea.vr-input { height: auto; min-height: 130px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.jp-multi.vr-input { height: auto; min-height: 180px; padding: 8px; }
.jp-multi option { padding: 6px 8px; border-radius: 8px; }
.jp-multi option:checked { background: var(--vr-accent-soft); color: var(--vr-ink); }

/* thank-you */
.jp-done { margin-top: 4vh; text-align: center; align-items: center; padding: 36px 28px; }
.jp-done .vr-card-actions { justify-content: center; margin-top: 4px; }
.jp-done .vr-card-actions > .vr-btn { flex: 0 1 auto; }
.jp-done__icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--vr-good-soft); color: var(--vr-good); }

/* HR screens */
.jp-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.jp-filters .vr-input { height: 44px; font-size: 14px; }
.jp-count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: var(--vr-ink-2); }
.jp-count .vr-link { display: inline-flex; align-items: center; gap: 4px; }
.vr-dtable td { vertical-align: top; }
.vr-cell small .vr-ico { vertical-align: -2px; }
.jp-status { gap: 6px; }
.jp-status form { margin: 0; }
.vr-input.jp-input-sm { height: 36px; padding: 0 10px; font-size: 13px; border-radius: 10px; }
.jp-row-error { margin-top: 6px; padding: 6px 8px; font-size: 12px; }
.jp-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 600px) {
  .jp-brand { display: none; }
}
/* stacked rows (phones): numbers sit next to their label, not pushed right */
@media (max-width: 760px) {
  .vr-dtable--stack td.vr-num { text-align: left; }
}