/* METROIL: cabecera y sidebar de ThingsBoard CE 4.3.1.6. */
tb-home {
  --metroil-turquoise: #00A9C7;
  --metroil-logo-turquoise: #12ABC4;
  --metroil-navy: #06194B;
  --metroil-blue: #18336C;
  --metroil-logo-panel: #F6FAFF;
  --metroil-border: #EDEFF3;
  --metroil-white: #FFFFFF;
}

/* Cabecera principal: fondo muy claro #F6FAFF, controles azul oscuro. */
tb-home .tb-primary-toolbar {
  --mat-toolbar-container-background-color: var(--metroil-logo-panel);
  --mat-toolbar-container-text-color: var(--metroil-navy);
  background-color: var(--metroil-logo-panel) !important;
  color: var(--metroil-navy) !important;
}

tb-home .tb-primary-toolbar .mat-mdc-icon-button {
  --mat-icon-button-icon-color: var(--metroil-navy);
  --mat-icon-button-state-layer-color: var(--metroil-navy);
  color: var(--metroil-navy) !important;
}

tb-home .tb-primary-toolbar .mat-icon,
tb-home .tb-primary-toolbar tb-breadcrumb,
tb-home .tb-primary-toolbar .tb-user-info,
tb-home .tb-primary-toolbar input {
  color: var(--metroil-navy) !important;
}

/* El buscador usa un contenedor tb-dark dentro de la cabecera. */
tb-home .tb-primary-toolbar input::placeholder {
  color: var(--metroil-blue) !important;
}

/* Panel del logo: cambia el contenedor, conserva el PNG con fondo blanco. */
tb-home .tb-site-sidenav .tb-nav-header,
tb-home .tb-site-sidenav .tb-nav-header-toolbar {
  --mat-toolbar-container-background-color: var(--metroil-logo-panel);
  --mat-toolbar-container-text-color: var(--metroil-navy);
  background-color: var(--metroil-logo-panel) !important;
  color: var(--metroil-navy) !important;
  border-bottom-color: var(--metroil-border) !important;
}

/* Solo el sidenav de navegación; otros paneles conservan sus estilos. */
tb-home .tb-site-sidenav,
tb-home .tb-site-sidenav .tb-side-menu-toolbar {
  --mat-toolbar-container-background-color: var(--metroil-logo-panel);
  --mat-toolbar-container-text-color: var(--metroil-navy);
  background-color: var(--metroil-logo-panel) !important;
  color: var(--metroil-navy) !important;
}

tb-home .tb-side-menu-toolbar tb-side-menu a.mat-mdc-button {
  --mat-button-text-label-text-color: var(--metroil-navy);
  --mat-button-text-state-layer-color: var(--metroil-navy);
  color: var(--metroil-navy) !important;
}

tb-home .tb-side-menu-toolbar tb-side-menu a.mat-mdc-button .mat-icon,
tb-home .tb-side-menu-toolbar tb-side-menu a.mat-mdc-button .mdc-button__label,
tb-home .tb-side-menu-toolbar tb-side-menu a.mat-mdc-button .tb-toggle-icon {
  color: inherit !important;
}

tb-home .tb-side-menu-toolbar tb-side-menu .tb-side-menu > li {
  border-bottom-color: var(--metroil-border) !important;
}

/* Selección: texto turquesa del logo sobre una fila azul muy clara. */
tb-home .tb-side-menu-toolbar tb-side-menu a.mat-mdc-button.tb-active {
  --mat-button-text-label-text-color: var(--metroil-logo-turquoise);
  --mat-button-text-state-layer-color: var(--metroil-logo-turquoise);
  background-color: var(--metroil-logo-panel) !important;
  color: var(--metroil-logo-turquoise) !important;
  /* Indicador interior: conserva el ancho y la posición de textos e iconos. */
  box-shadow: inset 3px 0 0 var(--metroil-logo-turquoise);
}

/* Hover: intensificar el turquesa, también sobre la opción seleccionada. */
tb-home .tb-side-menu-toolbar tb-side-menu a.mat-mdc-button:hover {
  --mat-button-text-label-text-color: var(--metroil-turquoise);
  --mat-button-text-state-layer-color: var(--metroil-turquoise);
  background-color: var(--metroil-logo-panel) !important;
  color: var(--metroil-turquoise) !important;
}

tb-home .tb-side-menu-toolbar tb-side-menu a.mat-mdc-button:focus-visible {
  outline: 2px solid var(--metroil-navy);
  outline-offset: -3px;
}

/* Conservar la legibilidad de las etiquetas NEW sobre fondo blanco. */
tb-home .tb-side-menu-toolbar tb-side-menu a.is-new::after {
  background-color: var(--metroil-white) !important;
  color: var(--metroil-navy) !important;
}