/* ==========================================================================
   PERKESO MyFutureJobs — Components
   ========================================================================== */

/* ---------- Button (shadcn-style: medium weight, rounded-md, tactile) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-sm);
  line-height: 1; height: 38px; padding: 0 16px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; letter-spacing: 0;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn .icon { width: 16px; height: 16px; }

.btn-primary { background: var(--grad-primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--action-primary-hover); }

.btn-accent { background: var(--grad-accent); color: #fff; box-shadow: var(--shadow-xs); }
.btn-accent:hover { background: var(--action-accent-hover); }

.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-secondary:hover { background: var(--slate-200); }

/* Ask AI — white button with a subtle navy + orange blur (mesh) tint */
.btn-ai {
  background:
    radial-gradient(90% 130% at 0% 0%, rgba(34,31,95,.12), transparent 60%),
    radial-gradient(90% 130% at 100% 100%, rgba(242,109,33,.14), transparent 60%),
    #ffffff;
  color: var(--mfj-navy-900); border: 1px solid var(--slate-200);
  font-weight: var(--fw-semibold); box-shadow: var(--shadow-xs);
}
.btn-ai:hover {
  border-color: var(--slate-300);
  background:
    radial-gradient(95% 140% at 0% 0%, rgba(34,31,95,.18), transparent 60%),
    radial-gradient(95% 140% at 100% 100%, rgba(242,109,33,.20), transparent 60%),
    #ffffff;
}
.btn-ai .icon { color: var(--mfj-orange-500); }

.btn-outline { background: var(--card); color: var(--foreground); border-color: var(--input); box-shadow: var(--shadow-xs); }
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--text-default); }
.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }

.btn-danger { background: var(--destructive); color: var(--destructive-foreground); box-shadow: var(--shadow-xs); }
.btn-danger:hover { background: #c23b34; }

.btn-link { background: none; color: var(--text-link); height: auto; padding: 0; }
.btn-link:hover { text-decoration: underline; }

.btn-sm { height: 32px; padding: 0 12px; font-size: var(--fs-xs); }
.btn-lg { height: 44px; padding: 0 22px; font-size: var(--fs-base); }
.btn-block { width: 100%; }
.btn-icon { width: 38px; padding: 0; }
.btn-sm.btn-icon { width: 32px; }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--slate-100); color: var(--slate-700);
}
.badge-brand   { background: var(--mfj-navy-50); color: var(--mfj-navy-700); }
.badge-info    { background: var(--feedback-info-soft); color: var(--mfj-blue-700); }
.badge-success { background: var(--feedback-success-soft); color: var(--mfj-teal-700); }
.badge-warning { background: var(--feedback-warning-soft); color: var(--mfj-orange-700); }
.badge-danger  { background: var(--feedback-danger-soft); color: var(--red-500); }
.badge-accent  { background: var(--mfj-orange-50); color: var(--mfj-orange-700); }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---------- Sticky form actions (post a job) ---------- */
.post-actions { position: sticky; bottom: var(--space-4); display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-top: var(--space-4); background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); z-index: 5; }

/* ---------- Skill autocomplete ---------- */
.skill-ac-list { border: 1px solid var(--border); border-radius: var(--radius-md); margin-top: 6px; background: #fff; box-shadow: var(--shadow-md); overflow: hidden; }
.skill-ac-list button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 12px; background: none; border: none; cursor: pointer; font-size: var(--fs-sm); color: var(--text-default); }
.skill-ac-list button:hover { background: var(--accent); color: var(--text-strong); }
.skill-ac-list button .icon { width: 14px; height: 14px; color: var(--mfj-orange-500); }

/* ---------- WYSIWYG editor ---------- */
.wysiwyg { border: 1px solid var(--input); border-radius: var(--radius-md); overflow: hidden; background: var(--card); }
.wysiwyg-tb { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--slate-50); }
.wysiwyg-tb button { width: 30px; height: 28px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-default); font-size: var(--fs-sm); }
.wysiwyg-tb button:hover { background: var(--slate-200); color: var(--text-strong); }
.wysiwyg-area { min-height: 110px; padding: 10px 12px; font-size: var(--fs-base); line-height: var(--lh-normal); outline: none; }
.wysiwyg-area:focus { box-shadow: inset 0 0 0 2px var(--mfj-blue-100); }
.wysiwyg-area ul { margin: 0; padding-left: 1.2rem; }
.wysiwyg-area:empty::before { content: attr(data-ph); color: var(--text-faint); }

