/**
 * Portal styles. Use with css/tasks/variables.css and base.css.
 * All values use design tokens (variables); no hardcoded colors or spacing.
 */

/* ---- Portal tokens (only where not in variables.css) ---- */
:root {
  --portal-overlay: rgba(0, 0, 0, 0.6);
  --success-rgb: 31, 122, 62;
}

/* ---- App access: save status contrast ---- */
.save-status.text-success {
  color: rgb(var(--success-rgb)) !important;
  font-weight: 600;
}
.save-status.text-danger {
  color: var(--danger, #dc3545) !important;
  font-weight: 600;
}

/* ---- Base ---- */
body.portal-page,
.portal-landing-body {
  background: var(--bg-gradient);
  color: var(--text-main);
  font-family: var(--font-family-base);
  margin: 0;
  min-height: 100vh;
}

/* ========== Landing: Header ========== */
.portal-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--card-border);
  background: var(--surface-1);
}

.portal-header-brand,
.portal-header .logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
}

.portal-header-brand {
  flex-wrap: wrap;
}

.portal-header-icon {
  color: var(--brand-primary);
  font-size: 1.1rem;
}

.portal-header-title {
  color: var(--brand-primary);
  font-weight: 600;
}

.portal-header-tagline {
  color: var(--brand-primary);
  font-size: var(--font-size-small);
  font-weight: 400;
  opacity: 0.9;
}

.portal-header .logo img {
  height: 36px;
  width: auto;
}

.portal-header nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.portal-header nav a {
  color: var(--link-color);
  text-decoration: none;
}

.portal-header nav a:hover {
  color: var(--link-hover);
}

.portal-header .btn {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-small);
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.portal-header .btn.portal-cta-btn {
  background: var(--brand-primary);
  color: var(--text-inverse);
}

.portal-header .btn.portal-cta-btn:hover {
  background: var(--brand-primary-hover);
}

.portal-header .btn.btn-info {
  background: var(--info);
  color: var(--text-inverse);
}

.portal-header .btn.btn-info:hover {
  background: var(--info-hover);
}

/* ========== Landing: Main content ========== */
.portal-landing-main {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-xl);
}

/* ========== Landing: Hero ========== */
.portal-hero {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}

.portal-hero h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 var(--spacing-md) 0;
  line-height: 1.3;
}

.portal-hero-logo,
.portal-hero .portal-hero-logo {
  width: 140px;
  max-width: 80%;
  display: block;
  margin: 0 auto var(--spacing-md);
}

.portal-hero p {
  font-size: var(--font-size-base);
  color: var(--text-muted);
  max-width: 32em;
  margin: 0 auto;
  line-height: 1.5;
}

/* ========== Landing: Our apps ========== */
.portal-landing-main .portal-apps-section {
  margin-bottom: var(--spacing-xl);
}

.portal-landing-main .portal-apps-section h2 {
  font-size: var(--font-size-lg);
  color: var(--text-strong);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.portal-apps-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.portal-app-card {
  width: 240px;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
}

.portal-app-card:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-4px);
}

.portal-app-card i {
  font-size: 2.25rem;
  margin-bottom: var(--spacing-md);
  color: var(--accent);
}

.portal-app-card strong {
  font-size: 1.15rem;
  color: var(--text-strong);
}

.portal-app-card .card-teaser {
  font-size: var(--font-size-small);
  color: var(--text-muted);
  margin-top: var(--spacing-sm);
  line-height: 1.4;
}

/* ========== Landing: CTA section ========== */
.portal-cta-section {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
}

.portal-cta-section.portal-cta-card {
  max-width: 640px;
  margin: 0 auto var(--spacing-xl);
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}

.portal-cta-section.portal-cta-section--tight {
  padding-top: 0;
}

.portal-cta-section h2 {
  font-size: var(--font-size-lg);
  color: var(--text-strong);
  margin-bottom: var(--spacing-md);
}

.portal-cta-section p {
  color: var(--text-muted);
  margin-bottom: var(--spacing-lg);
}

.portal-cta-section .btn {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: var(--brand-primary);
  color: var(--text-inverse);
}

.portal-cta-section .btn.portal-cta-btn:hover {
  background: var(--brand-primary-hover);
}

.portal-cta-section .btn.btn-info {
  margin-left: var(--spacing-md);
  background: var(--info);
  color: var(--text-inverse);
}

