/* ===== JOB PACK PANEL ===== */
.jp-wrap { padding: 28px 32px; max-width: 860px; }
.jp-top-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }
.jp-top-bar h2 { font-size: 18px; font-weight: 600; color: var(--text); margin: 0; flex: 1; }
.jp-count-badge { font-size: 11px; font-weight: 700; background: var(--amber-glow); color: var(--amber); border: 1px solid var(--amber-dim); border-radius: 20px; padding: 3px 10px; }
.jp-gen-btn { display: flex; align-items: center; gap: 7px; background: var(--amber-glow); color: var(--amber); border: 1px solid var(--amber-dim); border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: 'DM Sans', sans-serif; }
.jp-gen-btn:hover { background: var(--amber-dim); }
.jp-gen-btn:disabled { opacity: .4; cursor: not-allowed; }
.jp-word-btn { display: flex; align-items: center; gap: 7px; background: rgba(91,156,246,0.12); color: var(--blue); border: 1px solid rgba(91,156,246,0.35); border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: 'DM Sans', sans-serif; }
.jp-word-btn:hover { background: rgba(91,156,246,0.22); }
.jp-word-btn:disabled { opacity: .4; cursor: not-allowed; }
.jp-group { margin-bottom: 24px; }
.jp-group-label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.jp-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); margin-bottom: 6px; cursor: pointer; transition: border-color .15s, background .15s; user-select: none; }
.jp-card:hover { border-color: var(--amber-dim); background: var(--surface3); }
.jp-card.jp-selected { border-color: var(--amber-dim); background: var(--amber-glow); }
.jp-card-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--border); background: var(--surface); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .12s; }
.jp-selected .jp-card-check { background: var(--amber); border-color: var(--amber); }
.jp-selected .jp-card-check::after { content: '✓'; font-size: 11px; font-weight: 700; color: #1a1200; }
.jp-card-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.jp-card-body { flex: 1; min-width: 0; }
.jp-card-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.jp-card-desc { font-size: 11px; color: var(--muted); }
.jp-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.jp-preview-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .12s; }
.jp-preview-btn:hover { border-color: var(--blue); color: var(--blue); }

/* ===== MODAL ===== */
.jp-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; }
.jp-modal { background: #fff; color: #111; border-radius: 10px; width: 100%; max-width: 820px; box-shadow: 0 20px 60px rgba(0,0,0,.4); overflow: hidden; }
.jp-modal-header { display: flex; align-items: center; padding: 14px 20px; background: #1a1a2e; color: #fff; gap: 10px; flex-wrap: wrap; }
.jp-modal-title { font-size: 14px; font-weight: 600; flex: 1; }
.jp-modal-print-btn { background: #e8a234; color: #1a0d00; border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.jp-modal-print-btn:hover { background: #f0b84d; }
.jp-modal-word-btn { background: rgba(91,156,246,0.25); color: #c8e0ff; border: 1px solid rgba(91,156,246,0.4); border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.jp-modal-word-btn:hover { background: rgba(91,156,246,0.4); }
.jp-modal-close { background: none; border: none; color: #aaa; font-size: 18px; cursor: pointer; padding: 0; }
.jp-modal-close:hover { color: #fff; }
.jp-modal-body { padding: 24px; overflow-y: auto; max-height: calc(90vh - 80px); }

/* ===== FORM STYLES (preview only — print uses inline styles) ===== */
.jp-form { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000; background: #fff; width: 100%; }
.jp-form table { width: 100%; border-collapse: collapse; }
.jp-form td, .jp-form th { border: 1px solid #555; padding: 4px 6px; vertical-align: top; font-size: 11px; }
.jp-form .jp-header-cell { background: #1a1a2e; color: #fff; font-weight: 700; font-size: 13px; text-align: center; padding: 7px 6px; }
.jp-form .jp-col-header { background: #ddd; font-weight: 700; text-align: center; font-size: 10px; text-transform: uppercase; }
.jp-form .jp-auto { background: #e8f4fd; font-weight: 600; color: #0a3d6b; }
.jp-form .jp-auto .jp-field-value { color: #0a3d6b; }
.jp-form .jp-field-label { font-size: 9px; font-weight: 700; text-transform: uppercase; color: #555; display: block; margin-bottom: 2px; }
.jp-form .jp-field-value { font-size: 11px; font-weight: 600; color: #000; }
.jp-form .jp-blank-row td { height: 20px; }
.jp-form .jp-section-label { font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #444; background: #f0f0f0; }
.jp-form .jp-sidebar { background: #f8f8f8; }

@media print {
  body * { visibility: hidden; }
  #jp-print-area, #jp-print-area * { visibility: visible; }
  #jp-print-area { position: absolute; inset: 0; background: #fff; }
  .jp-form .jp-auto { background: #d6eaf8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .jp-form .jp-header-cell { background: #1a1a2e !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .jp-form .jp-col-header { background: #ccc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}