/* ---------- Tag (removable chip) ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--surface-info-soft); color: var(--mfj-blue-700); border: 1px solid var(--mfj-blue-100);
}
.tag button { background: none; border: none; cursor: pointer; color: inherit; opacity: .6; line-height: 1; }
.tag button:hover { opacity: 1; }

/* ---------- Card (shadcn: rounded-xl, hairline border, whisper shadow) ---------- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xs);
}
.card-pad { padding: var(--space-6); }
.card-hover { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--mfj-blue-100); }
.card-header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-default); }
.card-body { padding: var(--space-6); }
.card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-default); background: var(--slate-50); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

/* ---------- ServiceCard ---------- */
.service-card { text-align: left; }
.service-icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: grid; place-items: center; margin-bottom: var(--space-4);
  background: var(--surface-info-soft); color: var(--mfj-blue-600);
}
.service-card.accent .service-icon, .service-icon.accent { background: var(--surface-accent-soft); color: var(--mfj-orange-600); }
.service-card.teal .service-icon, .service-icon.teal { background: var(--mfj-teal-50); color: var(--mfj-teal-600); }
.service-card h4 { margin-bottom: var(--space-2); }

/* ---------- Avatar ---------- */
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--mfj-navy-700); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-sm);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 30px; height: 30px; font-size: var(--fs-xs); }
.avatar-lg { width: 64px; height: 64px; font-size: var(--fs-h4); }

/* ---------- Form controls ---------- */
.field { display: block; }
.label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: var(--space-2); }
.hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-2); }
.input, .select, .textarea {
  width: 100%; height: 38px; padding: 0 12px; font-size: var(--fs-base);
  background: var(--card); color: var(--foreground); letter-spacing: 0;
  border: 1px solid var(--input); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.textarea { height: auto; padding: 10px 12px; }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ring-color); box-shadow: var(--ring); outline: none; }
.textarea { resize: vertical; min-height: 96px; line-height: var(--lh-normal); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B80' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }
.field.invalid .input, .field.invalid .select { border-color: var(--feedback-danger); }
.field.invalid .hint { color: var(--feedback-danger); }

.input-group { position: relative; }
.input-group .input { padding-left: 42px; }
.input-group .input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); width: 18px; height: 18px; }

.checkbox, .radio { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: var(--fs-sm); }
.checkbox input, .radio input { width: 18px; height: 18px; accent-color: var(--mfj-blue-600); margin-top: 1px; flex: none; }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--slate-300); border-radius: var(--radius-pill); transition: background var(--dur-base) var(--ease-out); cursor: pointer; }
.switch .slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out); }
.switch input:checked + .slider { background: var(--mfj-teal-500); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:focus-visible + .slider { box-shadow: var(--ring); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-default); }
.tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 12px 16px; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.tab:hover { color: var(--text-strong); }
.tab.active { color: var(--mfj-blue-700); border-bottom-color: var(--mfj-blue-600); }
.tab-panel { padding-top: var(--space-6); }
.tab-panel[hidden] { display: none; }

/* ---------- Alert ---------- */
.alert { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid; font-size: var(--fs-sm); }
.alert .alert-icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.alert-title { font-weight: var(--fw-bold); margin-bottom: 2px; color: var(--text-strong); }
.alert-info    { background: var(--feedback-info-soft); border-color: var(--mfj-blue-100); color: var(--mfj-blue-700); }
.alert-success { background: var(--feedback-success-soft); border-color: #BFE6DA; color: var(--mfj-teal-700); }
.alert-warning { background: var(--feedback-warning-soft); border-color: var(--mfj-orange-100); color: var(--mfj-orange-700); }
.alert-danger  { background: var(--feedback-danger-soft); border-color: #F3C9C6; color: var(--red-500); }

/* ---------- JobCard ---------- */
.job-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.job-card .job-top { display: flex; gap: var(--space-3); align-items: flex-start; }
.job-logo { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--slate-100); display: grid; place-items: center; font-weight: var(--fw-bold); color: var(--mfj-navy-700); flex: none; }
.job-card .job-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--text-strong); }
.job-card .job-company { font-size: var(--fs-sm); color: var(--text-muted); }
.job-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); }
.job-meta .mi { display: inline-flex; align-items: center; gap: 5px; }
.job-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.job-card .save-btn { background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 4px; border-radius: var(--radius-xs); }
.job-card .save-btn:hover { color: var(--mfj-orange-500); }
.job-card .save-btn.saved { color: var(--mfj-orange-500); }