.portal-cta-section .btn.btn-info:hover {
  background: var(--info-hover);
}

.portal-cta-section .btn-secondary {
  background: var(--surface-2);
  color: var(--text-main);
  border: 1px solid var(--card-border);
  margin-left: var(--spacing-md);
}

.portal-cta-section .btn-secondary:hover {
  background: var(--surface-active);
}

/* ========== Modals ========== */
.portal-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--portal-overlay);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.portal-modal-overlay.is-open {
  display: flex;
}

.portal-modal {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
}

.portal-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) var(--spacing-lg);
  border-bottom: 1px solid var(--card-border);
}

.portal-modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-strong);
}

.portal-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--spacing-xs);
  font-size: 1.25rem;
  line-height: 1;
}

.portal-modal-close:hover {
  color: var(--text-strong);
}

.portal-modal-body {
  padding: var(--spacing-lg);
}

.portal-modal-intro {
  color: var(--text-muted);
  font-size: var(--font-size-small);
  margin-bottom: var(--spacing-md);
}

.portal-modal-body .app-detail-description {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.portal-modal-body .app-highlights {
  margin-top: var(--spacing-md);
}

.portal-modal-body .app-highlights-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  line-height: 1.6;
  font-size: var(--font-size-small);
}

.portal-modal-body .app-highlight-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.portal-modal-body .app-highlight-item i {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  color: var(--brand-primary);
  font-size: 1rem;
}

/* Modal form */
.portal-modal-body input[type="text"],
.portal-modal-body input[type="email"],
.portal-modal-body input[type="password"] {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-main);
  font-size: var(--font-size-base);
}

.portal-modal-body input::placeholder {
  color: var(--text-faint);
}

.portal-modal-body .form-group {
  margin-bottom: var(--spacing-md);
}

.portal-modal-body .form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

/* ========== Signup modal: wider, steps, minimal scroll ========== */
.portal-modal--signup.portal-modal {
  max-width: 42rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.portal-signup-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--card-border);
  background: var(--surface-1);
  flex-shrink: 0;
}

.portal-signup-step-dot {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.portal-signup-step-dot.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-inverse);
}

.portal-signup-step-line {
  width: 2.5rem;
  height: 2px;
  background: var(--card-border);
  flex-shrink: 0;
}

.portal-modal-body--signup {
  overflow-y: auto;
  max-height: calc(90vh - 8rem);
  padding: var(--spacing-lg);
  flex: 1 1 auto;
  min-height: 0;
}

.signup-step-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: space-between;
  margin-top: var(--spacing-lg);
  flex-wrap: wrap;
}

.signup-step-actions .btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  border: none;
  cursor: pointer;
}

.signup-step-actions .btn.btn-primary {
  background: var(--brand-primary);
  color: var(--text-inverse);
}

.signup-step-actions .btn.btn-primary:hover {
  background: var(--brand-primary-hover);
}

.signup-step-actions .btn.btn-secondary {
  background: var(--surface-2);
  color: var(--text-main);
  border: 1px solid var(--card-border);
}

.signup-step-actions .btn.btn-secondary:hover {
  background: var(--surface-1);
  border-color: var(--text-faint);
}

.portal-modal-body--signup .form-row {
  display: flex;
  gap: var(--spacing-md);
}

.portal-modal-body--signup .form-row--2 .form-group {
  flex: 1;
  min-width: 0;
}

.portal-label-optional {
  font-weight: 400;
  color: var(--text-faint);
}

/* ========== Stylized app selector (card-style options) ========== */
.portal-app-selector {
  margin: var(--spacing-lg) 0;
}

.portal-app-selector-title {
  display: block;
  color: var(--text-strong);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-md);
}

.portal-app-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.portal-app-option {
  flex: 1 1 0;
  min-width: 120px;
  cursor: pointer;
  margin: 0;
}

.portal-app-option-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.portal-app-option-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 5.5rem;
  padding: var(--spacing-md) var(--spacing-sm);
  border-radius: var(--radius-md);
  border: 2px solid var(--card-border);
  background: var(--surface-1);
  color: var(--text-main);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.portal-app-option-content i {
  font-size: 1.5rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-xs);
}

.portal-app-option-content strong {
  font-size: var(--font-size-base);
  color: var(--text-strong);
}

.portal-app-option-content small {
  font-size: var(--font-size-small);
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}

