/* Frontend styles for HR Jobs Sync - modern, clean cards & modal */
.hr-jobs-listing { max-width:1200px; margin:0 auto; padding:20px; }
.hr-jobs-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.hr-job-card { background:#fff; border:1px solid #e6e9ef; border-radius:8px; padding:16px; box-shadow:0 6px 18px rgba(39,47,63,0.06); display:flex; flex-direction:column; }
.hr-job-card h3 { margin:0 0 8px; font-size:18px; color:#0f1724; }
.hr-job-card .job-dept, .hr-job-card .job-location { font-size:13px; color:#6b7280; }
.hr-job-card .job-salary { margin-top:auto; font-weight:600; color:#0b5ed7; }
.hr-job-card .hr-apply-btn { margin-top:12px; align-self:flex-start; background:linear-gradient(90deg,#0066ff,#3390ff); color:#fff; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; }

/* Modal */
#hr-job-apply-modal { display:none; position:fixed; inset:0; z-index:99999; }
.hr-modal-overlay { position:absolute; inset:0; background:rgba(3,7,18,0.6); }
.hr-modal-wrap { position:relative; max-width:720px; margin:40px auto; background:#fff; border-radius:10px; padding:22px; box-shadow:0 20px 50px rgba(2,6,23,0.6); z-index:100000; }
.hr-modal-close { position:absolute; right:12px; top:12px; background:transparent; border:none; font-size:22px; cursor:pointer; }
#job-apply-form .form-row { display:flex; gap:12px; }
#job-apply-form label { display:block; font-size:13px; margin-bottom:6px; color:#374151; }
#job-apply-form input[type="text"], #job-apply-form input[type="email"], #job-apply-form input[type="tel"], #job-apply-form textarea, #job-apply-form input[type="file"], #job-apply-form input[type="number"] { width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:6px; }
#job-apply-form button[type="submit"] { background:#0b5ed7; color:#fff; padding:10px 14px; border-radius:6px; border:none; cursor:pointer; }
#hr-apply-result { margin-top:12px; min-height:22px; }
#hr-apply-result.success { color: #0b5ed7; }
#hr-apply-result.error { color: #b91c1c; }

/* Responsive tweaks */
@media (max-width:600px) {
    .hr-modal-wrap { margin:20px; padding:16px; }
    #job-apply-form .form-row { flex-direction:column; }
}