/* Dig Virtual WebChecker — every rule is scoped under .wc-app so nothing
   leaks into (or depends on) the main site's styles. Brand values copied
   from the main site: blue #005393, green #3fa67e, Poppins + Inter. */

.wc-app {
  --wc-blue: #005393;
  --wc-blue-dark: #003a63;
  --wc-blue-soft: #dcebf9;
  --wc-green: #3fa67e;
  --wc-green-dark: #1a6350;
  --wc-green-soft: #dcf3e7;
  --wc-amber: #b7791f;
  --wc-amber-soft: #fdf3dc;
  --wc-red: #c53030;
  --wc-red-soft: #fde2e2;
  --wc-text: #1f2937;
  --wc-muted: #6b7280;
  --wc-border: #e5e7eb;
  --wc-bg: #f3f6fa;
  --wc-card: #ffffff;
  --wc-radius: 12px;

  box-sizing: border-box;
  min-height: 100vh;
  background: var(--wc-bg);
  color: var(--wc-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
.wc-app *, .wc-app *::before, .wc-app *::after { box-sizing: inherit; }
.wc-app [hidden] { display: none !important; }

/* ---------- type ---------- */
.wc-app .wc-h1 { font-family: "Poppins", "Inter", sans-serif; font-size: 1.5rem; line-height: 1.25; margin: 0 0 .25rem; color: var(--wc-blue-dark); }
.wc-app .wc-h2 { font-family: "Poppins", "Inter", sans-serif; font-size: 1.1rem; margin: 1.25rem 0 .5rem; color: var(--wc-blue-dark); }
.wc-app .wc-h2:first-child { margin-top: 0; }
.wc-app .wc-muted { color: var(--wc-muted); }
.wc-app .wc-small { font-size: .85rem; }
.wc-app .wc-center { text-align: center; }
.wc-app p { margin: .25rem 0 .75rem; }

/* ---------- layout ---------- */
.wc-app .wc-main { max-width: 860px; margin: 0 auto; padding: 16px; }
.wc-app .wc-screen--narrow { max-width: 440px; margin: 0 auto; }
.wc-app .wc-card { background: var(--wc-card); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); padding: 16px; margin: 12px 0; }
.wc-app .wc-grid2 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 560px) { .wc-app .wc-grid2 { grid-template-columns: 1fr 1fr; } }