/* ---------- MatchScore (explainable AI) ---------- */
.match { display: inline-flex; align-items: center; gap: var(--space-2); }
.match-ring { --p: 0; position: relative; width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--match-color, var(--mfj-teal-500)) calc(var(--p) * 1%), var(--slate-100) 0); display: grid; place-items: center; }
.match-ring::before { content: ""; position: absolute; inset: 5px; background: #fff; border-radius: 50%; }
.match-ring .val { position: relative; font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--fs-sm); color: var(--text-strong); }
.match-lg { width: 76px; height: 76px; }
.match-lg .val { font-size: var(--fs-h4); }

.match-breakdown { display: flex; flex-direction: column; gap: var(--space-3); }
.match-factor { display: grid; grid-template-columns: 130px 1fr 42px; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.match-factor .fname { color: var(--text-default); }
.match-factor .ftrack { display: block; height: 8px; background: var(--slate-100); border-radius: var(--radius-pill); overflow: hidden; }
.match-factor .fbar { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--mfj-blue-500); transition: width var(--dur-slow) var(--ease-out); }
.match-factor .fval { text-align: right; font-weight: var(--fw-semibold); color: var(--text-strong); }
.match-factor.strong .fbar { background: var(--mfj-teal-500); }
.match-factor.mid .fbar { background: var(--mfj-blue-500); }
.match-factor.weak .fbar { background: var(--mfj-orange-500); }
.match-why { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-relaxed); }
.score-strong { --match-color: var(--mfj-teal-500); }
.score-mid { --match-color: var(--mfj-blue-500); }
.score-weak { --match-color: var(--mfj-orange-500); }

/* ---------- StatCard / KPI ---------- */
.stat { padding: var(--space-5); }
.stat .stat-label { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-2); }
.stat .stat-value { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--fs-h2); color: var(--text-strong); line-height: 1; }
.stat .stat-delta { font-size: var(--fs-xs); font-weight: var(--fw-semibold); margin-top: var(--space-2); display: inline-flex; align-items: center; gap: 4px; }
.stat .stat-delta.up { color: var(--feedback-success); }
.stat .stat-delta.down { color: var(--feedback-danger); }
.stat .stat-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--surface-info-soft); color: var(--mfj-blue-600); }

/* ---------- DataTable ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-weight: var(--fw-semibold); color: var(--text-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); background: var(--slate-50); white-space: nowrap; }
.table td { padding: var(--space-4); border-bottom: 1px solid var(--border-default); color: var(--text-default); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--dur-fast); }
.table tbody tr:hover { background: var(--slate-50); }

/* ---------- ProgressMeter ---------- */
.meter { display: flex; flex-direction: column; gap: var(--space-2); }
.meter .meter-track { height: 10px; background: var(--slate-100); border-radius: var(--radius-pill); overflow: hidden; }
.meter .meter-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--mfj-blue-600), var(--mfj-teal-500)); transition: width var(--dur-slow) var(--ease-out); }
.meter .meter-top { display: flex; justify-content: space-between; font-size: var(--fs-sm); }

