/* ============================================================
   Supplier Onboarding Portal — supplier-portal.css
   Instil Bio | Power Pages Portal
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --sup-white:        #ffffff;
  --sup-gray-50:      #f9fafb;
  --sup-gray-100:     #f3f4f6;
  --sup-gray-200:     #e5e7eb;
  --sup-gray-300:     #d1d5db;
  --sup-gray-400:     #9ca3af;
  --sup-gray-500:     #6b7280;
  --sup-gray-600:     #4b5563;
  --sup-gray-700:     #374151;
  --sup-gray-800:     #1f2937;
  --sup-gray-900:     #111827;
  --sup-blue:         #0078d4;
  --sup-blue-dark:    #005a9e;
  --sup-blue-light:   #e6f1fb;
  --sup-green:        #107c10;
  --sup-green-light:  #eaf3de;
  --sup-green-border: #c0dd97;
  --sup-red:          #a4262c;
  --sup-red-light:    #fcebeb;
  --sup-orange:       #d83b01;
  --sup-orange-light: #fdf2ec;
  --sup-yellow-light: #faeeda;

  --color-text-primary:       var(--sup-gray-900);
  --color-text-secondary:     var(--sup-gray-500);
  --color-text-tertiary:      var(--sup-gray-400);
  --color-text-info:          var(--sup-blue);
  --color-background-primary: var(--sup-white);
  --color-background-secondary: var(--sup-gray-50);
  --color-border-primary:     var(--sup-gray-400);
  --color-border-secondary:   var(--sup-gray-300);
  --color-border-tertiary:    var(--sup-gray-200);

  --border-radius-sm:  4px;
  --border-radius-md:  8px;
  --border-radius-lg:  12px;
  --border-radius-xl:  16px;

  --font-mono: 'Courier New', Courier, monospace;

  --sup-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --sup-shadow-md: 0 4px 12px rgba(0,0,0,.10);
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sup-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--sup-gray-100);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Hide Power Pages default pot image ────────────────────── */
.pot {
  display: none !important;
}
.pot img {
  display: none !important;
}

/* ── Header ────────────────────────────────────────────────── */
.sup-header {
  background: var(--sup-white);
  border-bottom: 1px solid var(--color-border-tertiary);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--sup-shadow-sm);
}

.sup-header__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sup-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.sup-header__logo {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.sup-header__titles {
  display: flex;
  flex-direction: column;
}

.sup-header__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.sup-header__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sup-header__user {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.sup-header__entity { font-size: 12px; color: var(--color-text-secondary); font-weight: 400; line-height: 1.2; }
.sup-header__logo-fallback { align-items: center; }
.sup-header__entity-pill { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); background: var(--color-background-secondary); border: 1px solid var(--color-border-tertiary); border-radius: 6px; padding: 3px 10px; }
/* ── Progress Stepper ──────────────────────────────────────── */
.sup-stepper-wrap {
  background: var(--sup-white);
  border-bottom: 1px solid var(--color-border-tertiary);
}

.sup-stepper {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
}

.sup-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 70px;
}

.sup-step__circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sup-gray-200);
  color: var(--sup-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--sup-gray-300);
  transition: all .2s;
  flex-shrink: 0;
}

.sup-step--active .sup-step__circle {
  background: var(--sup-blue);
  color: var(--sup-white);
  border-color: var(--sup-blue);
}

.sup-step--done .sup-step__circle {
  background: var(--sup-green);
  color: var(--sup-white);
  border-color: var(--sup-green);
}

.sup-step__label {
  font-size: 11px;
  color: var(--sup-gray-700);
  text-align: center;
  white-space: nowrap;
  font-weight: 400;
}

.sup-step--active .sup-step__label {
  color: var(--sup-blue);
  font-weight: 600;
}

.sup-step--done .sup-step__label {
  color: var(--sup-green);
}

.sup-step__connector {
  flex: 1;
  height: 2px;
  background: var(--sup-gray-300);
  margin-top: 17px;
  margin-bottom: 22px;
}

.sup-step__connector--done {
  background: var(--sup-green);
}

