/**
 * Client portal — midnight pro theme (index + backoffice palette).
 * Load after client-portal.css and ../assets/css/apex-theme.css.
 */
.portal-body {
  --portal-bg: var(--apex-canvas, #050a18);
  --portal-bg-2: var(--apex-navy-deep, #050a18);
  --portal-card: var(--apex-card, #101e3d);
  --portal-card-solid: var(--apex-card, #101e3d);
  --portal-border: var(--hp-border, rgba(76, 201, 240, 0.12));
  --portal-border-light: rgba(76, 201, 240, 0.08);
  --portal-accent: var(--apex-primary, #00aaff);
  --portal-accent-hover: var(--apex-accent, #4cc9f0);
  --portal-text: #ffffff;
  --portal-text-soft: rgba(255, 255, 255, 0.88);
  --portal-muted: var(--apex-gray-muted, #b0b8c3);
  --portal-muted-dim: rgba(176, 184, 195, 0.72);
  --portal-shadow: var(--hp-shadow-md, 0 16px 40px rgba(0, 0, 0, 0.35));
  --portal-surface-hover: rgba(76, 201, 240, 0.1);
}

.portal-body {
  background-color: var(--portal-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 170, 255, 0.08), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(76, 201, 240, 0.06), transparent 50%),
    linear-gradient(180deg, var(--apex-navy-deep, #050a18) 0%, var(--apex-navy, #0a1931) 100%);
  color: var(--portal-muted);
}

/* Typography — clear hierarchy */
.portal-body,
.portal-body p,
.portal-body li,
.portal-body td,
.portal-body label {
  color: var(--portal-muted);
}

.portal-body h1,
.portal-body h2,
.portal-body h3,
.portal-body h4,
.portal-body h5,
.portal-body h6,
.portal-main__title,
.portal-card__title,
.portal-section-title,
.portal-auth-card__title,
.portal-modal__title,
.portal-notif-modal__title,
.profile-edit-title {
  color: var(--portal-text) !important;
}

.portal-body strong,
.portal-body b,
.portal-sidebar__name,
.portal-summary-value,
.portal-notif-modal__subject,
.portal-card__title {
  color: var(--portal-text);
}

.portal-welcome,
.portal-card__desc,
.portal-auth-card__subtitle,
.portal-hint,
.portal-summary-label,
.portal-label,
.portal-auth-card__footer {
  color: var(--portal-muted) !important;
}

.portal-body .text-muted,
.portal-body .text-muted.small,
.portal-body small.text-muted {
  color: var(--portal-muted-dim) !important;
}

.portal-body .small:not(.text-muted) {
  color: var(--portal-muted);
}

/* Forms */
.portal-body .form-control,
.portal-body .form-select,
.portal-input,
.portal-select,
.profile-field__input,
.profile-field__select {
  background: rgba(12, 23, 48, 0.75) !important;
  color: var(--portal-text) !important;
  border: 1px solid var(--portal-border) !important;
  caret-color: var(--portal-accent);
}

.portal-body .form-control::placeholder,
.portal-input::placeholder {
  color: rgba(125, 211, 252, 0.65) !important;
  opacity: 1 !important;
}

.portal-body .form-control:focus,
.portal-body .form-select:focus,
.portal-input:focus,
.portal-select:focus,
.profile-field__input:focus,
.profile-field__select:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 170, 255, 0.2) !important;
  border-color: rgba(0, 170, 255, 0.65) !important;
}

.portal-body .form-select option {
  background: var(--portal-card);
  color: #fff;
}

.portal-checkbox {
  color: var(--portal-muted) !important;
}

/* Buttons */
.portal-body .btn-warning,
.portal-body .btn-primary,
.portal-btn-primary {
  background: var(--hp-btn-primary, linear-gradient(135deg, #00aaff 0%, #4cc9f0 100%)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--hp-btn-primary-shadow, 0 8px 24px rgba(0, 170, 255, 0.25));
}

.portal-body .btn-warning:hover:not(:disabled),
.portal-body .btn-primary:hover:not(:disabled),
.portal-btn-primary:hover:not(:disabled) {
  background: var(--hp-btn-primary-hover, linear-gradient(135deg, #0099e6 0%, #38b8e0 100%)) !important;
  color: #fff !important;
}

.portal-body .btn-outline-secondary,
.portal-body .btn-outline-primary,
.portal-body .btn-outline-light {
  border-color: rgba(76, 201, 240, 0.45) !important;
  color: var(--portal-accent) !important;
  background: transparent !important;
}

.portal-body .btn-outline-secondary:hover,
.portal-body .btn-outline-primary:hover,
.portal-body .btn-outline-light:hover {
  background: rgba(0, 170, 255, 0.12) !important;
  color: var(--portal-accent-hover) !important;
  border-color: rgba(76, 201, 240, 0.55) !important;
}

.portal-body .btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--portal-border) !important;
  color: var(--portal-text) !important;
}

.portal-body .btn-success {
  color: #fff !important;
}

/* Badges — readable on dark */
.portal-body .badge.bg-warning,
.portal-body .badge.bg-info {
  color: #0a1931 !important;
}

.portal-body .badge.bg-secondary {
  background: rgba(176, 184, 195, 0.25) !important;
  color: var(--portal-text) !important;
}

/* Sidebar */
.portal-sidebar {
  background: linear-gradient(180deg, var(--apex-card-top, #0c1730) 0%, var(--apex-navy-deep, #050a18) 100%);
  border-right: 1px solid var(--portal-border);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
}

.portal-sidebar__user {
  border-bottom-color: var(--portal-border);
}

.portal-sidebar__name {
  color: var(--portal-text);
}

.portal-sidebar__id {
  color: var(--portal-muted);
}

.portal-sidebar__nav-title {
  color: rgba(176, 184, 195, 0.85);
}

.portal-sidebar__link {
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 600;
}

.portal-sidebar__link:hover {
  color: #ffffff !important;
  background: var(--portal-surface-hover) !important;
  border-color: rgba(76, 201, 240, 0.2) !important;
}

.portal-sidebar__link.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--portal-accent), var(--portal-accent-hover)) !important;
  border-color: rgba(76, 201, 240, 0.45) !important;
  box-shadow: 0 10px 30px rgba(0, 170, 255, 0.2);
}

.portal-sidebar__link i,
.portal-sidebar__link:hover i,
.portal-sidebar__link.active i {
  color: rgba(255, 255, 255, 0.92) !important;
}

.portal-sidebar__toggle {
  color: rgba(255, 255, 255, 0.82);
}

.portal-sidebar__toggle:hover {
  background: var(--portal-surface-hover);
  color: #fff;
}

.portal-sidebar__sub {
  border-left-color: rgba(76, 201, 240, 0.35);
}

.portal-sidebar__sublink {
  color: rgba(255, 255, 255, 0.72) !important;
}

.portal-sidebar__sublink:hover {
  color: var(--portal-accent-hover) !important;
}

/* Header */
.portal-header,
.portal-topbar {
  background: rgba(10, 25, 49, 0.92);
  border-bottom: 1px solid var(--portal-border);
  backdrop-filter: blur(10px);
}

.portal-header__logo {
  color: var(--portal-text);
}

.portal-header__logo span {
  color: var(--portal-text);
}

.portal-header__nav-toggle {
  color: var(--portal-muted);
}

.portal-header__nav-toggle:hover {
  color: var(--portal-accent);
}

.portal-header__notif {
  color: var(--portal-muted);
}

.portal-header__notif:hover {
  color: var(--portal-accent);
  background: var(--portal-surface-hover);
}

.portal-header__user {
  color: var(--portal-muted);
}

.portal-header__user i {
  color: var(--portal-accent);
}

.portal-header__usermenu-dropdown {
  background: var(--portal-card);
  border: 1px solid var(--portal-border);
  box-shadow: var(--portal-shadow);
}

.portal-header__usermenu-item {
  color: var(--portal-muted);
}

.portal-header__usermenu-item:hover {
  background: var(--portal-surface-hover);
  color: var(--portal-text);
}

.portal-header__logout {
  color: var(--portal-muted);
  border-color: var(--portal-border);
  background: rgba(0, 0, 0, 0.2);
}

.portal-header__logout:hover {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.12);
}

/* Cards & panels */
.portal-card,
.portal-panel,
.portal-stat,
.portal-content-card,
.portal-dash-card,
.portal-auth-card,
.portal-login-card,
.portal-notif-modal,
.portal-modal,
.questionnaire-form .portal-card,
.profile-card,
.portal-invest-form .card {
  background: linear-gradient(180deg, var(--apex-card-top, #0c1730) 0%, var(--apex-card-bottom, #152a52) 100%) !important;
  border: 1px solid var(--portal-border) !important;
  box-shadow: var(--portal-shadow);
  color: var(--portal-muted);
}

.portal-card:hover {
  border-color: rgba(76, 201, 240, 0.28) !important;
  box-shadow: var(--portal-shadow);
}

.portal-card__title {
  color: var(--portal-text);
}

.portal-card__desc,
.portal-card__list,
.portal-invest-note {
  color: var(--portal-muted) !important;
}

.portal-auth-card__logo-text {
  color: var(--portal-accent);
}

.portal-notif-banner {
  background: rgba(0, 170, 255, 0.1);
  border-color: rgba(76, 201, 240, 0.35);
  color: var(--portal-text-soft);
}

/* Tables */
.portal-table th {
  background: rgba(0, 0, 0, 0.2);
  color: var(--portal-text);
  border-color: var(--portal-border-light);
}

.portal-table td {
  color: var(--portal-muted);
  border-color: var(--portal-border-light);
}

.portal-table tbody tr:hover {
  background: var(--portal-surface-hover);
}

.portal-dash .table.table-dark {
  --bs-table-bg: transparent;
  --bs-table-color: var(--portal-muted);
  --bs-table-striped-color: var(--portal-muted);
  --bs-table-hover-color: var(--portal-text);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: var(--portal-surface-hover);
  --bs-table-border-color: var(--portal-border-light);
  border-color: var(--portal-border-light);
}

.portal-dash .table.table-dark th {
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.portal-dash .table.table-dark td {
  color: var(--portal-muted) !important;
}

.portal-dash .table.table-dark td strong {
  color: var(--portal-text);
}

.portal-dash .table.table-dark a {
  color: var(--portal-accent);
  font-weight: 600;
}

.portal-dash .table.table-dark a:hover {
  color: var(--portal-accent-hover);
}

/* Links */
.portal-link,
.portal-btn-link {
  color: var(--portal-accent);
}

.portal-link:hover,
.portal-btn-link:hover {
  color: var(--portal-accent-hover);
}

/* Alerts */
.portal-alert-danger {
  background: rgba(248, 113, 113, 0.15);
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.35);
}

.portal-alert-success {
  background: rgba(74, 222, 128, 0.12);
  color: #bbf7d0;
  border-color: rgba(74, 222, 128, 0.35);
}

/* Modals */
.portal-notif-modal__item {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--portal-border);
}

.portal-notif-modal__date,
.portal-notif-modal__reason,
.portal-notif-modal__empty,
.portal-notif-modal__loading {
  color: var(--portal-muted-dim);
}

.portal-modal__close,
.portal-notif-modal__close {
  color: var(--portal-muted);
}

.portal-modal__close:hover,
.portal-notif-modal__close:hover {
  background: var(--portal-surface-hover);
  color: var(--portal-text);
}

/* Profile / edit profile */
.profile-card__heading,
.profile-field__label {
  color: var(--portal-muted) !important;
}

.profile-field__value {
  color: var(--portal-text) !important;
}

.profile-verification-label {
  color: var(--portal-text);
}

.profile-password-reqs {
  color: var(--portal-muted);
}

.portal-invest-summary {
  background: rgba(0, 0, 0, 0.2);
  color: var(--portal-muted);
}

.portal-datechip {
  background: rgba(12, 23, 48, 0.75);
  border-color: var(--portal-border);
  color: var(--portal-text-soft);
}

.portal-datechip:hover {
  border-color: rgba(0, 170, 255, 0.55);
  background: rgba(0, 170, 255, 0.1);
}

/* Bootstrap modal / dropdown */
.portal-body .modal-content {
  background: linear-gradient(180deg, var(--apex-card-top, #0c1730) 0%, var(--apex-card-bottom, #152a52) 100%);
  border: 1px solid var(--portal-border);
  color: var(--portal-text);
}

.portal-body .modal-header {
  border-bottom-color: var(--portal-border);
  color: var(--portal-text);
}

.portal-body .modal-footer {
  border-top-color: var(--portal-border);
}

.portal-body .dropdown-menu {
  background: var(--portal-card);
  border-color: var(--portal-border);
}

.portal-body .dropdown-item {
  color: var(--portal-muted);
}

.portal-body .dropdown-item:hover {
  background: var(--portal-surface-hover);
  color: var(--portal-text);
}

/* Scrollbars */
.portal-body,
.portal-body * {
  scrollbar-color: rgba(76, 201, 240, 0.35) rgba(0, 0, 0, 0.2);
}

.portal-body ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.portal-body ::-webkit-scrollbar-thumb {
  background: rgba(76, 201, 240, 0.35);
  border-color: var(--portal-bg);
}

.portal-body ::-webkit-scrollbar-thumb:hover {
  background: rgba(76, 201, 240, 0.55);
}

/* Icons in content */
.portal-body .portal-sidebar__link i.fas,
.portal-body .portal-sidebar__link i.far {
  color: inherit;
}

.portal-body i.fas,
.portal-body i.far,
.portal-body i.fab {
  color: var(--portal-muted);
}

.portal-body .btn-primary i,
.portal-body .btn-warning i,
.portal-body .portal-btn-primary i {
  color: #fff !important;
}

/* Pro polish: shape + display rhythm */
.portal-body {
  --portal-radius-sm: 10px;
  --portal-radius-md: 14px;
  --portal-radius-lg: 18px;
}

.portal-dash__content {
  padding: 1.75rem 1.75rem 2rem;
}

.portal-section-title {
  letter-spacing: 0.01em;
}

.portal-card,
.portal-panel,
.portal-stat,
.portal-content-card,
.portal-dash-card,
.profile-card,
.portal-invest-form .card {
  border-radius: var(--portal-radius-lg) !important;
  position: relative;
  overflow: hidden;
}

.portal-card::before,
.portal-panel::before,
.portal-stat::before,
.portal-content-card::before,
.portal-dash-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 35%);
}

.portal-card:hover,
.portal-panel:hover,
.portal-content-card:hover {
  transform: translateY(-1px);
  border-color: rgba(76, 201, 240, 0.34) !important;
}

.portal-summary {
  margin-bottom: 1.75rem;
}

.portal-summary-value {
  font-size: 1.45rem;
  line-height: 1.2;
}

.portal-sidebar {
  border-right: 1px solid rgba(76, 201, 240, 0.2);
}

.portal-sidebar__user {
  padding: 1.4rem 1.25rem 1.2rem;
}

.portal-sidebar__name {
  font-size: 1.02rem;
}

.portal-sidebar__link,
.portal-sidebar__toggle {
  border-radius: var(--portal-radius-md);
}

.portal-sidebar__sublink {
  border-radius: var(--portal-radius-sm);
}

.portal-header {
  min-height: 68px;
  padding: 0.95rem 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
}

.portal-header__logo img {
  width: 38px;
  height: 38px;
}

.portal-header__notif {
  width: 42px;
  height: 42px;
  border: 1px solid transparent;
}

.portal-header__notif:hover {
  border-color: rgba(76, 201, 240, 0.35);
}

.portal-auth-card,
.portal-login-card,
.portal-modal,
.portal-notif-modal {
  border-radius: var(--portal-radius-lg) !important;
}

.portal-auth-card {
  max-width: 500px;
  padding: 2.15rem;
}

.portal-btn,
.portal-body .btn {
  border-radius: 11px !important;
  font-weight: 650;
}

.portal-body .btn-sm,
.portal-btn-sm {
  border-radius: 9px !important;
}

.portal-body .form-control,
.portal-body .form-select,
.portal-input,
.portal-select {
  border-radius: 11px !important;
  min-height: 42px;
}

.portal-dash .table.table-dark {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden;
}

.portal-dash .table.table-dark thead th {
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(76, 201, 240, 0.2);
  padding-top: 0.78rem;
  padding-bottom: 0.78rem;
}

.portal-dash .table.table-dark tbody td {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.portal-dash .table.table-dark tbody tr {
  transition: background-color 0.18s ease;
}

.portal-alert {
  border-radius: 12px;
}

@media (max-width: 991px) {
  .portal-dash__content {
    padding: 1.1rem 1rem 1.4rem;
  }

  .portal-header {
    min-height: 62px;
    padding: 0.8rem 1rem;
  }
}