.portal-app-option:hover .portal-app-option-content {
  border-color: var(--text-faint);
  background: var(--surface-2);
}

.portal-app-option-input:focus + .portal-app-option-content {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.portal-app-option-input:checked + .portal-app-option-content {
  border-color: var(--brand-primary);
  background: var(--brand-primary-alpha);
  box-shadow: 0 0 0 1px var(--brand-primary);
}

.portal-app-option-input:checked + .portal-app-option-content i {
  color: var(--brand-primary);
}

.portal-modal-body .checkbox-group {
  margin: var(--spacing-md) 0;
}

.portal-modal-body .checkbox-group .checkbox-group-title {
  display: block;
  color: var(--text-strong);
  margin-bottom: var(--spacing-sm);
}

.portal-modal-body .checkbox-group label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  cursor: pointer;
}

.portal-modal-body .checkbox-group input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.portal-modal-body button[type="submit"] {
  width: 100%;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border: none;
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-base);
  cursor: pointer;
  margin-top: var(--spacing-sm);
}

.portal-modal-body button[type="submit"]:hover {
  background: var(--brand-primary-hover);
}

/* ========== Flash messages ========== */
.portal-landing-flashes {
  max-width: 42rem;
  margin: 0 auto var(--spacing-md) auto;
  padding: 0 var(--spacing-md);
}

.portal-flash,
.flash-msg {
  padding: var(--spacing-md) var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-small);
}

.portal-flash.info,
.flash-msg.info {
  background: var(--brand-primary-alpha);
  border: 1px solid var(--brand-primary);
}

.portal-flash.error,
.flash-msg.error {
  background: rgba(var(--error-rgb), 0.2);
  border: 1px solid var(--error);
}

.portal-form-error {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-small);
  color: var(--error);
}

.portal-form-error[hidden] {
  display: none;
}

.portal-flash.success,
.flash-msg.success {
  background: rgba(var(--success-rgb), 0.25);
  border: 1px solid var(--success);
}

/* ========== Footer ========== */
.portal-footer {
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-md);
  font-size: var(--font-size-small);
  color: var(--text-muted);
}

.portal-footer a {
  color: var(--link-color);
}

/* ========== Login / Signup (standalone pages) ========== */
.portal-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--card-border);
  background: var(--surface-1);
}

.portal-nav a {
  color: var(--link-color);
  text-decoration: none;
}

.portal-nav a:hover {
  color: var(--link-hover);
}

.portal-centre {
  max-width: 420px;
  margin: var(--spacing-xl) auto;
  padding: var(--spacing-lg);
}

.portal-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

.portal-card h1 {
  font-size: var(--font-size-lg);
  color: var(--text-strong);
  margin-bottom: var(--spacing-md);
}

.portal-card .portal-intro,
.portal-intro {
  font-size: var(--font-size-small);
  color: var(--text-muted);
  margin-bottom: var(--spacing-md);
}

.portal-card .form-group {
  margin-bottom: var(--spacing-md);
}

.portal-card .form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

.portal-card input {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-main);
  font-size: var(--font-size-base);
}

.portal-card input::placeholder {
  color: var(--text-faint);
}

.portal-card button[type="submit"] {
  width: 100%;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border: none;
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-base);
  cursor: pointer;
}

.portal-card button[type="submit"]:hover {
  background: var(--brand-primary-hover);
}

.portal-link {
  margin-top: var(--spacing-md);
  text-align: center;
}

.portal-link a {
  color: var(--link-color);
}

/* ---------- Login page: logo + card layout ---------- */
.portal-login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.portal-login-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--card-border);
  background: var(--surface-1);
}

.portal-login-header .portal-login-home {
  color: var(--link-color);
  text-decoration: none;
  font-size: var(--font-size-small);
}

.portal-login-header .portal-login-home:hover {
  color: var(--link-hover);
}

.portal-login-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-xl) var(--spacing-lg);
}

.portal-login-brand {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.portal-login-logo {
  width: 160px;
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto var(--spacing-sm);
}

.portal-login-tagline {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--text-muted);
}

.portal-login-page .portal-centre {
  margin-top: 0;
  width: 100%;
}

.portal-login-card {
  box-shadow: var(--shadow-md);
}

/* ========== Dashboard ========== */
.portal-dash-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--card-border);
  background: var(--surface-1);
}