/* ── Main & Card ───────────────────────────────────────────── */
.sup-main {
  flex: 1;
  padding: 32px 16px 48px;
}

.sup-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--sup-white);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--sup-shadow-md);
  overflow: hidden;
}

/* ── Section ───────────────────────────────────────────────── */
.sup-section {
  padding: 32px;
}

.sup-section__header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border-tertiary);
}

.sup-section__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.sup-section__sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.sup-section__ref {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 6px;
}

/* ── Subsection ────────────────────────────────────────────── */
.sup-subsection {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-tertiary);
}

.sup-subsection__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

/* ── Grid ──────────────────────────────────────────────────── */
.sup-grid {
  display: grid;
  gap: 16px;
}

.sup-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.sup-col-span-2 {
  grid-column: span 2;
}

/* ── Field Groups ──────────────────────────────────────────── */
.sup-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sup-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.sup-label--required::after {
  content: ' *';
  color: var(--sup-red);
}

.sup-field-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.sup-field-error {
  font-size: 12px;
  color: var(--sup-red);
  display: none;
}

/* ── Inputs ────────────────────────────────────────────────── */
.sup-input,
.sup-select,
.sup-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--sup-white);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  -webkit-appearance: none;
}

.sup-input:focus,
.sup-select:focus,
.sup-textarea:focus {
  border-color: var(--sup-blue);
  box-shadow: 0 0 0 3px rgba(0,120,212,.12);
}

.sup-input--error,
.sup-select--error {
  border-color: var(--sup-red);
}

.sup-input--error:focus {
  box-shadow: 0 0 0 3px rgba(164,38,44,.12);
}

.sup-textarea {
  resize: vertical;
  min-height: 80px;
}

.sup-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.sup-input-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 12px;
  color: var(--sup-blue);
  cursor: pointer;
  padding: 2px 6px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.sup-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--border-radius-md);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}

.sup-btn--primary {
  background: var(--sup-blue);
  color: var(--sup-white);
  border-color: var(--sup-blue);
}

.sup-btn--primary:hover {
  background: var(--sup-blue-dark);
  border-color: var(--sup-blue-dark);
}

.sup-btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-secondary);
}

.sup-btn--ghost:hover {
  background: var(--sup-gray-50);
  border-color: var(--color-border-primary);
}

.sup-btn--submit {
  background: var(--sup-green);
  color: var(--sup-white);
  border-color: var(--sup-green);
  padding: 12px 28px;
  font-size: 15px;
}

.sup-btn--submit:hover {
  background: #0a5e0a;
  border-color: #0a5e0a;
}

.sup-btn--sm {
  padding: 6px 14px;
  font-size: 13px;
}

.sup-btn--large {
  padding: 14px 32px;
  font-size: 16px;
}

.sup-btn__arrow {
  font-size: 16px;
}

.sup-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Nav Row ───────────────────────────────────────────────── */
.sup-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-tertiary);
  gap: 12px;
}

.sup-nav-row__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Badge ─────────────────────────────────────────────────── */
.sup-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}

.sup-badge--secure {
  background: var(--sup-green-light);
  color: var(--sup-green);
  border: 1px solid var(--sup-green-border);
}