/* ---------- Stepper ---------- */
.stepper { display: flex; align-items: flex-start; gap: var(--space-2); overflow-x: auto; padding: var(--space-2) 2px; }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 0; min-width: 92px; position: relative; }
.step .step-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--border-strong); color: var(--text-muted); font-weight: var(--fw-bold); z-index: 1; }
.step .step-label { font-size: var(--fs-xs); margin-top: var(--space-2); color: var(--text-muted); }
.step::before { content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 2px; background: var(--border-strong); z-index: 0; }
.step:first-child::before { display: none; }
.step.done .step-dot { background: radial-gradient(80% 90% at 30% 15%, rgba(255,255,255,.30), transparent 60%), var(--mfj-teal-500); border-color: var(--mfj-teal-500); color: #fff; }
.step.done::before { background: var(--mfj-teal-500); }
.step.active .step-dot { background: radial-gradient(80% 90% at 30% 15%, rgba(255,255,255,.32), transparent 60%), var(--mfj-blue-600); border-color: var(--mfj-blue-600); color: #fff; box-shadow: var(--ring); }
.step.active .step-label { color: var(--mfj-blue-700); font-weight: var(--fw-semibold); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: var(--space-8); }
.timeline::before { content: ""; position: absolute; left: 11px; top: 4px; bottom: 4px; width: 2px; background: var(--border-default); }
.tl-item { position: relative; padding-bottom: var(--space-6); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item .tl-dot { position: absolute; left: calc(-1 * var(--space-8) + 5px); top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--mfj-blue-600); }
.tl-item.success .tl-dot { border-color: var(--mfj-teal-500); }
.tl-item.warning .tl-dot { border-color: var(--mfj-orange-500); }
.tl-item.danger .tl-dot { border-color: var(--feedback-danger); }
.tl-item .tl-time { font-size: var(--fs-xs); color: var(--text-faint); }
.tl-item .tl-title { font-weight: var(--fw-semibold); color: var(--text-strong); }

/* ---------- WeightSlider ---------- */
.weight { display: grid; grid-template-columns: 1fr 56px; align-items: center; gap: var(--space-4); }
.weight .w-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-strong); margin-bottom: var(--space-2); }
.weight input[type=range] { width: 100%; accent-color: var(--mfj-blue-600); }
.weight .w-val { text-align: center; font-weight: var(--fw-bold); color: var(--mfj-blue-700); background: var(--mfj-blue-50); border-radius: var(--radius-sm); padding: 6px; font-size: var(--fs-sm); }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(14, 35, 71, 0.5); display: grid; place-items: center; padding: var(--space-4); z-index: var(--z-modal); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; transform: translateY(8px) scale(.98); transition: transform var(--dur-base) var(--ease-out); }
.modal-backdrop.open .modal { transform: none; }
.modal-head { flex: none; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-default); display: flex; justify-content: space-between; align-items: center; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-6); }
.modal-foot { flex: none; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-default); display: flex; justify-content: flex-end; gap: var(--space-3); }

/* ---------- Toast ---------- */
.toast-stack { position: fixed; bottom: var(--space-6); right: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); z-index: var(--z-toast); }
.toast { display: flex; align-items: center; gap: var(--space-3); background: var(--mfj-navy-800); color: #fff; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--fs-sm); min-width: 240px; animation: toast-in var(--dur-base) var(--ease-out); }
.toast.success { background: var(--mfj-teal-600); }
.toast.danger { background: var(--feedback-danger); }
.toast .t-icon { width: 18px; height: 18px; flex: none; }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } }

/* ---------- NavShell (app layout for logged-in portals) ---------- */
.shell { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }
.shell-side { background: var(--grad-brand); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.shell-brand { padding: var(--space-5) var(--space-6); display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid rgba(255,255,255,.1); }
.shell-brand .logo-mark { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--mfj-orange-500); display: grid; place-items: center; font-weight: var(--fw-extra); color: #fff; flex: none; }
.shell-brand .logo-text { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-base); }
.shell-nav { padding: var(--space-4) var(--space-3); flex: 1; overflow-y: auto; }
.shell-nav .nav-section { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255,255,255,.45); padding: var(--space-4) var(--space-3) var(--space-2); }
.shell-nav a { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-sm); color: rgba(255,255,255,.8); font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: 2px; transition: background var(--dur-fast), color var(--dur-fast); }
.shell-nav a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.shell-nav a.active { background: var(--mfj-blue-600); color: #fff; }
.shell-nav a .icon { width: 18px; height: 18px; flex: none; }
.shell-side-foot { padding: var(--space-4); border-top: 1px solid rgba(255,255,255,.1); }
.shell-main { display: flex; flex-direction: column; min-width: 0; }
.shell-topbar { background: #fff; border-bottom: 1px solid var(--border-default); padding: var(--space-4) var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); position: sticky; top: 0; z-index: var(--z-header); }
.shell-content { padding: var(--space-8); flex: 1; }
.shell-content.wide { max-width: var(--container-max); width: 100%; margin-inline: auto; }

.page-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: var(--ls-tight); }
.context-pill { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); background: var(--mfj-navy-50); color: var(--mfj-navy-700); padding: 5px 12px; border-radius: var(--radius-pill); font-weight: var(--fw-semibold); }

.hamburger { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .shell-side { position: fixed; left: 0; top: 0; width: 256px; z-index: var(--z-drawer); transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-out); }
  .shell.nav-open .shell-side { transform: none; box-shadow: var(--shadow-lg); }
  .hamburger { display: inline-flex; }
  .shell-content, .shell-topbar { padding-inline: var(--space-4); }
}

