/* ============================================================
   HR Smart System Pro — Frontend Styles
   ============================================================ */

:root {
    --hrsp-fe-primary:        #2563eb;
    --hrsp-fe-primary-dark:   #1d4ed8;
    --hrsp-fe-primary-light:  #eff6ff;
    --hrsp-fe-success:        #059669;
    --hrsp-fe-success-light:  #d1fae5;
    --hrsp-fe-danger:         #dc2626;
    --hrsp-fe-danger-light:   #fee2e2;
    --hrsp-fe-warning:        #d97706;
    --hrsp-fe-gray-50:        #f9fafb;
    --hrsp-fe-gray-100:       #f3f4f6;
    --hrsp-fe-gray-200:       #e5e7eb;
    --hrsp-fe-gray-300:       #d1d5db;
    --hrsp-fe-gray-500:       #6b7280;
    --hrsp-fe-gray-700:       #374151;
    --hrsp-fe-gray-900:       #111827;
    --hrsp-fe-white:          #ffffff;
    --hrsp-fe-radius:         10px;
    --hrsp-fe-radius-sm:      6px;
    --hrsp-fe-radius-lg:      16px;
    --hrsp-fe-shadow:         0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --hrsp-fe-shadow-lg:      0 10px 25px rgba(0,0,0,.12);
    --hrsp-fe-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.hrsp-job-card,
.hrsp-form-wrap {
    font-family: var(--hrsp-fe-font);
    color: var(--hrsp-fe-gray-900);
    line-height: 1.6;
}
.hrsp-job-card *,
.hrsp-form-wrap * { box-sizing: border-box; }

/* ============================================================
   JOB CARD
   ============================================================ */
.hrsp-job-card {
    background: var(--hrsp-fe-white);
    border-radius: var(--hrsp-fe-radius-lg);
    box-shadow: var(--hrsp-fe-shadow);
    overflow: hidden;
    margin: 24px 0;
    border: 1px solid var(--hrsp-fe-gray-200);
}

.hrsp-job-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px 32px;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%);
    color: #fff;
    gap: 20px;
    flex-wrap: wrap;
}
.hrsp-job-header-main { flex: 1; min-width: 0; }
.hrsp-job-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 12px !important;
    line-height: 1.2 !important;
}
.hrsp-job-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hrsp-job-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: rgba(255,255,255,.85);
    font-weight: 500;
}
.hrsp-badge-type {
    background: rgba(255,255,255,.2);
    color: #fff !important;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hrsp-job-cta { flex-shrink: 0; padding-top: 4px; }

/* Apply button */
.hrsp-apply-toggle {
    background: #fff;
    color: var(--hrsp-fe-primary) !important;
    border: 2px solid #fff;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    white-space: nowrap;
}
.hrsp-apply-toggle:hover {
    background: var(--hrsp-fe-primary);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.hrsp-apply-toggle[aria-expanded="true"] .hrsp-cta-arrow { transform: rotate(180deg); }
.hrsp-cta-arrow { transition: transform 0.2s ease; display: inline-block; }

/* Job body */
.hrsp-job-description { padding: 28px 32px; }
.hrsp-job-description h1,
.hrsp-job-description h2,
.hrsp-job-description h3 { color: var(--hrsp-fe-gray-900); }
.hrsp-job-description ul, .hrsp-job-description ol { padding-left: 20px; }

/* Apply section */
.hrsp-apply-section {
    border-top: 2px solid var(--hrsp-fe-gray-100);
    background: var(--hrsp-fe-gray-50);
}
.hrsp-apply-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    border-bottom: 1px solid var(--hrsp-fe-gray-200);
    background: var(--hrsp-fe-white);
}
.hrsp-apply-section-header h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--hrsp-fe-gray-900); }
.hrsp-apply-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--hrsp-fe-gray-500);
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.1s;
}
.hrsp-apply-close:hover { background: var(--hrsp-fe-danger-light); color: var(--hrsp-fe-danger); }

/* ============================================================
   FORM
   ============================================================ */
.hrsp-form-wrap { padding: 24px 32px; }

