/* ==========================================================================
   JobsHives — dashboard-home.php component styles
   Phase 2 of the dashboard redesign (see "JobsHives Dashboard - Design Spec.md",
   section 3 "Screen: Home"). Ported from JobsHives/dashboard.css's #view-home
   component classes (.stat-box, .ring-wrap, .action-item, .match-card,
   .tool-mini, .earn-card, etc.), renamed to use this repo's --jh-* token
   names from css/dashboard-tokens.css instead of the prototype's --blue-*
   tokens so it drops in next to the real shell skin.
   ========================================================================== */

.dh-wrap { max-width: 1180px; }

/* ---- Greeting row ---- */
.dh-hi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dh-hi-row h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 30px; font-weight: 700; color: var(--jh-navy-950); letter-spacing: -0.02em; }
.dh-hi-row .sub { color: var(--jh-text-muted); font-size: 15px; margin-top: 6px; }
.dh-hi-wave { color: var(--jh-amber-500); }

/* ---- Stat strip ---- */
.dh-stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.dh-stat-box { background: var(--jh-white); border: 1px solid var(--jh-border); border-radius: var(--jh-radius); padding: 18px; }
.dh-stat-box .n { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 26px; color: var(--jh-navy-950); }
.dh-stat-box .l { font-size: 12.5px; color: var(--jh-text-muted); margin-top: 2px; font-weight: 500; }
.dh-stat-box .d { font-size: 11.5px; margin-top: 8px; color: var(--jh-text-faint); font-weight: 600; }

/* ---- Grid ---- */
.dh-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 22px; margin-top: 22px; align-items: start; }

.dh-card { background: var(--jh-white); border: 1px solid var(--jh-border); border-radius: var(--jh-radius-lg); box-shadow: var(--jh-shadow-sm); }
.dh-card-pad { padding: 24px; }
.dh-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.dh-card-h h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; color: var(--jh-navy-950); }
.dh-card-h .more { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--jh-blue-700); display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.dh-card-h .more:hover { gap: 8px; }

/* ---- Completeness hero card ---- */
.dh-complete-card { padding: 26px; display: flex; gap: 26px; align-items: center; background: linear-gradient(150deg, var(--jh-blue-50), var(--jh-white) 62%); flex-wrap: wrap; }
.dh-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 11px; flex-shrink: 0; }
.dh-ring-cap { font-size: 12.5px; font-weight: 600; color: var(--jh-text-muted); }
.dh-ring { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
.dh-ring svg { transform: rotate(-90deg); }
.dh-ring .rt { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.dh-ring .rt .n { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 34px; color: var(--jh-navy-950); line-height: 1; }
.dh-complete-body { flex: 1; min-width: 220px; }
.dh-complete-body h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; color: var(--jh-navy-950); }
.dh-complete-body p { color: var(--jh-text-muted); font-size: 14px; margin-top: 6px; max-width: 380px; line-height: 1.5; }
.dh-unlock-row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.dh-unlock-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--jh-border); background: var(--jh-white); color: var(--jh-text-muted); }
.dh-unlock-chip.done { color: oklch(0.45 0.13 155); border-color: transparent; background: var(--jh-green-50); }
.dh-unlock-chip.locked { color: var(--jh-text-faint); }
.dh-unlock-chip svg { width: 14px; height: 14px; }

/* ---- Do this next ---- */
.dh-action-list { display: flex; flex-direction: column; gap: 10px; }
.dh-action-item { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--jh-border); border-radius: var(--jh-radius); transition: 0.16s; cursor: pointer; background: var(--jh-white); text-decoration: none; }
.dh-action-item:hover { border-color: var(--jh-blue-500); box-shadow: var(--jh-shadow-sm); transform: translateX(3px); }
.dh-action-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.dh-action-ico svg { width: 20px; height: 20px; }
.dh-action-body { flex: 1; min-width: 0; }
.dh-action-body .at { font-weight: 600; font-size: 14.5px; color: var(--jh-navy-950); }
.dh-action-body .ad { font-size: 12.5px; color: var(--jh-text-muted); margin-top: 1px; }
.dh-action-item .go { color: var(--jh-text-faint); flex-shrink: 0; }
.dh-action-item:hover .go { color: var(--jh-blue-600); }
.dh-action-item .go svg { width: 18px; height: 18px; }
.dh-action-plus { font-size: 11px; font-weight: 700; color: oklch(0.55 0.13 70); background: var(--jh-amber-100); padding: 3px 8px; border-radius: 999px; flex-shrink: 0; }