/* ---------- App top nav (jobseeker module — matches reference) ---------- */
.appnav { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: var(--z-header); }
.appnav .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: var(--space-5); }
.appnav .mainnav { display: flex; gap: var(--space-1); }
.appnav .mainnav a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); }
.appnav .mainnav a:hover { background: var(--accent); color: var(--text-strong); text-decoration: none; }
.appnav .mainnav a.active { background: var(--surface-info-soft); color: var(--mfj-blue-700); }
.appnav .mainnav a .icon { width: 17px; height: 17px; }
.appnav .right { display: flex; align-items: center; gap: var(--space-3); }
.appnav .who { text-align: right; line-height: 1.15; }
.appnav .who .nm { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.appnav .who .em { font-size: var(--fs-xs); color: var(--text-muted); }
@media (max-width: 820px) { .appnav .mainnav a span { display: none; } .appnav .who { display: none; } .appnav .inner { gap: var(--space-2); } }

/* ---------- Public site header ---------- */
.site-header { background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-default); position: sticky; top: 0; z-index: var(--z-header); }
.site-header .inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--space-6); }
.site-logo { display: flex; align-items: center; gap: var(--space-3); }
.site-logo .logo-mark { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--mfj-navy-700); display: grid; place-items: center; font-weight: var(--fw-extra); color: #fff; }
.site-logo .logo-text { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--mfj-navy-700); }
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav a { color: var(--text-default); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.site-nav a:hover { color: var(--mfj-blue-700); text-decoration: none; }
@media (max-width: 720px) { .site-nav .nav-links { display: none; } }

/* ---------- Wordmark logo — Inter, official myfuturejobs.gov.my colours ---------- */
.wordmark { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-h4); letter-spacing: -0.03em; white-space: nowrap; color: #221F5F; line-height: 1; }
.wordmark .my { color: #F26D21; }
.wordmark.light { color: #fff; }
.wordmark.sm { font-size: var(--fs-lg); }

/* ---------- Lang toggle ---------- */
.lang-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); overflow: hidden; }
.lang-toggle button { border: none; background: #fff; padding: 6px 12px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); cursor: pointer; }
.lang-toggle button.active { background: var(--mfj-navy-700); color: #fff; }

/* ---------- Swatch (styleguide) ---------- */
.swatch { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-default); }
.swatch .chip { height: 72px; }
.swatch .meta { padding: var(--space-3); font-size: var(--fs-xs); }
.swatch .meta .name { font-weight: var(--fw-semibold); color: var(--text-strong); }
.swatch .meta .hex { color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; }

/* ---------- Responsive: collapse inline 2-col grids on mobile ----------
   Many page layouts set grid-template-columns inline (e.g. "1.6fr 1fr").
   Inline styles outrank normal CSS, so we use !important to force a single
   column on small screens and prevent horizontal overflow. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .grid > * { min-width: 0; }
  [style*="position:sticky"], [style*="position: sticky"] { position: static !important; }
  .shell-main { min-width: 0; }
  .shell-content { overflow-x: hidden; }
}

/* ---------- AI chat drawer (BotCounsellor — conversational) ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(14,35,71,.42); z-index: var(--z-modal); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(440px, 100vw); background: var(--card); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); z-index: var(--z-modal); }
.drawer-backdrop.open .drawer { transform: none; }
.drawer-head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.drawer-head .bot { display: flex; align-items: center; gap: var(--space-3); }
.drawer-head .bot-ic { width: 38px; height: 38px; border-radius: var(--radius-md); display: grid; place-items: center; background: linear-gradient(135deg, var(--mfj-blue-600), var(--mfj-navy-700)); color: #fff; flex: none; }
.drawer-head .bot .name { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.1; }
.drawer-head .bot .status { font-size: var(--fs-xs); color: var(--feedback-success); }
.drawer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--space-4) var(--space-5) var(--space-5); }

.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-1) var(--space-1) var(--space-3); }
.chat-msg { max-width: 86%; padding: 10px 14px; border-radius: var(--radius-lg); font-size: var(--fs-sm); line-height: var(--lh-normal); white-space: pre-wrap; }
.chat-msg.ai { background: var(--surface-info-soft); color: var(--mfj-navy-800); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg.me { background: var(--mfj-blue-600); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg .role { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold); opacity: .8; margin-bottom: 4px; }
.chat-typing { display: inline-flex; gap: 4px; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--mfj-blue-500); animation: chat-bounce 1s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; } .chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-4px);opacity:1} }
.chat-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.chat-chips .tag { cursor: pointer; }
.chat-input { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

/* rich AI breakdown bubble */
.chat-msg.rich { max-width: 100%; width: 100%; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.ai-card .ai-top { padding-bottom: var(--space-3); }
.ai-card .ai-sec { padding: var(--space-3) 0; border-top: 1px dashed var(--border); }
.ai-sec-h { display: flex; align-items: center; gap: 6px; font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--mfj-blue-700); margin-bottom: 6px; }
.ai-sec-h .icon { width: 15px; height: 15px; }
.ai-list { margin: 0; padding-left: 1.1rem; font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 4px; }
.ai-path { display: flex; gap: 4px; }
.ai-step { flex: 1; text-align: center; position: relative; padding-top: 14px; }
.ai-step .d { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--slate-300); }
.ai-step::before { content: ""; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: var(--slate-200); }
.ai-step:first-child::before { display: none; }
.ai-step.here .d { background: var(--mfj-blue-600); box-shadow: 0 0 0 3px var(--mfj-blue-100); }
.ai-step .l { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-strong); }
.ai-step.here .l { color: var(--mfj-blue-700); }
.ai-step .b { display: block; font-size: 10px; color: var(--text-muted); }