.hrsp-cv-autofill-zone { margin-bottom: 20px; }
.hrsp-autofill-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hrsp-fe-success-light);
    border: 1px solid #a7f3d0;
    color: var(--hrsp-fe-success);
    padding: 12px 16px;
    border-radius: var(--hrsp-fe-radius);
    font-size: 13px;
    font-weight: 600;
    animation: hrsp-slide-down 0.3s ease;
}
.hrsp-autofill-icon { font-size: 18px; }
@keyframes hrsp-slide-down { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

.hrsp-form-fields { display: flex; flex-direction: column; gap: 18px; }

/* Field */
.hrsp-field { display: flex; flex-direction: column; gap: 6px; }
.hrsp-label { font-size: 14px; font-weight: 600; color: var(--hrsp-fe-gray-700); }
.hrsp-required { color: var(--hrsp-fe-danger); margin-left: 2px; }

/* Inputs */
.hrsp-input,
.hrsp-select,
.hrsp-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid var(--hrsp-fe-gray-200);
    border-radius: var(--hrsp-fe-radius-sm);
    font-size: 15px;
    font-family: var(--hrsp-fe-font);
    color: var(--hrsp-fe-gray-900);
    background: var(--hrsp-fe-white);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.4;
}
.hrsp-input:focus,
.hrsp-select:focus,
.hrsp-textarea:focus {
    border-color: var(--hrsp-fe-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.hrsp-input.hrsp-input-autofilled { background: #fefce8; border-color: #fbbf24; }
.hrsp-input::placeholder,
.hrsp-textarea::placeholder { color: var(--hrsp-fe-gray-300); }
.hrsp-textarea { resize: vertical; min-height: 100px; }
.hrsp-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; }

/* File input */
.hrsp-file-wrap { position: relative; }
.hrsp-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hrsp-file-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border: 2px dashed var(--hrsp-fe-gray-300);
    border-radius: var(--hrsp-fe-radius);
    cursor: pointer;
    font-size: 14px;
    color: var(--hrsp-fe-gray-500);
    transition: all 0.15s ease;
    background: var(--hrsp-fe-gray-50);
}
.hrsp-file-label:hover { border-color: var(--hrsp-fe-primary); color: var(--hrsp-fe-primary); background: var(--hrsp-fe-primary-light); }
.hrsp-file-icon { font-size: 22px; }
.hrsp-file-name { display: block; margin-top: 6px; font-size: 12px; color: var(--hrsp-fe-success); font-weight: 600; }
.hrsp-file-wrap.hrsp-file-selected .hrsp-file-label { border-color: var(--hrsp-fe-success); background: var(--hrsp-fe-success-light); color: var(--hrsp-fe-success); }

/* CV parsing indicator */
.hrsp-cv-parsing {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--hrsp-fe-primary);
    font-weight: 600;
    margin-top: 6px;
    animation: hrsp-pulse 1s infinite;
}
@keyframes hrsp-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* Field error */
.hrsp-field-error {
    font-size: 12px;
    color: var(--hrsp-fe-danger);
    font-weight: 500;
    min-height: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.hrsp-field--has-error .hrsp-input,
.hrsp-field--has-error .hrsp-select,
.hrsp-field--has-error .hrsp-textarea { border-color: var(--hrsp-fe-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.1); }

/* Submit button */
.hrsp-form-footer { margin-top: 24px; }
.hrsp-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 28px;
    background: var(--hrsp-fe-primary);
    color: #fff !important;
    border: none;
    border-radius: var(--hrsp-fe-radius);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--hrsp-fe-font);
    letter-spacing: 0.01em;
}
.hrsp-btn-submit:hover:not(:disabled) { background: var(--hrsp-fe-primary-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,.4); }
.hrsp-btn-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.hrsp-btn-submit.loading .hrsp-btn-text { opacity: 0.7; }
.hrsp-btn-spinner { display: inline-block; animation: hrsp-spin 0.8s linear infinite; font-size: 18px; }
@keyframes hrsp-spin { to { transform: rotate(360deg); } }

/* Form messages */
.hrsp-form-messages { margin-top: 16px; }
.hrsp-message {
    padding: 12px 16px;
    border-radius: var(--hrsp-fe-radius-sm);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    animation: hrsp-slide-down 0.25s ease;
}
.hrsp-message--success { background: var(--hrsp-fe-success-light); color: var(--hrsp-fe-success); border: 1px solid #a7f3d0; }
.hrsp-message--error   { background: var(--hrsp-fe-danger-light);  color: var(--hrsp-fe-danger);  border: 1px solid #fca5a5; }
.hrsp-message--warning { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.hrsp-message-icon { font-size: 16px; flex-shrink: 0; }

/* Inline field errors from server */
.hrsp-server-errors { list-style: none; margin: 8px 0 0; padding: 0; }
.hrsp-server-errors li { font-size: 12px; color: var(--hrsp-fe-danger); margin-bottom: 3px; display: flex; align-items: center; gap: 4px; }

/* No form notice */
.hrsp-no-form-notice { padding: 20px 32px; font-size: 14px; color: var(--hrsp-fe-gray-500); font-style: italic; }

/* Stars (frontend) */
.hrsp-stars { display: inline-flex; gap: 2px; }
.hrsp-star--full  { color: #f59e0b; }
.hrsp-star--half  { color: #f59e0b; opacity: 0.65; }
.hrsp-star--empty { color: #d1d5db; }

/* Responsive */
@media (max-width: 640px) {
    .hrsp-job-header { padding: 20px; }
    .hrsp-job-title { font-size: 20px !important; }
    .hrsp-form-wrap { padding: 16px 20px; }
    .hrsp-apply-section-header { padding: 14px 20px; }
    .hrsp-apply-toggle { padding: 10px 20px; font-size: 14px; }
}

/* ── Checkbox & Radio Groups ────────────────────────────── */
.hrsp-checkbox-group,
.hrsp-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.hrsp-check-label,
.hrsp-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--hrsp-text, #374151);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s;
}

.hrsp-check-label:hover,
.hrsp-radio-label:hover {
    background: var(--hrsp-bg-alt, #f9fafb);
}

.hrsp-checkbox,
.hrsp-radio {
    width: 16px;
    height: 16px;
    accent-color: var(--hrsp-primary, #2563eb);
    cursor: pointer;
    flex-shrink: 0;
}