/* Field portal — extends portal.css; scoped to .page-field (does not affect .page-portal) */

.page-field {
  --portal-primary: #1e3c72;
  --portal-primary-light: #2a5298;
  --portal-text: #2c3e50;
  --portal-text-muted: #5a6570;
  --portal-bg: #f4f6f9;
  --portal-surface: #ffffff;
  --portal-border: rgba(30, 60, 114, 0.12);
  --portal-shadow: 0 2px 12px rgba(30, 60, 114, 0.08);
  --portal-radius: 8px;
  min-height: 100vh;
  background: var(--portal-bg);
  color: var(--portal-text);
}

/* --- Header (restore portal gradient + readable white-on-blue text) --- */

.page-field .field-header {
  border-bottom: 3px solid var(--wns-orange, #e87722);
  background: linear-gradient(135deg, var(--portal-primary) 0%, var(--portal-primary-light) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
}

.page-field .portal-brand-title {
  color: rgba(255, 255, 255, 0.92);
  opacity: 1;
}

.page-field .portal-company-name {
  color: #fff;
}

.page-field .portal-user-name {
  color: #fff;
  opacity: 1;
}

.page-field .portal-header .btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}

.page-field .portal-header .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.page-field .portal-nav-link {
  color: rgba(255, 255, 255, 0.9);
}

.page-field .portal-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.page-field .portal-nav-link.is-active {
  color: var(--portal-primary);
  background: #fff;
  font-weight: 600;
}

/* --- Main content readability --- */

.page-field .field-main {
  max-width: 960px;
  margin: 0 auto;
}

.page-field .portal-page-subtitle,
.page-field .portal-site-meta,
.page-field .portal-empty-desc,
.page-field .portal-live-meta {
  color: var(--portal-text-muted);
}

.page-field .portal-page-subtitle a {
  color: var(--portal-primary);
  font-weight: 500;
  text-decoration: none;
}

.page-field .portal-page-subtitle a:hover {
  text-decoration: underline;
}

.page-field .portal-empty-title {
  color: var(--portal-primary);
}

/* --- Filters, inputs, buttons in content area --- */

.page-field .portal-input {
  border: 1px solid rgba(30, 60, 114, 0.28);
  color: var(--portal-text);
  background: #fff;
}

.page-field .portal-input::placeholder {
  color: #6c757d;
}

.page-field .portal-input:focus {
  outline: none;
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 0.15rem rgba(30, 60, 114, 0.15);
}

.page-field .portal-training-filters .btn-secondary {
  background: #fff;
  border: 1px solid rgba(30, 60, 114, 0.28);
  color: var(--portal-primary);
  font-weight: 600;
}

.page-field .portal-training-filters .btn-secondary:hover {
  background: rgba(30, 60, 114, 0.06);
  border-color: var(--portal-primary);
}

/* --- Document cards & chips --- */

.page-field .portal-training-card {
  border-color: rgba(30, 60, 114, 0.22);
  background: var(--portal-surface);
}

.page-field .portal-training-card:hover {
  border-color: rgba(30, 60, 114, 0.42);
  box-shadow: var(--portal-shadow);
}

.page-field .portal-site-name {
  color: var(--portal-primary);
}

.page-field .portal-chip {
  background: rgba(30, 60, 114, 0.12);
  color: #1a3568;
  font-weight: 600;
}

.page-field .portal-empty {
  background: var(--portal-surface);
  border-color: rgba(30, 60, 114, 0.2);
}

/* --- Login / register --- */

.page-field-login {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--portal-primary) 0%, var(--portal-primary-light) 100%);
}

.page-field-login .field-header {
  background: transparent;
  box-shadow: none;
  border-bottom: none;
}

.page-field-login .portal-main {
  display: grid;
  place-items: center;
  padding-top: 0;
}

.page-field-login .portal-login-title {
  color: var(--portal-primary);
}

.page-field-login .portal-login-tagline {
  color: var(--portal-text-muted);
}

.page-field-login .portal-login-card label {
  color: var(--portal-text);
  font-weight: 500;
}

.page-field-login .portal-login-card .input {
  border-color: rgba(30, 60, 114, 0.28);
  color: var(--portal-text);
}

.page-field-login .portal-login-card .input::placeholder {
  color: #6c757d;
}

.page-field-login .portal-login-card .btn-primary {
  background: var(--portal-primary);
  border: 1px solid var(--portal-primary);
  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.25);
}

.page-field-login .portal-login-card .btn-primary:hover {
  background: var(--portal-primary-light);
  border-color: var(--portal-primary-light);
  filter: none;
  transform: none;
}

.page-field-login .register-invalid {
  color: var(--wns-danger, #dc3545);
  font-weight: 500;
}

.page-field-login .register-back .btn-secondary {
  background: #fff;
  border: 1px solid rgba(30, 60, 114, 0.28);
  color: var(--portal-primary);
}