/* ---------- Near-me map (Find Jobs) ---------- */
.nearme { display: flex; gap: var(--space-4); align-items: stretch; }
.nearme-list { width: 32%; min-width: 250px; display: flex; flex-direction: column; gap: var(--space-3); max-height: 660px; overflow-y: auto; padding-right: 4px; }
.map-wrap { flex: 1; position: relative; height: 660px; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: #e3ebf3; cursor: grab; user-select: none; }
.map-wrap.grabbing { cursor: grabbing; }
.map-world { position: absolute; top: 0; left: 0; width: 1000px; height: 680px; transform-origin: 0 0; will-change: transform;
  background-color: #dfe8f1;
  background-image:
    linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px),
    linear-gradient(120deg, transparent 48%, #cdd9e6 48%, #cdd9e6 52%, transparent 52%),
    linear-gradient(20deg, transparent 60%, #cdd9e6 60%, #cdd9e6 63%, transparent 63%);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%;
}
.map-pin { position: absolute; transform: translate(-50%, -100%); z-index: 2; cursor: pointer; }
.map-pin .head { display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 8px 2px 4px; box-shadow: var(--shadow-sm); white-space: nowrap; font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.map-pin .head .ring { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: var(--fw-bold); }
.map-pin .stem { width: 2px; height: 8px; background: var(--slate-400); margin: 0 auto; }
.map-pin.near .head { border-color: var(--mfj-teal-500); box-shadow: var(--shadow-md); }
.map-pin.far { opacity: .5; }
.map-pin.active .head { outline: 2px solid var(--mfj-blue-600); }
.user-pin { position: absolute; transform: translate(-50%, -50%); z-index: 5; cursor: grab; }
.user-pin.grabbing { cursor: grabbing; }
.user-pin .glow { width: 22px; height: 22px; border-radius: 50%; background: var(--mfj-blue-600); border: 3px solid #fff; box-shadow: var(--shadow-md), 0 0 0 4px rgba(37,99,201,.25); }
.map-radius { position: absolute; border-radius: 50%; border: 2px dashed var(--mfj-blue-500); background: rgba(37,99,201,.07); transform: translate(-50%, -50%); pointer-events: none; z-index: 1; }
.map-controls { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 10; }
.map-controls button { width: 36px; height: 36px; }
.map-hint { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.92); padding: 7px 12px; border-radius: var(--radius-pill); font-size: var(--fs-xs); color: var(--text-default); box-shadow: var(--shadow-sm); z-index: 10; max-width: 70%; }
.map-badge { position: absolute; left: 12px; top: 12px; z-index: 10; }
@media (max-width: 760px) { .nearme { flex-direction: column; } .nearme-list { width: 100%; max-height: none; } .map-wrap { width: 100%; height: 420px; } }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: var(--space-12) var(--space-6); color: var(--text-muted); }
.empty .empty-icon { width: 56px; height: 56px; margin: 0 auto var(--space-4); color: var(--slate-300); }