/* Trainee portal styles — extends ../css/style.css */

body { background: #f2f6f7; }

/* ---------- Auth ---------- */
.portal-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(18,179,198,.14), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(201,162,75,.12), transparent 60%),
    var(--navy);
}
.auth-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 42px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow);
}
.auth-card .logo { height: 44px; margin-bottom: 18px; }
.auth-card h2 { font-size: 23px; margin-bottom: 20px; }

.auth-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.auth-tab {
  background: none; border: none; font-family: inherit; font-size: 14.5px; font-weight: 700;
  color: var(--gray); padding: 10px 16px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.auth-tab.active { color: var(--navy); border-bottom-color: var(--teal); }
.auth-form .btn { margin-top: 16px; }
.auth-msg { font-size: 13.5px; font-weight: 600; margin-top: 12px; display: none; }
.auth-msg.show { display: block; }
.auth-msg.err { color: var(--danger); }
.auth-msg.ok { color: var(--ok); }

/* ---------- Pending ---------- */
#pending-view .auth-card { max-width: 480px; }
#pending-view .auth-card p { font-size: 14.5px; }

/* ---------- Welcome / misc ---------- */
#ov-welcome { font-size: 28px; }
.panel h3 { font-size: 19px; }
.doc-card { margin: 0; }

/* Visa status timeline pills */
.st-node .ico { width: 16px; height: 16px; }

/* Certificate celebration panel */
.cert-hero {
  background: var(--grad-brand); color: #fff; border-radius: var(--radius);
  padding: 36px; text-align: center; position: relative; overflow: hidden;
}
.cert-hero::after {
  content: "🎓"; position: absolute; right: 26px; top: 20px; font-size: 52px; opacity: .35;
}
.cert-hero .cert-no { font-family: var(--font-head); font-size: 26px; color: var(--gold); margin: 10px 0 4px; }
.cert-hero .cert-meta { color: #c9dcdf; font-size: 14px; margin-bottom: 18px; }

/* Referral hero */
.ref-code {
  font-family: var(--font-head); font-size: 34px; font-weight: 800; color: var(--navy);
  letter-spacing: 3px; background: var(--gold-soft); border: 2px dashed var(--gold);
  border-radius: 12px; padding: 18px; text-align: center; margin: 14px 0;
}

@media (max-width: 860px) {
  .auth-card { padding: 30px 24px; }
}