/* PAMM Ratings / Widgets branding — TradeQuo / Social Trading AI
   This portal uses --ta-* variables (NOT --pm-*). Verified live. */
:root {
  --ta-light-header-logo-path: url("./assets/images/logo-page.png");
  --ta-dark-header-logo-path:  url("./assets/images/logo-page-dark.png");
  --ta-light-page-logo-path:   url("./assets/images/logo-page.png");
  --ta-dark-page-logo-path:    url("./assets/images/logo-page-dark.png");
  --ta-light-loader-logo-path: url("./assets/images/loader.svg");
  --ta-dark-loader-logo-path:  url("./assets/images/loader-dark.svg");

  --ta-page-logo-width:    180px;
  --ta-page-logo-height:   auto;
  --ta-header-logo-width:  auto;
  --ta-header-logo-height: 44px;

  --ta-light-primary-color:    #671cf6;
  --ta-light-secondary-color:  #2a128c;
  --ta-light-warn-color:       #efa210;
  --ta-light-background-color: #f9fafb;

  --ta-dark-primary-color:    #671cf6;
  --ta-dark-secondary-color:  #a68bfa;
  --ta-dark-warn-color:       #efa210;
  --ta-dark-background-color: #0e0e10;

  --ta-light-success-message-color: #11a75c;
  --ta-dark-success-message-color:  #11a75c;
  --ta-light-error-message-color:   #f94e4e;
  --ta-dark-error-message-color:    #f94e4e;

  --ta-light-charts-color-1 : #671cf6;
  --ta-light-charts-color-2 : #a68bfa;
  --ta-light-charts-color-3 : #4a12b8;
  --ta-light-charts-color-4 : #c4b1fd;
  --ta-light-charts-color-5 : #8b4dff;
  --ta-light-charts-color-6 : #3ec6e0;
  --ta-light-charts-color-7 : #f0a202;
  --ta-light-charts-color-8 : #25c19a;
  --ta-light-charts-color-9 : #e05263;
  --ta-light-charts-color-10: #9aa5b1;

  --ta-dark-charts-color-1 :  #671cf6;
  --ta-dark-charts-color-2 :  #a68bfa;
  --ta-dark-charts-color-3 :  #4a12b8;
  --ta-dark-charts-color-4 :  #c4b1fd;
  --ta-dark-charts-color-5 :  #8b4dff;
  --ta-dark-charts-color-6 :  #3ec6e0;
  --ta-dark-charts-color-7 :  #f0a202;
  --ta-dark-charts-color-8 :  #25c19a;
  --ta-dark-charts-color-9 :  #e05263;
  --ta-dark-charts-color-10:  #9aa5b1;
}

/* Invest button contrast. Measured live on the widget: the filled
   primary button renders color rgb(28,34,43) on our rgb(103,28,246)
   fill, i.e. near-black on purple - unreadable. Brokeree's own palette
   was light enough for dark text; ours is not. Force white, both
   themes, since --ta-*-primary-color is #671cf6 in each. */
.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary .mdc-button__label,
.brdc-action-button .mat-mdc-unelevated-button.mat-primary {
  color: #ffffff !important;
}
.mat-mdc-unelevated-button.mat-primary.mat-mdc-button-disabled {
  color: rgba(255, 255, 255, 0.6) !important;
  background-color: #3a2270 !important;
}

/* Same fix widened to the Material base classes, so it also covers the
   ratings admin Log In button and anything else filled. Chasing one
   brdc-* class at a time missed two of them the first time round. */
.mat-mdc-unelevated-button:not(.mat-mdc-button-disabled),
.mat-mdc-unelevated-button:not(.mat-mdc-button-disabled) .mdc-button__label,
.mat-mdc-raised-button:not(.mat-mdc-button-disabled),
.mat-mdc-raised-button:not(.mat-mdc-button-disabled) .mdc-button__label {
  color: #ffffff !important;
}
.mat-mdc-button-disabled.mat-mdc-unelevated-button,
.mat-mdc-button-disabled.mat-mdc-raised-button {
  background-color: #e9eff6 !important;
}
.mat-mdc-button-disabled.mat-mdc-unelevated-button,
.mat-mdc-button-disabled.mat-mdc-unelevated-button .mdc-button__label,
.mat-mdc-button-disabled.mat-mdc-raised-button,
.mat-mdc-button-disabled.mat-mdc-raised-button .mdc-button__label {
  color: #6b7280 !important;
}
[data-theme="dark"] .mat-mdc-button-disabled.mat-mdc-unelevated-button,
[data-theme="dark"] .mat-mdc-button-disabled.mat-mdc-raised-button {
  background-color: #2a1a55 !important;
}
[data-theme="dark"] .mat-mdc-button-disabled.mat-mdc-unelevated-button,
[data-theme="dark"] .mat-mdc-button-disabled.mat-mdc-unelevated-button .mdc-button__label,
[data-theme="dark"] .mat-mdc-button-disabled.mat-mdc-raised-button,
[data-theme="dark"] .mat-mdc-button-disabled.mat-mdc-raised-button .mdc-button__label {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Default manager avatar, for every account that has none.

   The Account Profile path template, assets/avatars/{{accountId}}.png,
   only fires for an account that already HAS an avatar. Verified live on
   the leaderboard: zero requests to /avatars/ are made, and the markup
   is <brdc-user-outline-avatar> wrapping a FontAwesome glyph. So there
   is no per-account file to place and nothing to upload; painting the
   ninja behind the placeholder is the only approach that scales.

   :has() keeps it to the placeholder only, so a manager who later gets
   a real avatar renders his own image and is left alone. */
.brdc-user-outline-avatar:has(.brdc-user-outline-avatar-icon) {
  background-image: url("./assets/avatars/default.png");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  overflow: hidden;
}
.brdc-user-outline-avatar:has(.brdc-user-outline-avatar-icon)
  .brdc-user-outline-avatar-icon {
  visibility: hidden;
}