.portal-dash-header .brand a {
  color: var(--text-strong);
  text-decoration: none;
}
.portal-dash-header .brand .portal-dash-welcome {
  color: var(--text-main);
  font-weight: 400;
}

.portal-dash-header .user {
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

.portal-dash-header .user a {
  color: var(--link-color);
  margin-left: var(--spacing-sm);
}

.portal-dash-header-form {
  display: inline;
}

/* Switcher dropdown: dark theme (no white background) */
.portal-dash-header-form .portal-switch-select,
.portal-dash-header-form #portal-switch-select,
select.portal-switch-select {
  background: var(--surface-2);
  color: var(--text-main);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-small);
}
.portal-dash-header-form .portal-switch-select option,
select.portal-switch-select option {
  background: var(--surface-2);
  color: var(--text-main);
}

.portal-dash-main {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
}

.portal-dash-main h2 {
  font-size: 1.2rem;
  color: var(--text-strong);
  margin-bottom: var(--spacing-md);
}

.portal-dash-intro {
  color: var(--text-muted);
  margin-bottom: var(--spacing-lg);
}

.portal-business-switcher {
  margin-bottom: var(--spacing-lg);
}

.portal-business-switcher label {
  color: var(--text-muted);
  font-size: var(--font-size-small);
  margin-right: var(--spacing-sm);
}

.portal-business-switcher select {
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-main);
}

/* Dashboard app grid (different from landing app cards) */
.portal-dash-main .portal-app-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: stretch;
}

.portal-dash-main .portal-app-card {
  flex: 0 0 160px;
  width: 160px;
  min-height: 120px;
  padding: var(--spacing-lg);
  text-align: center;
  text-decoration: none;
  color: var(--text-main);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  border: 1px solid var(--card-border);
}

.portal-dash-main .portal-app-card i {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
  display: block;
}

.portal-dash-main .portal-app-card span {
  font-weight: 600;
  color: var(--text-strong);
}

.portal-dash-main .portal-app-card.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Shared: section card + intro text with readable contrast */
.portal-apps-card,
.portal-team-card {
  background: var(--surface-2);
  border: 1px solid var(--card-border);
}
.portal-apps-card .card-body,
.portal-team-card .card-body {
  background: var(--surface-2);
  color: var(--text-main);
}

/* Apps card: main content (grid) + actions column on the right */
.portal-apps-card-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  align-items: flex-start;
}
.portal-apps-main {
  flex: 1 1 0;
  min-width: 0;
}
.portal-apps-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  min-width: 140px;
}
.portal-apps-actions .portal-add-apps-link-btn {
  text-align: center;
  white-space: nowrap;
}
.portal-team-card-header {
  background: var(--surface-3);
  border-bottom: 1px solid var(--card-border);
  color: var(--text-strong);
}
/* Intro text inside cards: use main text color for better contrast (not muted) */
.portal-card-intro {
  color: var(--text-main);
  font-size: var(--font-size-small);
}
/* Empty states (e.g. no inactive people): strong contrast on dark cards */
.portal-empty-state {
  color: var(--text-main);
  font-size: var(--font-size-base);
  margin: 0;
}
.portal-team-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}
.portal-team-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: var(--spacing-lg);
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  color: var(--text-main);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.portal-team-link-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 1px var(--brand-primary-alpha);
  color: var(--text-strong);
}
.portal-team-link-card i {
  font-size: 1.75rem;
  margin-bottom: var(--spacing-sm);
  color: var(--brand-primary);
}
.portal-team-link-card span {
  font-weight: 600;
  color: var(--text-strong);
}
.portal-team-link-card small {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}