/* ---------- top bar ---------- */
.wc-app .wc-top { position: sticky; top: 0; z-index: 10; background: var(--wc-blue); color: #fff; padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.wc-app .wc-top__brand { display: flex; align-items: center; gap: 8px; }
.wc-app .wc-top__logo { height: 30px; width: auto; background: #fff; border-radius: 6px; padding: 2px; }
.wc-app .wc-top__title { font-family: "Poppins", sans-serif; font-weight: 700; }
.wc-app .wc-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.wc-app .wc-nav__btn { background: transparent; border: 0; color: #fff; font: inherit; font-size: .9rem; padding: 6px 10px; border-radius: 999px; cursor: pointer; text-decoration: none; }
.wc-app .wc-nav__btn:hover { background: rgba(255,255,255,.15); }
.wc-app .wc-nav__btn.is-active { background: #fff; color: var(--wc-blue); font-weight: 600; }

/* ---------- login ---------- */
.wc-app .wc-login__brand { text-align: center; margin-bottom: 12px; }
.wc-app .wc-login__logo { height: 56px; width: auto; }

/* ---------- forms ---------- */
.wc-app .wc-field { display: block; margin: 0 0 12px; }
.wc-app .wc-field > span { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 4px; }
.wc-app .wc-field em { font-style: normal; font-weight: 400; }
.wc-app input:not([type="radio"]):not([type="checkbox"]), .wc-app select, .wc-app textarea {
  width: 100%; font: inherit; color: inherit; background: #fff;
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 12px; min-height: 44px;
}
.wc-app textarea { min-height: 80px; resize: vertical; }
.wc-app input:focus, .wc-app select:focus, .wc-app textarea:focus { outline: 2px solid var(--wc-blue); outline-offset: 1px; border-color: var(--wc-blue); }
.wc-app .wc-q { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.wc-app .wc-q legend { font-size: .9rem; font-weight: 600; margin-bottom: 4px; padding: 0; width: 100%; }
.wc-app .wc-q label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cbd5e1; border-radius: 999px; padding: 8px 14px; cursor: pointer; min-height: 40px; }
.wc-app .wc-q label:has(input:checked) { border-color: var(--wc-blue); background: var(--wc-blue-soft); color: var(--wc-blue-dark); font-weight: 600; }
.wc-app .wc-q input { accent-color: var(--wc-blue); margin: 0; }
.wc-app .wc-error { color: var(--wc-red); background: var(--wc-red-soft); border-radius: 8px; padding: 8px 12px; font-size: .9rem; }

/* ---------- buttons ---------- */
.wc-app .wc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; font-size: .95rem; min-height: 44px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--wc-blue); background: #fff; color: var(--wc-blue); cursor: pointer; text-decoration: none; }
.wc-app .wc-btn:hover { background: var(--wc-blue-soft); }
.wc-app .wc-btn--primary { background: var(--wc-blue); color: #fff; }
.wc-app .wc-btn--primary:hover { background: var(--wc-blue-dark); }
.wc-app .wc-btn--ghost { border-color: var(--wc-border); color: var(--wc-text); }
.wc-app .wc-btn--wa { border-color: var(--wc-green); color: var(--wc-green-dark); }
.wc-app .wc-btn--small { min-height: 36px; padding: 6px 12px; font-size: .85rem; }
.wc-app .wc-btn--block { width: 100%; margin-top: 8px; }
.wc-app .wc-btn:disabled { opacity: .6; cursor: wait; }
.wc-app .wc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* ---------- banners / toast ---------- */
.wc-app .wc-banner { border-radius: 10px; padding: 10px 14px; margin: 12px 0; font-size: .9rem; }
.wc-app .wc-banner--warn { background: var(--wc-amber-soft); color: #7a4f0f; }
.wc-app .wc-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--wc-text); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: .9rem; z-index: 50; max-width: calc(100% - 32px); }

/* ---------- progress ---------- */
.wc-app .wc-spinner { width: 44px; height: 44px; margin: 8px auto 12px; border: 4px solid var(--wc-blue-soft); border-top-color: var(--wc-blue); border-radius: 50%; animation: wc-spin 1s linear infinite; }
@keyframes wc-spin { to { transform: rotate(360deg); } }
.wc-app .wc-steps { text-align: left; list-style: none; padding: 0; margin: 12px auto; max-width: 300px; }
.wc-app .wc-steps li { padding: 6px 0 6px 28px; position: relative; color: var(--wc-muted); }
.wc-app .wc-steps li::before { content: "○"; position: absolute; left: 4px; }
.wc-app .wc-steps li.is-active { color: var(--wc-blue-dark); font-weight: 600; }
.wc-app .wc-steps li.is-active::before { content: "◔"; color: var(--wc-blue); }
.wc-app .wc-steps li.is-done { color: var(--wc-green-dark); }
.wc-app .wc-steps li.is-done::before { content: "✓"; color: var(--wc-green); }

/* ---------- lists / candidates / history ---------- */
.wc-app .wc-list { display: grid; gap: 10px; margin: 12px 0; }
.wc-app .wc-item { background: var(--wc-card); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); padding: 14px; }
.wc-app button.wc-item { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.wc-app button.wc-item:hover { border-color: var(--wc-blue); }
.wc-app .wc-item__title { font-weight: 700; margin: 0 0 2px; }
.wc-app .wc-item__meta { color: var(--wc-muted); font-size: .88rem; }
.wc-app .wc-item__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.wc-app .wc-item__edit { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
@media (min-width: 560px) { .wc-app .wc-item__edit { grid-template-columns: 1fr 1fr; } .wc-app .wc-item__edit .wc-field--full { grid-column: 1 / -1; } }
.wc-app .wc-item__edit .wc-field { margin: 0; }
.wc-app .wc-pill { display: inline-block; font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.wc-app .wc-pill--Low { background: var(--wc-red-soft); color: var(--wc-red); }
.wc-app .wc-pill--Average { background: var(--wc-amber-soft); color: var(--wc-amber); }
.wc-app .wc-pill--Strong { background: var(--wc-green-soft); color: var(--wc-green-dark); }
.wc-app .wc-pill--status { background: var(--wc-blue-soft); color: var(--wc-blue-dark); font-weight: 600; }
.wc-app .wc-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding-bottom: 4px; }
.wc-app .wc-filters .wc-field:first-child { grid-column: 1 / -1; }
@media (min-width: 720px) { .wc-app .wc-filters { grid-template-columns: repeat(5, 1fr); } .wc-app .wc-filters .wc-field:first-child { grid-column: auto; } }

/* ---------- admin summary ---------- */
.wc-app .wc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.wc-app .wc-stat { background: var(--wc-bg); border-radius: 10px; padding: 10px; text-align: center; }
.wc-app .wc-stat b { display: block; font-family: "Poppins", sans-serif; font-size: 1.4rem; color: var(--wc-blue-dark); }
.wc-app .wc-stat span { font-size: .8rem; color: var(--wc-muted); }
.wc-app .wc-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.wc-app .wc-table th, .wc-app .wc-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--wc-border); }
.wc-app .wc-table th { color: var(--wc-muted); font-weight: 600; }
.wc-app .wc-table td:not(:first-child), .wc-app .wc-table th:not(:first-child) { text-align: right; }
.wc-app .wc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ---------- report ---------- */
.wc-app .wc-report { background: var(--wc-card); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); padding: 18px; }
.wc-app .wc-report__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 3px solid var(--wc-blue); padding-bottom: 12px; margin-bottom: 16px; }
.wc-app .wc-report__logo { height: 40px; width: auto; }
.wc-app .wc-report__biz { font-family: "Poppins", sans-serif; font-size: 1.3rem; margin: 0; color: var(--wc-blue-dark); }
.wc-app .wc-score { display: flex; align-items: center; gap: 16px; margin: 8px 0 16px; flex-wrap: wrap; }
.wc-app .wc-score__ring { --wc-pct: 0; --wc-col: var(--wc-red); width: 120px; height: 120px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: radial-gradient(closest-side, #fff 78%, transparent 79% 100%), conic-gradient(var(--wc-col) calc(var(--wc-pct) * 1%), #e5e7eb 0); }
.wc-app .wc-score__num { font-family: "Poppins", sans-serif; font-size: 2.2rem; font-weight: 700; line-height: 1; text-align: center; }
.wc-app .wc-score__num small { display: block; font-size: .8rem; color: var(--wc-muted); font-weight: 500; }
.wc-app .wc-score--Low .wc-score__ring { --wc-col: var(--wc-red); }
.wc-app .wc-score--Average .wc-score__ring { --wc-col: #d69e2e; }
.wc-app .wc-score--Strong .wc-score__ring { --wc-col: var(--wc-green); }
.wc-app .wc-score__band { font-family: "Poppins", sans-serif; font-size: 1.2rem; font-weight: 700; margin: 0; }
.wc-app .wc-score--Low .wc-score__band { color: var(--wc-red); }
.wc-app .wc-score--Average .wc-score__band { color: var(--wc-amber); }
.wc-app .wc-score--Strong .wc-score__band { color: var(--wc-green-dark); }
.wc-app .wc-fixes { counter-reset: wc-fix; list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.wc-app .wc-fixes li { counter-increment: wc-fix; position: relative; padding: 12px 12px 12px 48px; background: var(--wc-green-soft); border-radius: 10px; }
.wc-app .wc-fixes li::before { content: counter(wc-fix); position: absolute; left: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--wc-green); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
.wc-app .wc-fixes b { display: block; }
.wc-app .wc-area { border-top: 1px solid var(--wc-border); padding: 10px 0; break-inside: avoid; }
.wc-app .wc-area__head { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.wc-app .wc-bar { height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin: 6px 0; }
.wc-app .wc-bar > i { display: block; height: 100%; background: var(--wc-blue); border-radius: 999px; }
.wc-app .wc-checks { list-style: none; padding: 0; margin: 4px 0 0; font-size: .9rem; }
.wc-app .wc-checks li { padding: 2px 0 2px 26px; position: relative; }
.wc-app .wc-checks li::before { position: absolute; left: 0; }
.wc-app .wc-checks .is-yes::before { content: "✅"; }
.wc-app .wc-checks .is-no::before { content: "❌"; }
.wc-app .wc-checks .is-unknown::before { content: "➖"; }
.wc-app .wc-area__note { font-size: .85rem; color: var(--wc-muted); }
.wc-app .wc-area--not_checked .wc-area__head span:last-child,
.wc-app .wc-area--pending .wc-area__head span:last-child { color: var(--wc-amber); }
.wc-app .wc-report__foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--wc-border); font-size: .85rem; color: var(--wc-muted); }

/* ---------- print: only the report ---------- */
@media print {
  @page { margin: 14mm; }
  .wc-app { background: #fff; min-height: 0; }
  .wc-app .wc-noprint, .wc-app .wc-toast { display: none !important; }
  .wc-app .wc-main { padding: 0; max-width: none; }
  .wc-app .wc-report { border: 0; padding: 0; }
  .wc-app .wc-score__ring, .wc-app .wc-fixes li, .wc-app .wc-fixes li::before, .wc-app .wc-bar, .wc-app .wc-bar > i, .wc-app .wc-pill {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}