/* ---- Matched jobs ---- */
.dh-match-list { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.dh-match-card { display: flex; gap: 14px; align-items: center; padding: 15px; border: 1px solid var(--jh-border); border-radius: var(--jh-radius); transition: 0.16s; text-decoration: none; }
.dh-match-card:hover { border-color: var(--jh-border-strong); box-shadow: var(--jh-shadow-sm); }
.dh-match-logo { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; flex-shrink: 0; }
.dh-match-main { flex: 1; min-width: 0; }
.dh-match-main .r { font-weight: 600; font-size: 15px; color: var(--jh-navy-950); font-family: "Bricolage Grotesque", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-match-main .c { font-size: 13px; color: var(--jh-text-muted); margin-top: 1px; }
.dh-match-fit { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.dh-fit-pill { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--jh-green-50); color: oklch(0.42 0.13 155); font-family: "IBM Plex Mono", monospace; white-space: nowrap; }
.dh-fit-pill.mid { background: var(--jh-amber-100); color: oklch(0.5 0.1 70); }
.dh-fit-pill.fair { background: var(--jh-surface-2); color: var(--jh-text-muted); }
.dh-empty { text-align: center; padding: 26px 10px; color: var(--jh-text-muted); font-size: 13.5px; }
.dh-empty a { color: var(--jh-blue-700); font-weight: 600; text-decoration: none; }

/* ---- Toolkit ---- */
.dh-tool-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dh-tool-mini { padding: 16px; border: 1px solid var(--jh-border); border-radius: var(--jh-radius); cursor: pointer; transition: 0.16s; text-decoration: none; display: block; }
.dh-tool-mini:hover { border-color: var(--jh-blue-500); transform: translateY(-2px); box-shadow: var(--jh-shadow-sm); }
.dh-tool-mini .ti { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 12px; }
.dh-tool-mini .ti svg { width: 19px; height: 19px; }
.dh-tool-mini .tn { font-weight: 600; font-size: 14px; color: var(--jh-navy-950); }
.dh-tool-mini .td { font-size: 12px; color: var(--jh-text-muted); margin-top: 3px; line-height: 1.4; }

/* ---- Earn / become-a-provider ---- */
.dh-earn-become { background: linear-gradient(160deg, oklch(0.96 0.04 155), var(--jh-white) 65%); border-color: oklch(0.88 0.06 155); }
.dh-earn-become h3 { color: oklch(0.3 0.12 155); font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; }
.dh-earn-become p { font-size: 13.5px; color: oklch(0.4 0.08 155); margin: 8px 0 0; line-height: 1.5; }

/* ---- Earn / provider earnings ---- */
.dh-earn-card { padding: 22px; background: linear-gradient(158deg, var(--jh-amber-100), var(--jh-white) 72%); border-color: oklch(0.9 0.06 82); }
.dh-earn-top { display: flex; align-items: center; gap: 16px; }
.dh-earn-coins { width: 56px; height: 56px; flex-shrink: 0; }
.dh-earn-coins svg { width: 56px; height: 56px; filter: drop-shadow(0 5px 10px oklch(0.8 0.135 78 / 0.45)); }
.dh-earn-label { font-size: 11.5px; font-weight: 700; color: oklch(0.5 0.1 70); text-transform: uppercase; letter-spacing: 0.05em; }
.dh-earn-amount { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 28px; color: var(--jh-navy-950); line-height: 1.1; }
.dh-earn-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: oklch(0.45 0.13 155); margin-top: 3px; }
.dh-earn-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid oklch(0.9 0.05 82); }
.dh-earn-stats .es { text-align: center; }
.dh-earn-stats .esn { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px; color: var(--jh-navy-950); }
.dh-earn-stats .esl { font-size: 10.5px; color: var(--jh-text-muted); margin-top: 2px; }

/* ---- Recent activity ---- */
.dh-activity-list { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
.dh-activity-item { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; }
.dh-activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.dh-activity-dot.green { background: var(--jh-green-500); }
.dh-activity-dot.blue { background: var(--jh-blue-500); }
.dh-activity-dot.amber { background: var(--jh-amber-500); }
.dh-activity-item b { color: var(--jh-navy-950); }
.dh-activity-item .when { color: var(--jh-text-faint); }

/* ---- responsive ----
   Grid children default to min-width:auto, which lets long/large content force
   a track wider than its share and push the whole page past the viewport
   (this is what cut the stat boxes off at the right edge on mobile). Pin the
   grids' children to min-width:0 so they can shrink, and hard-stop any
   horizontal overflow at the container level. */
.dh-wrap { width: 100%; max-width: 1180px; overflow-x: hidden; }
.dh-stat-strip, .dh-grid, .dh-tool-mini-grid, .dh-earn-stats { min-width: 0; }
.dh-stat-box, .dh-grid > *, .dh-tool-mini, .dh-card { min-width: 0; }

@media (max-width: 1080px) {
  .dh-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 680px) {
  .dh-stat-strip { grid-template-columns: 1fr 1fr !important; }
  .dh-stat-box { padding: 14px; }
  .dh-stat-box .n { font-size: 22px; }
  .dh-grid { grid-template-columns: 1fr !important; }
  .dh-complete-card { flex-direction: column; text-align: center; padding: 22px; }
  .dh-complete-body p { margin-left: auto; margin-right: auto; }
  .dh-unlock-row { justify-content: center; }
  .dh-tool-mini-grid { grid-template-columns: 1fr 1fr !important; }
  .dh-earn-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .dh-card-pad { padding: 18px; }
}
@media (max-width: 400px) {
  .dh-stat-strip { grid-template-columns: 1fr !important; }
}