/* ============================================================
   components.css — reusable pieces shared by more than one page:
   cards, badges, buttons, progress bars, dropdowns, empty state
============================================================ */

/* ---------- Card ---------- */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px; box-shadow:var(--shadow-card);
}
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-title{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; }
.card-title .ic{
  width:28px; height:28px; border-radius:8px;
  background:var(--violet-100); color:var(--violet-600);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.card-link{
  font-size:13.5px; font-weight:600; color:var(--violet-600);
  display:flex; align-items:center; gap:4px; cursor:pointer;
}
.divider{ height:1px; background:var(--line); margin:0 0 16px; }

/* ---------- Donut + legend ---------- */
.donut-row{ display:flex; align-items:center; gap:26px; }
.legend{ display:flex; flex-direction:column; gap:11px; }
.legend-item{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink); }
.dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }

/* ---------- Small stat blocks ---------- */
.stat-inline{ text-align:center; }
.stat-inline .num{ font-size:26px; font-weight:800; }
.stat-inline .lbl{ font-size:12.5px; color:var(--ink-soft); }

.summary-box{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:18px;
}
.summary-box .num{ font-size:24px; font-weight:800; }
.summary-box .lbl{ font-size:13px; color:var(--ink-soft); margin-top:2px; }

/* ---------- Generic list rows ---------- */
.row-item{
  display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--line);
}
.row-item:last-child{ border-bottom:none; }

/* ---------- Badges ---------- */
.badge{ padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.badge-green{ background:var(--green-bg); color:var(--green); }
.badge-amber{ background:var(--amber-bg); color:var(--amber); }
.badge-rose{ background:var(--rose-bg); color:var(--rose); }
.badge-violet{ background:var(--violet-100); color:var(--violet-700); }

/* ---------- Progress bar ---------- */
.progress-track{ height:8px; border-radius:999px; background:var(--violet-100); overflow:hidden; }
.progress-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--violet-600),var(--violet-500));
}
/* label row above a progress bar (used on Home and Skills) */
.skill-pct-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn-solid{
  padding:9px 18px; border-radius:10px; border:none;
  background:linear-gradient(135deg,var(--violet-600),var(--violet-500));
  color:#fff; font-weight:700; font-size:13.5px;
}
.btn-outline{
  padding:7px 14px; border-radius:9px; border:1px solid var(--violet-300);
  background:var(--violet-100); color:var(--violet-700);
  font-weight:700; font-size:12.5px; flex-shrink:0;
}
.btn-cancel{
  padding:9px 18px; border-radius:10px; border:1px solid var(--line);
  background:var(--white); color:var(--ink-soft); font-weight:700; font-size:13.5px;
}
.btn-tiny{
  padding:7px 14px; border-radius:9px; border:1px solid var(--violet-300);
  background:var(--violet-100); color:var(--violet-700); font-weight:700; font-size:12.5px;
}
.btn-tiny.uploaded{ background:var(--green-bg); border-color:#bfe9d3; color:var(--green); }

/* ---------- Dropdown (<details> based) ---------- */
.dropdown{ position:relative; }
.dropdown > summary{
  list-style:none; padding:8px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--white); font-weight:600; font-size:12.5px; color:var(--ink);
  display:flex; align-items:center; gap:8px; white-space:nowrap; cursor:pointer;
}
.dropdown > summary::-webkit-details-marker{ display:none; }
.dropdown > summary:hover{ background:var(--violet-100); }
.dropdown[open] > summary{ background:var(--violet-100); border-color:var(--violet-300); }
.dropdown.accent > summary{ background:var(--green-bg); border-color:#bfe9d3; color:var(--green); }
.dropdown-menu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:180px; z-index:20;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-card); padding:6px;
}
.dropdown-menu button{
  display:block; width:100%; text-align:left; padding:8px 10px; border-radius:8px;
  border:none; background:none; font-size:13px; color:var(--ink); font-family:inherit;
}
.dropdown-menu button:hover{ background:var(--violet-100); }
.dropdown-menu button.sel{ color:var(--violet-700); font-weight:700; }

/* ---------- Empty state ---------- */
.empty-state{
  margin-top:40px; padding:70px 24px; text-align:center;
  background:var(--white); border:1px dashed var(--line); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.empty-ic{
  width:56px; height:56px; border-radius:16px;
  background:var(--violet-100); color:var(--violet-600);
  display:flex; align-items:center; justify-content:center; margin-bottom:6px;
}
.empty-state h3{ margin:0; font-size:17px; }
.empty-state p{ margin:0; max-width:360px; color:var(--ink-soft); font-size:13.5px; line-height:1.6; }

/* Job details uses a full-width reading flow so company information follows the role. */
.details-page .details-card .details-grid{
  grid-template-columns:minmax(0,1fr);
  gap:22px;
}
.details-page .details-card .details-main{ min-width:0; }
.details-page .details-card .details-main>p{ max-width:82ch; }
.details-page .details-card .facts{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.details-page .details-card .details-side{
  min-width:0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--lilac-bg);
}
.details-page .details-card .details-side h2{ margin-bottom:8px; }
.details-page .details-card .details-side p{ max-width:82ch; margin:0; }
@media(max-width:760px){
  .details-page .details-card .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .details-page .details-card .details-side{ padding:18px; }
}
@media(max-width:480px){
  .details-page .details-card .facts{ grid-template-columns:minmax(0,1fr); }
  .details-page .details-card .details-side{ padding:16px; }
}

.job-round-flow{
  --round-accent:var(--violet-600);
  --round-line:var(--violet-300);
  display:flex;
  align-items:center;
  gap:30px;
  overflow-x:auto;
  padding:12px 4px 20px;
  scrollbar-width:thin;
}
.job-round-node-wrap{
  position:relative;
  flex:0 0 auto;
}
.job-round-node-wrap:not(:last-child)::after{
  content:"";
  position:absolute;
  left:calc(100% + 7px);
  top:50%;
  width:16px;
  border-top:2px solid var(--round-line);
}
.job-round-number{
  display:grid;
  place-items:center;
  flex:0 0 32px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--round-accent);
  color:#fff;
  font-size:13px;
  font-weight:800;
}
.job-round-step{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:52px;
  max-width:240px;
  padding:9px 14px 9px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
  box-shadow:var(--shadow-card);
  text-align:left;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.job-round-step:not(:disabled){cursor:pointer}
.job-round-step:not(:disabled):hover,.job-round-step.is-expanded{border-color:var(--round-accent);box-shadow:0 5px 16px rgba(91,92,240,.12)}
.job-round-step:not(:disabled):hover{transform:translateY(-1px)}
.job-round-step:focus-visible{outline:3px solid color-mix(in srgb,var(--round-accent) 28%,transparent);outline-offset:3px}
.job-round-step:disabled{opacity:1;cursor:default}
.job-round-step:disabled .job-round-number{background:#98a2b3}
.job-round-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700}
.job-round-detail-panels{display:grid;gap:10px}
.job-round-detail-panel{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--white)}
.job-round-detail-panel[hidden]{display:none}
.job-round-detail-panel h3,.job-round-detail-panel h4{margin:0 0 12px;font-size:14px}
.job-round-detail-panel dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0}
.job-round-detail-panel dl>div{min-width:0}
.job-round-detail-panel dt{margin-bottom:4px;color:var(--ink-soft);font-size:11px}
.job-round-detail-panel dd{margin:0;font-size:13px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-line}
.job-round-detail-panel a{color:var(--violet-700);font-weight:700}
.round-flow-empty{margin:8px 0;color:var(--ink-soft);font-size:13px}