.sup-required-badge {
  display: inline-block;
  background: var(--sup-red-light);
  color: var(--sup-red);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.sup-optional-badge {
  display: inline-block;
  background: var(--sup-gray-100);
  color: var(--sup-gray-500);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── Alerts ────────────────────────────────────────────────── */
.sup-alert {
  padding: 12px 16px;
  border-radius: var(--border-radius-md);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

.sup-alert--error {
  background: var(--sup-red-light);
  color: var(--sup-red);
  border-color: #f5c2c4;
}

.sup-alert--warning {
  background: var(--sup-yellow-light);
  color: #633806;
  border-color: #f0d5a8;
}

.sup-alert--info {
  background: var(--sup-blue-light);
  color: #0c447c;
  border-color: #b3d4f0;
}

.sup-alert--success {
  background: var(--sup-green-light);
  color: #27500a;
  border-color: var(--sup-green-border);
}

.sup-alert a {
  color: inherit;
  font-weight: 500;
}

/* ── Country Cards ─────────────────────────────────────────── */
.sup-country-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.sup-country-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 2px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all .15s;
  background: var(--sup-white);
  text-align: center;
}

.sup-country-card input[type="radio"] {
  display: none;
}

.sup-country-card:hover {
  border-color: var(--sup-blue);
  background: var(--sup-blue-light);
}

.sup-country-card--selected {
  border-color: var(--sup-blue);
  background: var(--sup-blue-light);
}

.sup-country-card__flag {
  font-size: 24px;
  line-height: 1;
}

.sup-country-card__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.sup-country-card__cur {
  font-size: 11px;
  color: var(--color-text-secondary);
}

/* ── Contact Cards ─────────────────────────────────────────── */
.sup-contact-card {
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  background: var(--sup-gray-50);
}

.sup-contact-card__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.sup-contact-card__icon {
  font-size: 20px;
  flex-shrink: 0;
}

.sup-contact-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.sup-contact-card__desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ── Payment Pills ─────────────────────────────────────────── */
.sup-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.sup-pill {
  padding: 7px 14px;
  border: 1px solid var(--color-border-secondary);
  border-radius: 20px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  background: var(--sup-white);
  color: var(--color-text-primary);
  transition: all .15s;
}

.sup-pill:hover {
  border-color: var(--sup-blue);
  color: var(--sup-blue);
}

.sup-pill--active {
  background: var(--sup-blue);
  border-color: var(--sup-blue);
  color: var(--sup-white);
}

/* ── Document Rows ─────────────────────────────────────────── */
.sup-doc-section {
  margin-bottom: 24px;
}

.sup-doc-section__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-tertiary);
}

.sup-doc-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  margin-bottom: 8px;
  background: var(--sup-white);
  transition: border-color .15s;
}

.sup-doc-row--error {
  border-color: var(--sup-red);
  background: var(--sup-red-light);
}

.sup-doc-row--uploaded {
  background: var(--sup-green-light);
  border-color: var(--sup-green-border);
}

.sup-doc-row__info {
  flex: 1;
}

.sup-doc-row__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.sup-doc-row__desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.sup-doc-row__desc a {
  color: var(--sup-blue);
  text-decoration: none;
}

.sup-doc-row__upload {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sup-doc-status {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.sup-doc-status--ready {
  color: var(--sup-green);
  font-weight: 500;
}

.sup-doc-status--done {
  color: var(--sup-green);
  font-weight: 500;
}

/* ── Agreements ────────────────────────────────────────────── */
.sup-subsection--agreement {
  background: var(--sup-gray-50);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  border: 1px solid var(--color-border-tertiary);
}

.sup-agreement-item {
  margin-bottom: 16px;
}

.sup-agreement-item:last-child {
  margin-bottom: 0;
}

.sup-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.sup-checkbox-label--inline {
  align-items: center;
}

.sup-checkbox-custom {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border-secondary);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type="checkbox"]:checked + .sup-checkbox-custom {
  background: var(--sup-blue);
  border-color: var(--sup-blue);
}

input[type="checkbox"]:checked + .sup-checkbox-custom::after {
  content: '✓';
  color: white;
  font-size: 11px;
  font-weight: 700;
}

input[type="checkbox"] {
  display: none;
}

/* ── Same-as-primary ───────────────────────────────────────── */
.sup-same-as-primary {
  margin-bottom: 14px;
}

/* ── Review Cards ──────────────────────────────────────────── */
.sup-review-card {
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
}

.sup-review-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--sup-gray-50);
  border-bottom: 1px solid var(--color-border-tertiary);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.sup-review-card__edit {
  font-size: 13px;
  font-weight: 400;
  color: var(--sup-blue);
  text-decoration: none;
}

.sup-review-card__edit:hover {
  text-decoration: underline;
}

.sup-review-grid {
  padding: 16px 20px;
}

.sup-review-row {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-tertiary);
  font-size: 13px;
}

.sup-review-row:last-child {
  border-bottom: none;
}

.sup-review-row--section-header {
  padding-top: 12px;
  padding-bottom: 4px;
  border-bottom: none;
}

