/* PAMM portal branding — TradeQuo / Social Trading AI
   Colours taken from the vector logo, not sampled by eye.
   Variable names verified against the deployed 6.0.0 stylesheets:
   article 16.01 names five of them wrongly. */
:root {
  /* Paths resolve against the DOCUMENT base (<base href="/investor/">),
     NOT against this stylesheet -- url() inside a custom property is
     substituted as a token and resolved at use site. So the prefix is
     ./assets/, even though this file already sits in assets/.
     Verified live: ./images/... requested /investor/images/... and 404d. */
  --pm-light-header-logo-path: url("./assets/images/logo-page.png");
  --pm-dark-header-logo-path:  url("./assets/images/logo-page-dark.png");
  --pm-light-page-logo-path:   url("./assets/images/logo-page.png");
  --pm-dark-page-logo-path:    url("./assets/images/logo-page-dark.png");
  --pm-light-loader-logo-path: url("./assets/images/loader.svg");
  --pm-dark-loader-logo-path:  url("./assets/images/loader-dark.svg");

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

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

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

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

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

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

/* Class overrides (allowed by article 16.01, outside :root). */

/* Drop the redundant "PAMM" text heading on login / register / join.
   The centre lockup already carries the name. Scoped to public pages
   so real headings inside the dashboards are untouched. */
.brdc-public-page .brdc-heading { display: none !important; }

/* Button text contrast, dark theme: the disabled action button shipped
   near-black text (#1c222b) on a dark-purple fill = invisible. Make the
   action-button text light, and lift the disabled fill so it reads. */
[data-theme="dark"] .brdc-form-content-actions-button.mat-mdc-unelevated-button {
  color: #ffffff !important;
}
[data-theme="dark"] .brdc-form-content-actions-button.mat-mdc-unelevated-button.mat-mdc-button-disabled {
  color: rgba(255, 255, 255, 0.6) !important;
  background-color: #3a2270 !important;
}

/* Every filled button, not just the one class above. Brokeree's theme
   hard-codes the label at #1c222b, which was readable on their light
   green and is invisible on our purple. Measured live:
     /investor/investments  "+ New"  rgb(28,34,43) on rgb(103,28,246)
     contrast ratio 2.34, against a 4.5 minimum.
   Fixing this one brdc-* class at a time is what let two of them
   through the first time, so target the Material base classes. */
.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;
}

/* The disabled state fails the other way, and differently per theme:
     light  rgb(255,255,255) on rgb(233,239,246)  ratio 1.16
     dark   rgb(28,34,43)   on #1f1140           ratio 1.31
   1.0 would be invisible, so both are effectively unreadable. */
.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;
}

/* The boot loader box, from index.html:
     <div class="brdc-app brdc-app--loading"><div class="brdc-app-logo">
   Stretched to the viewport so the ninja runs right across it. The
   10:1 ratio matches the 1200x120 viewBox, so nothing is distorted.
   On a 1440px screen the figure lands at about 119x98px. */
.brdc-app--loading .brdc-app-logo {
  width: 100vw;
  max-width: 100vw;
  aspect-ratio: 10 / 1;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Below tablet that strip is only ~37px tall and the ninja disappears,
   so keep the original centred loader on phones. */
@media (max-width: 768px) {
  .brdc-app--loading .brdc-app-logo {
    width: 240px;
    max-width: 240px;
    aspect-ratio: 2 / 1;
  }
}