/* ------------------------------------------------------------------
   Branding AMTTEK — sobreescritura del login de ThingsBoard CE 4.3.1.3
   Inyectado por Nginx (sub_filter). No modifica el bundle Angular.
   Selectores tomados de la plantilla compilada del componente tb-login.
   Rollback: sudo ~/branding_amttek/revertir_branding.sh
   ------------------------------------------------------------------ */

/* --- AJUSTE 2a: fondo de pagina gris muy claro --------------------- */
.tb-login-content,
.tb-login-content.mat-app-background {
  background: #f5f5f5 !important;
}

/* --- AJUSTE 2b: tarjeta en blanco puro, separacion sutil ----------- */
.tb-login-content mat-card,
.tb-login-content .mat-mdc-card {
  background: #ffffff !important;
  color: #12212e !important;
  border: 1px solid #e6e9ec !important;
  box-shadow: 0 1px 3px rgba(16,33,54,.06), 0 6px 20px rgba(16,33,54,.07) !important;
}

/* --- AJUSTE 2c: cascada de texto sobre fondo claro ---------------- */
.tb-login-content .title            { color: #111111 !important; }
.tb-login-content mat-label,
.tb-login-content .mat-mdc-form-field-label,
.tb-login-content label             { color: #111111 !important; }
.tb-login-content input.mat-mdc-input-element,
.tb-login-content .mat-mdc-input-element {
  color: #12212e !important;
  caret-color: #0ea5a0 !important;
}
.tb-login-content .mdc-notched-outline__leading,
.tb-login-content .mdc-notched-outline__notch,
.tb-login-content .mdc-notched-outline__trailing {
  border-color: #c6d3dc !important;
}
.tb-login-content .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
.tb-login-content .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
.tb-login-content .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing {
  border-color: #0ea5a0 !important;
}
.tb-login-content .mat-mdc-form-field-icon-prefix,
.tb-login-content .mat-mdc-form-field-icon-suffix,
.tb-login-content .mat-mdc-form-field-icon-prefix .mat-icon,
.tb-login-content .mat-mdc-form-field-icon-suffix .mat-icon {
  color: #5c7180 !important;
}

/* --- AJUSTE 2d: boton principal, de naranja accent a teal AMTTEK --- */
.tb-login-content button.tb-action-button,
.tb-login-content .tb-action-button.mat-mdc-unelevated-button {
  background-color: #0ea5a0 !important;
  color: #ffffff !important;
}
.tb-login-content button.tb-action-button:hover:not([disabled]) {
  background-color: #0c8f8b !important;
}
.tb-login-content button.tb-action-button[disabled] {
  background-color: #b9d8d6 !important;
  color: #ffffff !important;
}
.tb-login-content .tb-reset-password,
.tb-login-content .forgot-password a,
.tb-login-content .forgot-password button {
  color: #0ea5a0 !important;
}
.tb-login-content .container-divider,
.tb-login-content .oauth-container .text { color: #5c7180 !important; }

/* --- AJUSTE 1: tamano del logo, 66% del ancho util de la tarjeta --- */
.tb-login-content .login-logo      { display: block; width: 66%; margin: 0 auto; }
.tb-login-content .login-logo a    { display: block; line-height: 0; }
.tb-login-content .login-logo img  { width: 100%; height: auto; display: block; }

/* Sobre tarjeta blanca el logo claro seria invisible: se usa la
   variante oscura, y SOLO en el login. La barra superior conserva la clara. */
.tb-login-content .login-logo img  { content: url('/amttek/logo-dark.svg'); }


/* ==================================================================
   AJUSTE 4 — Tipografia del login
   Tamanos pedidos: titulo 23px, labels e inputs 16px, boton 16px,
   enlace 15px. Todo en #111 salvo enlace (teal) y error (rojo).
   Se fijan tanto los tokens Material como el font-size directo:
   los form-field de Angular Material dimensionan por custom property.
   ================================================================== */

.tb-login-content {
  --mat-form-field-container-text-size: 16px;
  --mdc-outlined-text-field-label-text-size: 16px;
  --mat-form-field-subscript-text-size: 13px;
  --mdc-filled-button-label-text-size: 16px;
  --mdc-text-button-label-text-size: 15px;
  --mat-form-field-container-height: 56px;
}

/* titulo "Inicia sesion en tu cuenta" */
.tb-login-content .title {
  font-size: 23px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: #111111 !important;
}

/* labels de los campos */
.tb-login-content mat-label,
.tb-login-content .mat-mdc-floating-label,
.tb-login-content .mdc-floating-label {
  font-size: 16px !important;
  color: #111111 !important;
}

/* texto escrito dentro de los inputs */
.tb-login-content input.mat-mdc-input-element,
.tb-login-content .mat-mdc-input-element,
.tb-login-content .mdc-text-field__input {
  font-size: 16px !important;
  color: #111111 !important;
  caret-color: #0ea5a0 !important;
}

/* boton principal */
.tb-login-content button.tb-action-button,
.tb-login-content button.tb-action-button .mdc-button__label {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}
.tb-login-content button.tb-action-button { min-height: 44px !important; }

/* enlace de contrasena olvidada */
.tb-login-content .tb-reset-password,
.tb-login-content .tb-reset-password .mdc-button__label,
.tb-login-content .forgot-password a,
.tb-login-content .forgot-password button {
  font-size: 15px !important;
  color: #0ea5a0 !important;
}

/* mensajes de error en rojo */
.tb-login-content mat-error,
.tb-login-content .mat-mdc-form-field-error,
.tb-login-content .mdc-text-field--invalid .mdc-floating-label {
  font-size: 13px !important;
  color: #c62828 !important;
}
.tb-login-content .mdc-text-field--invalid .mdc-notched-outline__leading,
.tb-login-content .mdc-text-field--invalid .mdc-notched-outline__notch,
.tb-login-content .mdc-text-field--invalid .mdc-notched-outline__trailing {
  border-color: #c62828 !important;
}

/* ==================================================================
   AJUSTE 5 — Pie "Powered by ThingsBoard v.X" de los dashboards
   Componente tb-dashboard-page de TB 4.3.1.3:
     <section data-html2canvas-ignore class="tb-powered-by-footer"
              *ngIf="!embedded">Powered by <a>ThingsBoard v.{{tbVersion}}</a>
   Sale en todo dashboard no embebido (escritorio y movil, todo rol).
   !important vence al estilo del componente, que no lo usa.
   verificar_branding.sh avisa si un upgrade renombra la clase.
   ================================================================== */
section.tb-powered-by-footer { display: none !important; }