/* Add apps page: available and coming soon */
.portal-add-apps-grid,
.portal-coming-soon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: stretch;
}
.portal-add-app-card,
.portal-coming-soon-card {
  flex: 0 0 160px;
  width: 160px;
  min-height: 140px;
  padding: var(--spacing-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  color: var(--text-main);
}
.portal-add-app-card i,
.portal-coming-soon-card i {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
  color: var(--brand-primary);
}
.portal-add-app-card span,
.portal-coming-soon-card span {
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: var(--spacing-sm);
}
.portal-add-app-form {
  margin-top: auto;
}
/* COGS card: wider so modules block fits; align content to start */
.portal-add-app-card--cogs {
  width: 200px;
  flex: 0 0 200px;
  min-height: 180px;
  justify-content: flex-start;
}
.portal-add-app-card--cogs .portal-add-app-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}
.portal-add-app-cogs-modules {
  width: 100%;
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-xs);
}
.portal-add-app-cogs-modules-title {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 var(--spacing-xs) 0;
}
.portal-add-app-cogs-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.portal-add-app-cogs-option {
  font-size: var(--font-size-small);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.portal-add-app-cogs-option input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--brand-primary);
}
.portal-add-app-cogs-modules-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: var(--spacing-xs) 0 0 0;
  line-height: 1.3;
}
.portal-add-app-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-primary);
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-small);
  cursor: pointer;
}
.portal-add-app-btn:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}
.portal-add-app-btn.is-loading {
  pointer-events: none;
  cursor: wait;
}
.portal-add-app-btn .portal-bouncing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
  vertical-align: middle;
}
.portal-add-app-btn .portal-bouncing-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--text-inverse);
  border-radius: 50%;
  animation: portal-bounce 0.5s ease-in-out infinite alternate;
}
.portal-add-app-btn .portal-bouncing-dots span:nth-child(2) { animation-delay: 0.1s; }
.portal-add-app-btn .portal-bouncing-dots span:nth-child(3) { animation-delay: 0.2s; }
/* Dashboard: "Add more apps" link styled as button */
.portal-add-apps-link-btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-primary);
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-small);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.portal-add-apps-link-btn:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--text-inverse);
}
.portal-add-apps-link-btn-secondary {
  background: transparent;
  color: var(--brand-primary);
}
.portal-add-apps-link-btn-secondary:hover {
  background: var(--brand-primary-alpha);
  color: var(--brand-primary);
}
.portal-coming-soon-card {
  opacity: 0.85;
}
.portal-coming-soon-badge {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: auto;
}
.portal-back-link {
  color: var(--link-color);
  text-decoration: none;
}
.portal-back-link:hover {
  color: var(--link-hover);
}

/* Portal team pages (View Team, Manage Team, Inactive Members): dark cards and forms */
.portal-page .card {
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  color: var(--text-main);
}
.portal-page .card-header {
  background: var(--surface-3);
  border-bottom: 1px solid var(--card-border);
  color: var(--text-strong);
}
.portal-page .card-body {
  background: var(--surface-2);
  color: var(--text-main);
}
/* Muted text in portal cards: use main text color for readable contrast in dark theme */
.portal-page .card-body .text-muted,
.portal-page .card-body p.text-muted {
  color: var(--text-main) !important;
}
.portal-page .form-control,
.portal-page .form-select {
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  color: var(--text-main);
}
.portal-page .form-control::placeholder {
  color: var(--text-muted);
}
.portal-page .form-control:focus,
.portal-page .form-select:focus {
  background: var(--surface-3);
  border-color: var(--brand-primary);
  color: var(--text-main);
}
.portal-page .form-label {
  color: var(--text-main);
}

/* Form hints on Manage Team: readable contrast (not muted) */
.portal-page .portal-form-hint,
.portal-page .form-text.portal-form-hint {
  color: var(--text-main);
  font-size: var(--font-size-small);
}