.sup-review-label {
  width: 140px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  padding-top: 1px;
}

.sup-review-label--section {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 13px;
  width: auto;
}

.sup-review-value {
  flex: 1;
  color: var(--color-text-primary);
  word-break: break-word;
}

.sup-review-value--warn {
  color: var(--sup-orange);
}

.sup-review-value--doc {
  color: var(--sup-green);
}

/* ── Certification Box ─────────────────────────────────────── */
.sup-certification-box {
  background: var(--sup-gray-50);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
}

.sup-certification-box__title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--color-text-primary);
}

.sup-certification-box p {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.sup-certification-box ul {
  list-style: disc;
  padding-left: 20px;
}

.sup-certification-box li {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
  line-height: 1.5;
}

/* ── Status Badges ─────────────────────────────────────────── */
.sup-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.sup-status--draft     { background: #f1efe8; color: #444441; }
.sup-status--submitted { background: var(--sup-blue-light); color: #0c447c; }
.sup-status--review    { background: var(--sup-yellow-light); color: #633806; }
.sup-status--approved  { background: var(--sup-green-light); color: #27500a; }
.sup-status--rejected  { background: var(--sup-red-light); color: #791f1f; }
.sup-status--onhold    { background: var(--sup-yellow-light); color: #633806; }
.sup-status--default   { background: #f1efe8; color: #444441; }

/* ── Dashboard ─────────────────────────────────────────────── */
.sup-dashboard__welcome { text-align:center; padding:60px 20px; }
.sup-dashboard__welcome-icon { font-size:48px; margin-bottom:16px; }
.sup-dashboard__welcome-title { font-size:24px; font-weight:500; margin-bottom:8px; color:var(--color-text-primary); }
.sup-dashboard__welcome-sub { color:var(--color-text-secondary); margin-bottom:32px; max-width:480px; margin-left:auto; margin-right:auto; }

.sup-dashboard__header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.sup-dashboard__app-number { font-size:13px; color:var(--color-text-secondary); font-family:var(--font-mono); margin-bottom:4px; }
.sup-dashboard__company-name { font-size:22px; font-weight:500; color:var(--color-text-primary); }

.sup-dashboard__approved-banner { display:flex; align-items:flex-start; gap:16px; background:var(--sup-green-light); border:1px solid var(--sup-green-border); border-radius:12px; padding:20px 24px; margin-bottom:24px; }
.sup-dashboard__approved-icon { font-size:32px; flex-shrink:0; }
.sup-dashboard__approved-title { font-size:16px; font-weight:500; color:#27500a; margin-bottom:4px; }
.sup-dashboard__vendor-id { font-size:20px; font-weight:500; color:#173404; margin-bottom:4px; }
.sup-dashboard__approved-date { font-size:13px; color:#3b6d11; }

.sup-dashboard__timeline { background:var(--color-background-secondary); border-radius:12px; padding:24px; margin-bottom:24px; }
.sup-dashboard__timeline-title { font-size:16px; font-weight:500; margin-bottom:4px; color:var(--color-text-primary); }
.sup-dashboard__timeline-date { font-size:13px; color:var(--color-text-secondary); margin-bottom:20px; }
.sup-dashboard__timeline-steps { display:flex; gap:0; align-items:flex-start; }
.sup-dashboard__timeline-step { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; }
.sup-dashboard__timeline-step:not(:last-child)::after { content:''; position:absolute; top:16px; left:50%; width:100%; height:2px; background:var(--color-border-tertiary); z-index:0; }
.sup-dashboard__timeline-step--done::after { background:#639922; }
.sup-dashboard__timeline-step-dot { width:32px; height:32px; border-radius:50%; background:var(--color-background-primary); border:2px solid var(--color-border-secondary); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; color:var(--color-text-secondary); margin-bottom:8px; position:relative; z-index:1; }
.sup-dashboard__timeline-step--done .sup-dashboard__timeline-step-dot { background:#639922; border-color:#639922; color:#fff; }
.sup-dashboard__timeline-step--active .sup-dashboard__timeline-step-dot { background:#185fa5; border-color:#185fa5; color:#fff; }
.sup-dashboard__timeline-step-label { font-size:12px; font-weight:500; color:var(--color-text-primary); }
.sup-dashboard__timeline-step-sub { font-size:11px; color:var(--color-text-secondary); margin-top:2px; }

.sup-dashboard__checklist { margin-bottom:24px; }
.sup-dashboard__checklist-title { font-size:16px; font-weight:500; margin-bottom:4px; color:var(--color-text-primary); }
.sup-dashboard__checklist-sub { font-size:13px; color:var(--color-text-secondary); margin-bottom:16px; }
.sup-dashboard__checklist-items { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.sup-dashboard__checklist-item { display:flex; align-items:center; gap:16px; padding:16px 20px; background:var(--color-background-secondary); border:1px solid var(--color-border-tertiary); border-radius:10px; text-decoration:none; color:var(--color-text-primary); transition:border-color .15s, box-shadow .15s; }
.sup-dashboard__checklist-item:hover { border-color:var(--color-border-primary); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.sup-dashboard__checklist-item--done { border-color:#c0dd97; background:#f4f9ee; }
.sup-dashboard__checklist-item--submit { border-color:var(--color-border-secondary); border-style:dashed; }
.sup-dashboard__checklist-item-icon { font-size:20px; flex-shrink:0; width:28px; text-align:center; }
.sup-dashboard__checklist-item-body { flex:1; }
.sup-dashboard__checklist-item-title { font-size:14px; font-weight:500; margin-bottom:2px; }
.sup-dashboard__checklist-item-sub { font-size:12px; color:var(--color-text-secondary); }
.sup-dashboard__checklist-item-arrow { color:var(--color-text-tertiary); font-size:16px; }
.sup-dashboard__submit-prompt { text-align:center; padding:20px; background:var(--sup-green-light); border-radius:10px; }
.sup-dashboard__submit-prompt p { margin-bottom:12px; color:#27500a; font-weight:500; }

.sup-dashboard__summary { background:var(--color-background-secondary); border-radius:12px; padding:20px 24px; margin-bottom:20px; }
.sup-dashboard__summary-title { font-size:14px; font-weight:500; color:var(--color-text-secondary); margin-bottom:16px; text-transform:uppercase; letter-spacing:.04em; }
.sup-dashboard__summary-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:16px; }
.sup-dashboard__summary-label { font-size:11px; color:var(--color-text-tertiary); margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; }
.sup-dashboard__summary-value { font-size:14px; font-weight:500; color:var(--color-text-primary); }

.sup-dashboard__actions { display:flex; gap:12px; flex-wrap:wrap; }

/* ── Sign-in Page ──────────────────────────────────────────── */
.sup-signin-section {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.sup-signin-wrap {
  width: 100%;
  max-width: 480px;
}

.sup-signin-header { text-align: center; margin-bottom: 32px; }
.sup-signin-logo { margin-bottom: 16px; height: 48px; display: flex; align-items: center; justify-content: center; }
.sup-signin-logo img { max-height: 48px; max-width: 180px; object-fit: contain; }
.sup-signin-title { font-size: 24px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 8px; }
.sup-signin-sub { font-size: 14px; color: var(--color-text-secondary); max-width: 360px; margin: 0 auto; line-height: 1.5; }

.sup-signin-card { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 28px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }

.sup-signin-provider { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-secondary); background: var(--color-background-secondary); text-decoration: none; color: var(--color-text-primary); transition: border-color .15s, box-shadow .15s, background .15s; width: 100%; cursor: pointer; text-align: left; font-family: inherit; font-size: inherit; }
.sup-signin-provider:hover { border-color: var(--color-border-primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); background: var(--color-background-primary); }
.sup-signin-provider--microsoft:hover { border-color: #0078d4; }
.sup-signin-provider--google:hover { border-color: #4285f4; }
.sup-signin-provider__icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.sup-signin-provider__label { font-size: 14px; font-weight: 500; flex: 1; }
.sup-signin-provider__sub { font-size: 11px; color: var(--color-text-secondary); text-align: right; max-width: 160px; line-height: 1.3; }

.sup-signin-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--color-text-tertiary); font-size: 12px; }
.sup-signin-divider::before, .sup-signin-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border-tertiary); }

.sup-signin-notice { display: flex; gap: 12px; background: var(--color-background-secondary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 16px; margin-bottom: 16px; }
.sup-signin-notice__icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.sup-signin-notice__body { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }
.sup-signin-notice__body strong { display: block; color: var(--color-text-primary); font-weight: 500; margin-bottom: 4px; }
.sup-signin-notice__body p { margin-bottom: 8px; }
.sup-signin-notice__link { color: var(--color-text-info); text-decoration: none; font-weight: 500; }
.sup-signin-notice__link:hover { text-decoration: underline; }

/* ── Redeem / Register Page ────────────────────────────────── */
.sup-register-section { min-height: 75vh; display: flex; align-items: center; justify-content: center; padding: 48px 16px; }
.sup-register-wrap { width: 100%; max-width: 480px; }
.sup-register-header { text-align: center; margin-bottom: 24px; }
.sup-register-logo { height: 52px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.sup-register-logo img { max-height: 52px; max-width: 200px; object-fit: contain; }
.sup-register-title { font-size: 22px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 6px; }
.sup-register-sub { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; }

.sup-register-invite-banner { display: flex; align-items: center; gap: 12px; background: var(--sup-green-light); border: 1px solid var(--sup-green-border); border-radius: var(--border-radius-md); padding: 12px 16px; margin-bottom: 12px; font-size: 13px; color: #27500a; }
.sup-register-invite-banner__icon { font-size: 18px; flex-shrink: 0; }
.sup-register-invite-banner__body { display: flex; flex-direction: column; gap: 2px; }
.sup-register-invite-banner__body strong { font-weight: 500; }

.sup-register-card { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 24px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.sup-register-card--error { text-align: center; padding: 36px 24px; }
.sup-register-card__icon { font-size: 36px; margin-bottom: 12px; }
.sup-register-card__title { font-size: 18px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 12px; }
.sup-register-card__body { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 8px; }
.sup-register-card__heading { font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }

.sup-register-provider { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-secondary); background: var(--color-background-secondary); color: var(--color-text-primary); transition: border-color .15s, box-shadow .15s, background .15s; width: 100%; cursor: pointer; text-align: left; font-family: inherit; font-size: inherit; text-decoration: none; }
.sup-register-provider:hover { background: var(--color-background-primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.sup-register-provider--microsoft:hover { border-color: #0078d4; }
.sup-register-provider--google:hover { border-color: #4285f4; }
.sup-register-provider__icon { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.sup-register-provider__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sup-register-provider__label { font-size: 14px; font-weight: 500; color: var(--color-text-primary); }
.sup-register-provider__sub { font-size: 11px; color: var(--color-text-secondary); }
.sup-register-provider__arrow { color: var(--color-text-tertiary); font-size: 16px; flex-shrink: 0; }

.sup-register-divider { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--color-text-tertiary); font-size: 11px; }
.sup-register-divider::before, .sup-register-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border-tertiary); }

.sup-register-steps { background: var(--color-background-secondary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 16px 20px; margin-bottom: 12px; }
.sup-register-steps__title { font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.sup-register-steps__list { display: flex; flex-direction: column; gap: 12px; }
.sup-register-steps__item { display: flex; align-items: flex-start; gap: 12px; }
.sup-register-steps__num { width: 24px; height: 24px; border-radius: 50%; background: var(--color-background-primary); border: 1px solid var(--color-border-secondary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); flex-shrink: 0; margin-top: 1px; }
.sup-register-steps__body { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }
.sup-register-steps__body strong { display: block; font-weight: 500; color: var(--color-text-primary); margin-bottom: 2px; }

.sup-register-footer { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--color-text-tertiary); padding-top: 4px; }
.sup-register-footer a { color: var(--color-text-tertiary); text-decoration: none; }
.sup-register-footer a:hover { color: var(--color-text-secondary); text-decoration: underline; }

.sup-timeline { display: flex; flex-direction: column; }
.sup-timeline__item { display: flex; gap: 16px; align-items: flex-start; }
.sup-timeline__col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.sup-timeline__dot {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-background-secondary);
  border: 2px solid var(--color-border-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 500;
  color: var(--color-text-secondary);
  position: relative; z-index: 1;
}
.sup-timeline__dot--done {
  background: #eaf3de; border-color: #639922; color: #27500a;
}
.sup-timeline__line {
  width: 2px; background: var(--color-border-tertiary);
  flex: 1; min-height: 32px; margin: 4px 0;
}
.sup-timeline__body { padding-top: 8px; padding-bottom: 24px; }
.sup-timeline__title { font-size: 14px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 4px; }
.sup-timeline__when { font-size: 12px; font-weight: 400; color: var(--color-text-secondary); }
.sup-timeline__desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }

.fin-doc-link {
  font-size: 12px;
  font-weight: 500;
  color: #185fa5;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid #b5d4f4;
  border-radius: 6px;
  background: #e6f1fb;
  white-space: nowrap;
}
.fin-doc-link:hover { background: #d0e8f8; }
.fin-doc-verified { font-size: 11px; color: #27500a; margin-left: 6px; }
.fin-doc-pending  { font-size: 11px; color: #633806; margin-left: 6px; }
.fin-doc-row--approved { border-color: #c0dd97; background: #f4f9ee; }
.fin-doc-row--rejected { border-color: #f7c1c1; background: #fdf4f4; }

/* ── Finance Doc Checkboxes ────────────────────────────────── */
.fin-doc-checks { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.fin-doc-check { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; user-select: none; padding: 3px 8px; border-radius: 6px; transition: background .15s; }
.fin-doc-check input[type="checkbox"] { display: inline-block; width: 14px; height: 14px; cursor: pointer; margin: 0; accent-color: #27500a; }
.fin-doc-check--approved { color: #27500a; }
.fin-doc-check--approved:has(input:checked) { background: #eaf3de; }
.fin-doc-check--rejected { color: #791f1f; }
.fin-doc-check--rejected:has(input:checked) { background: #fcebeb; }

/* ── Footer ────────────────────────────────────────────────── */
.sup-footer {
  background: var(--sup-white);
  border-top: 1px solid var(--color-border-tertiary);
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.sup-footer a {
  color: var(--sup-blue);
  text-decoration: none;
}

.sup-footer a:hover {
  text-decoration: underline;
}

.sup-footer__legal {
  margin-top: 4px;
  color: var(--color-text-tertiary);
}

/* ── Auto-save Toast ───────────────────────────────────────── */
.sup-autosave-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--sup-gray-800);
  color: var(--sup-white);
  padding: 10px 16px;
  border-radius: var(--border-radius-md);
  font-size: 13px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}

.sup-autosave-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sup-section { padding: 20px 16px; }
  .sup-grid--2 { grid-template-columns: 1fr; }
  .sup-col-span-2 { grid-column: span 1; }
  .sup-country-grid { grid-template-columns: repeat(2, 1fr); }
  .sup-nav-row { flex-direction: column; align-items: stretch; }
  .sup-nav-row__right { justify-content: flex-end; }
  .sup-stepper { padding: 12px 16px; }
  .sup-step { min-width: 50px; }
  .sup-step__label { font-size: 10px; }
  .sup-review-label { width: 100px; }
  .sup-header__inner { padding: 0 12px; }
  .sup-signin-provider__sub { display: none; }
  .sup-signin-card { padding: 20px 16px; }
  .sup-register-provider__sub { display: none; }
  .sup-register-card { padding: 18px 14px; }
  .sup-register-footer { flex-wrap: wrap; gap: 6px; }
  .sup-dashboard__timeline-steps { flex-direction: column; gap: 12px; }
  .sup-dashboard__timeline-step::after { display: none; }
  .sup-dashboard__timeline-step { flex-direction: row; text-align: left; align-items: center; gap: 12px; }
}

@media (max-width: 480px) {
  .sup-main { padding: 16px 8px 32px; }
  .sup-card { border-radius: var(--border-radius-md); }
  .sup-doc-row { flex-direction: column; align-items: flex-start; }
}