/* =============================================================
   Condor Plataformna Web — CSS Branding para ThingsBoard CE
   =============================================================
   Selectores verificados contra ThingsBoard CE 4.2.0
   (ng-version 18.2.13)
   
   Paleta Condor:
     Cyan principal:  #38bdf8
     Verde SCD:       #1d9e75 / #5DCAA5
     Fondo sidebar:   #000000
     Fondo oscuro:    #0a1628
   ============================================================= */


/* ----- VARIABLES ----- */
:root {
  --condor-cyan:        #38bdf8;
  --condor-green:       #1d9e75;
  --condor-green-light: #5DCAA5;
  --condor-dark:        #000000;
  --condor-dark-mid:    #0a1628;
  --condor-dark-soft:   #152a4a;
}


/* =============================================================
   0. FONDO GLOBAL — Elimina franjas blancas en login y bordes
   ============================================================= */

html,
body,
body.tb-default {
  background: #050d1a !important;
}


/* =============================================================
   1. LOGO — Reemplazo en sidebar y login
   Selector real: img.tb-logo-title (src="assets/logo_title_white.svg")
   ============================================================= */

img.tb-logo-title {
  content: url('/condor/logo_condor.png') !important;
  max-height: 56px !important;
  height: 56px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Agrandar el contenedor del logo para que no lo recorte */
mat-toolbar.tb-nav-header-toolbar {
  height: 70px !important;
  max-height: 70px !important;
}

div.flex.flex-auto img.tb-logo-title {
  height: 56px !important;
  max-height: 56px !important;
}

tb-logo.login-logo img.tb-logo-title {
  content: url('/condor/logo_condor.png') !important;
  max-height: 90px !important;
  height: 90px !important;
  width: auto !important;
  max-width: 360px !important;
}


/* =============================================================
   2. SIDEBAR — OCULTO + contenido al 100%
   ============================================================= */

/* Ocultar el sidebar visualmente pero mantener links en el DOM */

mat-sidenav.tb-side-sidenav,
mat-sidenav.mat-drawer,
.mat-drawer.mat-sidenav.tb-side-sidenav,
mat-sidenav-container mat-sidenav {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  border: none !important;
}

/* El header del sidebar también */
header.tb-nav-header {
  display: none !important;
}

/* Forzar margin-left: 0 en el contenido (Angular lo pone inline como 250px) */
mat-sidenav-content,
mat-sidenav-content.mat-drawer-content,
mat-sidenav-content.mat-sidenav-content,
.mat-drawer-content.mat-sidenav-content,
mat-sidenav-container > mat-sidenav-content {
  margin-left: 0 !important;
}


/* =============================================================
   3. TOOLBAR SUPERIOR
   Selector real: mat-toolbar.tb-primary-toolbar
   ============================================================= */

mat-toolbar.tb-primary-toolbar,
mat-toolbar.mat-primary.mat-toolbar-single-row {
  background: var(--condor-dark-mid) !important;
  color: #e0e6ed !important;
}

/* Logo Condor en toolbar superior - clickeable */
mat-toolbar.tb-primary-toolbar::before {
   content: '' !important;
  background: url('/condor/logo_condor.png') no-repeat left center !important;
  background-size: contain !important;
  width: 240px !important;
  height: 100% !important;
  display: inline-block !important;
  margin-right: 16px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  min-height: 50px !important;
}

/* Aumentar la altura del toolbar para que entre el logo más grande */
mat-toolbar.tb-primary-toolbar,
mat-toolbar.mat-primary.mat-toolbar-single-row {
  height: 76px !important;
  max-height: 76px !important;
}

/* Ocultar el TEXTO del breadcrumb pero mantener el contenedor como spacer */
mat-toolbar.tb-primary-toolbar .tb-breadcrumbs *,
mat-toolbar.tb-primary-toolbar tb-breadcrumb *,
mat-toolbar.tb-primary-toolbar [class*="breadcrumb"] * {
  visibility: hidden !important;
  font-size: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* El contenedor del breadcrumb sigue ocupando espacio flex → empuja items a la derecha */
mat-toolbar.tb-primary-toolbar .tb-breadcrumbs,
mat-toolbar.tb-primary-toolbar tb-breadcrumb,
mat-toolbar.tb-primary-toolbar [class*="breadcrumb"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}


/* =============================================================
   4. "POWERED BY" — Footer en dashboards
   Selector real: section.tb-powered-by-footer
   Contenido: <span>"Powered by "<a>ThingsBoard v.4.2.0</a></span>
   ============================================================= */

section.tb-powered-by-footer span {
  font-size: 0 !important;
  color: transparent !important;
}

section.tb-powered-by-footer span a {
  display: none !important;
}

section.tb-powered-by-footer span::before {
  content: "Powered by SCD Servicios Informáticos" !important;
  font-size: 12px !important;
  color: #ffffff !important;
  font-weight: 400 !important;
}


/* =============================================================
   5. PAGINA DE LOGIN
   Selector real: div.tb-login-content.tb-dark
   Card: mat-card.mat-mdc-card
   ============================================================= */

div.tb-login-content,
div.tb-login-content.mat-app-background,
div.tb-login-content.mat-app-background.tb-dark {
  background: linear-gradient(135deg, #050d1a 0%, var(--condor-dark) 40%, var(--condor-dark-mid) 100%) !important;
}

div.tb-login-content mat-card.mat-mdc-card,
div.tb-login-content mat-card.mdc-card {
  background: rgba(14, 31, 56, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
  backdrop-filter: blur(10px) !important;
}

/* Botón Login — cubrir todas las variantes de Angular Material */
div.tb-login-content button[type="submit"],
div.tb-login-content .mat-mdc-raised-button,
div.tb-login-content .mat-mdc-unelevated-button,
div.tb-login-content .mat-mdc-flat-button,
div.tb-login-content .mdc-button--raised,
div.tb-login-content .mdc-button--unelevated,
div.tb-login-content button.mat-primary,
div.tb-login-content button.mat-mdc-button-base.mat-primary,
tb-login button[type="submit"] {
  background-color: var(--condor-cyan) !important;
  color: white !important;
}

/* Labels e inputs del login */
div.tb-login-content .mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

div.tb-login-content .mat-mdc-form-field-focus-overlay {
  background-color: rgba(56, 189, 248, 0.08) !important;
}

div.tb-login-content .mdc-floating-label {
  color: rgba(255, 255, 255, 0.6) !important;
}

div.tb-login-content a {
  color: var(--condor-green-light) !important;
}


/* =============================================================
   6. BOTONES Y ACENTOS GLOBALES
   ============================================================= */

.mat-mdc-fab.mat-primary,
.mat-mdc-mini-fab.mat-primary,
.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary {
  background-color: var(--condor-cyan) !important;
}

.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
  color: var(--condor-cyan) !important;
}

.mat-mdc-tab .mdc-tab-indicator__content--underline {
  border-color: var(--condor-cyan) !important;
}

.mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__track::after {
  background: rgba(29, 158, 117, 0.5) !important;
}

.mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__handle::after {
  background: var(--condor-green) !important;
}


/* =============================================================
   7. DASHBOARD TOOLBAR
   Selectores reales:
     section.tb-dashboard-toolbar
     mat-fab-toolbar.mat-primary
     div.mat-fab-toolbar-background (la barra azul)
     mat-toolbar.tb-primary-toolbar (toolbar superior contenido)
   ============================================================= */

section.tb-dashboard-toolbar {
  background: var(--condor-dark-mid) !important;
}

/* La barra azul expandible con botones (States, Layouts, etc.) */
mat-fab-toolbar.mat-primary div.mat-fab-toolbar-background,
div.mat-fab-toolbar-background {
  background-color: var(--condor-dark-mid) !important;
}

/* El botón FAB que abre la barra */
mat-fab-toolbar.mat-primary button.mat-primary,
mat-fab-toolbar button.mat-mdc-fab {
  background-color: var(--condor-cyan) !important;
}

/* Toolbar secundario dentro del dashboard */
mat-fab-toolbar mat-toolbar.mat-primary {
  background: var(--condor-dark-mid) !important;
}


/* =============================================================
   8. RESPONSIVE (MOBILE)
   ============================================================= */

@media (max-width: 960px) {
  img.tb-logo-title {
    max-height: 30px !important;
  }
  tb-logo.login-logo img.tb-logo-title {
    max-height: 44px !important;
    max-width: 220px !important;
  }
}

@media (max-width: 600px) {
  img.tb-logo-title {
    max-height: 24px !important;
  }
  tb-logo.login-logo img.tb-logo-title {
    max-height: 36px !important;
    max-width: 180px !important;
  }
}


/* =============================================================
   9. SCROLLBAR (sidebar)
   ============================================================= */

mat-sidenav.tb-side-sidenav ::-webkit-scrollbar {
  width: 4px;
}

mat-sidenav.tb-side-sidenav ::-webkit-scrollbar-track {
  background: transparent;
}

mat-sidenav.tb-side-sidenav ::-webkit-scrollbar-thumb {
  background: var(--condor-dark-soft);
  border-radius: 2px;
}

mat-sidenav.tb-side-sidenav ::-webkit-scrollbar-thumb:hover {
  background: var(--condor-cyan);
}


/* =============================================================
   12. SNACKBAR — Traducir mensajes de error (solo login)
   ============================================================= */

body:has(tb-login) .toast-text {
  font-size: 0 !important;
  color: transparent !important;
}

body:has(tb-login) .toast-text::before {
  content: "Usuario o clave inválido" !important;
  font-size: 18px !important;
  color: #fff !important;
}

/* Permitir scroll en widgets en mobile */
@media (max-width: 960px) {
  .tb-widget, 
  .tb-widget-content,
  .gridster-item-inner,
  tb-dashboard-page .tb-absolute-fill {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
/* Ocultar botón hamburguesa (sidebar está oculto) */
/* Ocultar hamburguesa - primer botón del toolbar */
mat-toolbar.tb-primary-toolbar > button:first-of-type {
  display: none !important;
}