/**
 * VERGO Ltd - Platform Vibe Alignment
 * Apply to platform pages to match main site styling.
 */

:root {
  /* Legacy vars used in platform pages */
  --color-bg: var(--color-bg-primary);
  --color-bg-warm: var(--color-bg-secondary);
  --color-text: var(--color-text-primary);
  --primary-gold: var(--color-gold);
  --bg-dark: var(--color-bg-primary);
  --bg-card: var(--color-bg-white);
  --bg-hover: var(--color-bg-secondary);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --border-color: var(--color-border);
}

body.platform {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
}

body.platform header,
body.platform .header,
body.platform .admin-header {
  background: rgba(250, 248, 245, 0.98);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

body.platform nav a,
body.platform .header-nav a {
  color: var(--color-text-primary);
}

body.platform nav a:hover,
body.platform nav a.active,
body.platform .header-nav a:hover,
body.platform .header-nav a.active {
  color: var(--color-gold);
}

body.platform .menu-toggle span {
  background: var(--color-text-primary);
}

body.platform .page-header h1,
body.platform h1,
body.platform h2,
body.platform h3 {
  color: var(--color-text-primary);
}

body.platform .page-header h1,
body.platform .section-title {
  color: #1a1a1a;
}

body.platform .stat-number,
body.platform .role-price,
body.platform .job-role {
  color: var(--color-gold);
}

body.platform .subtitle,
body.platform .page-header p,
body.platform .user-info,
body.platform .application-meta,
body.platform .job-meta,
body.platform .detail-label,
body.platform .form-group label,
body.platform .filter-group label,
body.platform .auth-footer,
body.platform .resend-section p,
body.platform .stat-label {
  color: var(--color-text-muted);
}

body.platform .auth-box,
body.platform .stat-box,
body.platform .application-card,
body.platform .job-card,
body.platform .role-card,
body.platform .quote-card,
body.platform .included-banner,
body.platform .filters-bar,
body.platform .filters,
body.platform .table-container,
body.platform .modal,
body.platform .form-card,
body.platform .dashboard-card,
body.platform .user-bar,
body.platform .pending-banner {
  background: var(--color-bg-white);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

body.platform .included-banner {
  border-left-color: var(--color-gold);
}

body.platform input,
body.platform textarea,
body.platform select {
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

body.platform input:focus,
body.platform textarea:focus,
body.platform select:focus {
  border-color: var(--color-gold);
  outline: none;
}

body.platform .btn,
body.platform .btn-primary,
body.platform .submit-button,
body.platform .cta-button {
  background: var(--color-gold);
  color: var(--color-text-primary);
  border: 2px solid var(--color-gold);
  transition: all var(--transition-base);
}

body.platform .btn:hover,
body.platform .btn-primary:hover,
body.platform .submit-button:hover,
body.platform .cta-button:hover {
  background: var(--color-gold-hover);
  border-color: var(--color-gold-hover);
  box-shadow: var(--shadow-md);
}

body.platform .btn-secondary,
body.platform .btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  border: 2px solid var(--color-gold);
}

body.platform .btn-secondary:hover,
body.platform .btn-outline:hover {
  background: var(--color-gold-bg);
}

body.platform .btn-danger {
  color: var(--color-error);
  border: 2px solid var(--color-error);
  background: transparent;
}

body.platform .forgot-link,
body.platform .back-link,
body.platform .auth-footer a,
body.platform .btn-link,
body.platform .user-info strong,
body.platform .role-name span {
  color: var(--color-gold);
}

body.platform table {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}

body.platform th,
body.platform td {
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

body.platform tr:hover {
  background: var(--color-bg-secondary);
}

body.platform footer {
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}