/* Obodroid CI overrides for demo.iot-dashboard.obodroid.app (injected via nginx-proxy, not part of the ThingsBoard app itself) */

/* 0. Bootstrap loading spinner (#tb-loading-spinner), shown on every route before
   the Angular app itself has mounted -- baked into index.html as inline CSS with
   stock ThingsBoard teal-blue dots. Our stylesheet link sits in <head> right after
   that inline <style> block (both render-blocking), so this wins from the very
   first frame, before Angular ever runs. */
#tb-loading-spinner > div {
  background-color: #AE1F23 !important;
}

/* 1. Any primary toolbar defaults to brand red: top masthead, breadcrumb bar, and
   the dashboard viewer's own "Smart Retail Stores" state toolbar (that one is
   rendered by a separately-bundled chunk shipping its own copy of this same rule,
   so we override the actual background-color/color, not just the custom property,
   to win regardless of load order). */
.mat-toolbar.mat-primary {
  background-color: #AE1F23 !important;
  color: #ffffff !important;
  --mat-toolbar-container-background-color: #AE1F23 !important;
  --mat-toolbar-container-text-color: #ffffff !important;
}

/* 2. Side nav: dim it down instead of red. Scoped to .tb-side-menu-toolbar
   specifically (higher specificity than rule 1, so it wins there) -- NOT the whole
   <mat-sidenav> container, because the top logo/title toolbar
   (.tb-nav-header-toolbar) is ALSO a child of that same <mat-sidenav>, and an
   ancestor-based selector would incorrectly dim it too (this was the actual bug
   in the previous version: the top bar was going dim instead of staying red). */
.tb-side-menu-toolbar.mat-toolbar.mat-primary {
  background-color: #1b1e24 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  --mat-toolbar-container-background-color: #1b1e24 !important;
  --mat-toolbar-container-text-color: rgba(255, 255, 255, 0.7) !important;
}
mat-sidenav.tb-site-sidenav {
  background-color: #1b1e24 !important;
}

/* 3. The dashboard's floating per-state toolbar control uses a completely
   different Angular Material component (mat-fab-toolbar, an expanding FAB -- not
   a mat-toolbar at all), which paints its own primary color directly on these two
   elements rather than through the --mat-toolbar-* custom properties above. */
.mat-fab-toolbar-background,
.mat-mdc-fab.mat-primary {
  background-color: #AE1F23 !important;
}

.tb-nav-header-toolbar .tb-logo-title {
  content: url("/assets/obodroid-logo-white.svg") !important;
}

/* 4. Hide the "IoT Hub" side-menu entry (visual only -- the /iot-hub route still works
   if someone types the URL). The <li> is hidden via :has() so its divider line goes
   too; the plain <a> rule is the fallback for browsers without :has(). */
.tb-side-menu > li:has(> tb-menu-link > a[href$="/iot-hub"]) {
  display: none !important;
}
.tb-side-menu a[href$="/iot-hub"] {
  display: none !important;
}

/* 5. Hide the "Star us on GitHub" badge in the top toolbar (<tb-github-badge>). */
tb-github-badge {
  display: none !important;
}

/* 6. "Powered by ThingsBoard v.x" footer on the dashboard page: force black. The section's
   color is set inline from the dashboard's titleColor setting and the link has its own
   color, hence !important on both. */
div.tb-dashboard-page section.tb-powered-by-footer,
div.tb-dashboard-page section.tb-powered-by-footer span,
div.tb-dashboard-page section.tb-powered-by-footer a {
  color: #000000 !important;
}

/* 7. Login page. ThingsBoard bakes its default blue (#305680) into the Material
   theme's --mat-sys-primary equivalent globally (~140 compiled CSS custom
   properties app-wide), so the login card's background comes from that shared
   variable, not a component-local one -- overriding the variable itself would
   recolor buttons/menus/tables everywhere else in the app too. Instead every rule
   below is scoped under the <tb-login> host element (the whole login route lives
   inside it), the same narrow-scoping approach as rule 1's toolbar override. */
tb-login .tb-login-content {
  background-color: #14161c !important;
}
body:has(tb-login),
html:has(tb-login) {
  background-color: #14161c !important;
}

tb-login mat-card.mat-mdc-card {
  background-color: #1e222b !important;
  --mat-card-elevated-container-color: #1e222b !important;
  border-top: 4px solid #AE1F23;
}

tb-login .login-logo img {
  content: url("/assets/obodroid-logo-white.svg") !important;
}

tb-login .oauth-container .title {
  color: rgba(255, 255, 255, 0.87) !important;
}

/* Input text/icons/labels: MDC outlined fields default to dark-on-light text,
   near-invisible on our dark card (same class of bug the dashboard's Material
   form widgets had after the earlier dark-theme rebrand). */
tb-login .mat-mdc-form-field input,
tb-login .mat-mdc-form-field .mat-icon,
tb-login .mat-mdc-form-field .mdc-text-field__input {
  color: rgba(255, 255, 255, 0.87) !important;
  caret-color: #AE1F23 !important;
}
tb-login .mdc-floating-label,
tb-login .mat-mdc-form-field-hint {
  color: rgba(255, 255, 255, 0.6) !important;
}
tb-login .mdc-notched-outline__leading,
tb-login .mdc-notched-outline__notch,
tb-login .mdc-notched-outline__trailing {
  border-color: rgba(255, 255, 255, 0.3) !important;
}
tb-login .mat-focused .mdc-notched-outline__leading,
tb-login .mat-focused .mdc-notched-outline__notch,
tb-login .mat-focused .mdc-notched-outline__trailing {
  border-color: #AE1F23 !important;
}
tb-login .mat-mdc-form-field.mat-focused .mdc-floating-label {
  color: #d98b8d !important;
}
/* The notch piece (the segment the floating label sits inside) doesn't need its
   own left border -- it butts up against the leading piece's border, and the
   fuller border-color rule above was drawing a stray vertical tick there. */
tb-login .mdc-notched-outline__notch {
  border-left: none !important;
}

/* Sign-in button: brand red instead of stock orange accent. */
tb-login .tb-action-button.mat-accent {
  background-color: #AE1F23 !important;
  --mat-button-filled-container-color: #AE1F23 !important;
  color: #ffffff !important;
}

/* "Forgot your password?" link. */
tb-login button.mat-mdc-button:not(.tb-action-button) {
  color: #e2989b !important;
}