/* Roles multi-select: size to content, no inactive scrollbar */
.portal-page .form-select-roles[multiple] {
  overflow: visible;
  height: auto;
}
.portal-page .btn-primary,
.portal-page .portal-btn.btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-inverse);
}
.portal-page .btn-primary:hover,
.portal-page .portal-btn.btn-primary:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--text-inverse);
}
.portal-page .btn-outline-primary,
.portal-page .portal-btn-outline {
  background: transparent;
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
}
.portal-page .btn-outline-primary:hover,
.portal-page .portal-btn-outline:hover {
  background: var(--brand-primary-alpha);
  border-color: var(--brand-primary);
  color: var(--brand-primary-hover);
}
.portal-team-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}
.portal-page .btn-danger {
  background: var(--danger, #c23d3d);
  border-color: var(--danger, #c23d3d);
}

/* Billing: subscription app list — align Remove buttons regardless of app name length */
.portal-subscription-app-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.portal-subscription-app-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}
.portal-subscription-app-row:last-child {
  margin-bottom: 0;
}
.portal-subscription-app-name {
  min-width: 8rem;
  flex-shrink: 0;
}
.portal-subscription-app-form {
  flex-shrink: 0;
}
.portal-billing-remove-btn {
  background: var(--error) !important;
  border: 1px solid var(--error) !important;
  color: #fff;
  font-size: var(--font-size-small);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity 0.2s;
  min-width: 5rem;
}
.portal-billing-remove-btn:hover {
  opacity: 0.9;
  color: #fff;
  background: var(--error);
  border-color: var(--error);
}
.portal-billing-remove-btn.is-loading {
  pointer-events: none;
  cursor: wait;
}
.portal-billing-remove-btn .portal-bouncing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
  vertical-align: middle;
}
.portal-billing-remove-btn .portal-bouncing-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-radius: 50%;
  animation: portal-bounce 0.5s ease-in-out infinite alternate;
}
.portal-billing-remove-btn .portal-bouncing-dots span:nth-child(2) { animation-delay: 0.1s; }
.portal-billing-remove-btn .portal-bouncing-dots span:nth-child(3) { animation-delay: 0.2s; }
@keyframes portal-bounce {
  to { transform: translateY(-4px); }
}
.portal-page .border-secondary {
  border-color: var(--card-border) !important;
}

/* Inactive Members: card title (person name) uses brand primary */
#archived-list .card-title.text-strong {
  color: var(--brand-primary);
}

/* View Team page: outer card + person cards grid */
.portal-view-team-card {
  background: var(--surface-2) !important;
  border: 1px solid var(--card-border) !important;
}
.portal-view-team-card .card-body {
  background: var(--surface-2) !important;
}
.portal-crew-grid {
  margin-top: 0;
}
.portal-person-card {
  background: var(--surface-3) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-main);
}
.portal-person-card .card-body {
  background: var(--surface-3) !important;
  color: var(--text-main);
}
.portal-person-name {
  color: var(--brand-primary) !important;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--card-border);
}
.portal-person-details {
  color: var(--text-main);
  font-size: var(--font-size-small);
}
.portal-person-details li {
  margin-bottom: var(--spacing-xs);
}
.portal-person-details strong {
  color: var(--text-muted);
  font-weight: 500;
  margin-right: var(--spacing-xs);
}
.portal-back-link {
  color: var(--link-color);
  text-decoration: none;
}
.portal-back-link:hover {
  color: var(--link-hover);
}
.portal-page-title {
  color: var(--text-strong);
}

/* Tables (Support tickets, staff queues): respect theme surfaces — not Bootstrap .table-light */
.portal-page .table {
  --bs-table-color: var(--text-main);
  --bs-table-bg: var(--surface-2);
  --bs-table-border-color: var(--card-border);
  --bs-table-hover-bg: var(--surface-active);
  --bs-table-hover-color: var(--text-main);
  color: var(--text-main);
  border-color: var(--card-border);
  margin-bottom: 0;
}
.portal-page .table > :not(caption) > * > * {
  border-bottom-color: var(--card-border);
  box-shadow: none;
  color: var(--text-main);
  background-color: var(--surface-2);
}
.portal-page .table thead th,
.portal-page .table thead.table-light th {
  background-color: var(--surface-3) !important;
  color: var(--text-strong) !important;
  border-bottom-color: var(--card-border);
  font-weight: 600;
}
.portal-page .table tbody tr > * {
  background-color: var(--surface-2);
}
.portal-page .table.table-hover tbody tr:hover > * {
  background-color: var(--surface-active) !important;
  color: var(--text-main);
}
.portal-page .table a:not(.btn) {
  color: var(--link-color);
}
.portal-page .table a:not(.btn):hover {
  color: var(--link-hover);
}
/* Status chips in tables: avoid paper-white .bg-light on dark UI */
.portal-page .table .badge.bg-light.text-dark {
  background-color: var(--surface-4) !important;
  color: var(--text-strong) !important;
  border: 1px solid var(--card-border);
}

/* Alerts (e.g. workaround blocks): Bootstrap .alert-light is paper-white */
.portal-page .alert.alert-light {
  --bs-alert-bg: var(--surface-3);
  --bs-alert-border-color: var(--card-border);
  --bs-alert-color: var(--text-main);
  background-color: var(--surface-3) !important;
  border-color: var(--card-border) !important;
  color: var(--text-main) !important;
}
.portal-page .alert.alert-light strong {
  color: var(--text-strong);
}