/* =============================================================================
   Sentinel Edge — MET Platform Theme
   Replace TB primary #305680 → MET #1a3f7d
   Replace TB accent  #ff5722 → MET #1a3f7d (unified brand)
   ============================================================================= */


/* ===================================================================
   1. PRIMARY COLOR OVERRIDES (.tb-default .mat-primary)
   =================================================================== */

.tb-default {
  --mat-option-selected-state-label-text-color: #1a3f7d;
}
.tb-default .mat-primary {
  --mat-full-pseudo-checkbox-selected-icon-color: #1a3f7d;
}
.tb-default .mat-mdc-progress-bar {
  --mdc-linear-progress-active-indicator-color: #1a3f7d;
  --mdc-linear-progress-track-color: rgba(26, 63, 125, .25);
}
.tb-default .mat-mdc-standard-chip.mat-primary,
.tb-default .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mdc-chip-elevated-container-color: #1a3f7d;
  --mdc-chip-elevated-selected-container-color: #1a3f7d;
  --mdc-chip-elevated-disabled-container-color: #1a3f7d;
  --mdc-chip-flat-disabled-selected-container-color: #1a3f7d;
}
.tb-default .mat-mdc-radio-button.mat-primary {
  --mdc-radio-selected-focus-icon-color: #1a3f7d;
  --mdc-radio-selected-hover-icon-color: #1a3f7d;
  --mdc-radio-selected-icon-color: #1a3f7d;
  --mdc-radio-selected-pressed-icon-color: #1a3f7d;
}
.tb-default .mat-mdc-list-option {
  --mdc-checkbox-selected-focus-icon-color: #1a3f7d;
  --mdc-checkbox-selected-hover-icon-color: #1a3f7d;
  --mdc-checkbox-selected-icon-color: #1a3f7d;
  --mdc-checkbox-selected-pressed-icon-color: #1a3f7d;
}
.tb-default .mat-mdc-tab-group,
.tb-default .mat-mdc-tab-nav-bar {
  --mdc-tab-indicator-active-indicator-color: #1a3f7d;
  --mat-tab-header-active-label-text-color: #1a3f7d;
}
.tb-default .mat-mdc-tab-group.mat-background-primary,
.tb-default .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-header-with-background-background-color: #1a3f7d;
}
.tb-default .mat-mdc-checkbox.mat-primary {
  --mdc-checkbox-selected-focus-icon-color: #1a3f7d;
  --mdc-checkbox-selected-hover-icon-color: #1a3f7d;
  --mdc-checkbox-selected-icon-color: #1a3f7d;
  --mdc-checkbox-selected-pressed-icon-color: #1a3f7d;
}
.tb-default .mat-mdc-slide-toggle.mat-primary {
  --mdc-switch-selected-handle-color: #1a3f7d;
  --mdc-switch-selected-focus-handle-color: #1a3f7d;
  --mdc-switch-selected-hover-handle-color: #1a3f7d;
  --mdc-switch-selected-pressed-handle-color: #0f2847;
  --mdc-switch-selected-track-color: #8fa8d4;
  --mdc-switch-selected-focus-track-color: #8fa8d4;
  --mdc-switch-selected-hover-track-color: #8fa8d4;
  --mdc-switch-selected-pressed-track-color: #8fa8d4;
}
.tb-default .mat-mdc-button.mat-primary {
  --mdc-text-button-label-text-color: #1a3f7d;
  --mat-text-button-state-layer-color: #1a3f7d;
  --mat-text-button-ripple-color: rgba(26, 63, 125, .1);
}
.tb-default .mat-mdc-unelevated-button.mat-primary {
  --mdc-filled-button-container-color: #1a3f7d;
  --mdc-filled-button-label-text-color: white;
}
.tb-default .mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: #1a3f7d;
  --mdc-protected-button-label-text-color: white;
}
.tb-default .mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: #1a3f7d;
  --mat-outlined-button-state-layer-color: #1a3f7d;
  --mat-outlined-button-ripple-color: rgba(26, 63, 125, .1);
}
.tb-default .mat-mdc-icon-button.mat-primary {
  --mdc-icon-button-icon-color: #1a3f7d;
  --mat-icon-button-state-layer-color: #1a3f7d;
  --mat-icon-button-ripple-color: rgba(26, 63, 125, .1);
}
.tb-default .mat-mdc-fab.mat-primary {
  --mdc-fab-container-color: #1a3f7d;
  --mat-fab-foreground-color: white;
}
.tb-default .mat-mdc-mini-fab.mat-primary {
  --mdc-fab-small-container-color: #1a3f7d;
  --mat-fab-small-foreground-color: white;
}
.tb-default .mat-icon.mat-primary {
  --mat-icon-color: #1a3f7d;
}
.tb-default .mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #1a3f7d;
  --mat-toolbar-container-text-color: white;
}
.tb-default .mat-mdc-form-field.mat-focused .mat-mdc-floating-label {
  color: #1a3f7d !important;
}
.tb-default .mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-form-field-focus-overlay:before {
  background-color: #1a3f7d;
}
.tb-default .mat-mdc-progress-spinner {
  --mdc-circular-progress-active-indicator-color: #1a3f7d;
}
.tb-default .tb-primary-background { background-color: #1a3f7d; }
.tb-default .tb-no-data-bg:before { background: #1a3f7d; }
.tb-default .tb-primary-fill:before { background: #1a3f7d; }
.tb-default .mat-step-header .mat-step-icon-selected { background-color: #1a3f7d; }
.tb-default .mat-badge-content { background-color: #1a3f7d; }
.tb-default mat-fab-toolbar.mat-primary .mat-fab-toolbar-background { background: #1a3f7d; }

/* Datepicker */
.tb-default .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected { background-color: #1a3f7d; }
.tb-default .mat-datetimepicker-clock-center,
.tb-default .mat-datetimepicker-clock-hand { background-color: #1a3f7d; }
.tb-default .mat-datetimepicker-clock-hand:before { background-color: #1a3f7d; }


/* ===================================================================
   2. ACCENT COLOR OVERRIDES: #ff5722 → #1a3f7d (login button, etc.)
   =================================================================== */

.tb-default .mat-accent {
  --mat-option-selected-state-label-text-color: #1a3f7d;
  --mat-full-pseudo-checkbox-selected-icon-color: #1a3f7d;
  --mdc-slider-handle-color: #1a3f7d;
  --mdc-slider-focus-handle-color: #1a3f7d;
  --mdc-slider-hover-handle-color: #1a3f7d;
  --mdc-circular-progress-active-indicator-color: #1a3f7d;
}
.tb-default .mat-mdc-progress-bar.mat-accent {
  --mdc-linear-progress-active-indicator-color: #1a3f7d;
  --mdc-linear-progress-track-color: rgba(26, 63, 125, .25);
}
.tb-default .mat-mdc-form-field.mat-accent {
  --mdc-filled-text-field-caret-color: #1a3f7d;
  --mdc-filled-text-field-focus-active-indicator-color: #1a3f7d;
  --mdc-filled-text-field-focus-label-text-color: rgba(26, 63, 125, .87);
}
.tb-default .mat-mdc-standard-chip.mat-accent,
.tb-default .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mdc-chip-elevated-container-color: #1a3f7d;
  --mdc-chip-elevated-selected-container-color: #1a3f7d;
}
.tb-default .mat-mdc-radio-button.mat-accent {
  --mdc-radio-selected-focus-icon-color: #1a3f7d;
  --mdc-radio-selected-hover-icon-color: #1a3f7d;
  --mdc-radio-selected-icon-color: #1a3f7d;
  --mdc-radio-selected-pressed-icon-color: #1a3f7d;
}
.tb-default .mat-mdc-list-option.mat-accent {
  --mdc-checkbox-selected-focus-icon-color: #1a3f7d;
  --mdc-checkbox-selected-hover-icon-color: #1a3f7d;
  --mdc-checkbox-selected-icon-color: #1a3f7d;
  --mdc-checkbox-selected-pressed-icon-color: #1a3f7d;
}
.tb-default .mat-mdc-tab-group.mat-accent,
.tb-default .mat-mdc-tab-nav-bar.mat-accent {
  --mdc-tab-indicator-active-indicator-color: #1a3f7d;
  --mat-tab-header-active-label-text-color: #1a3f7d;
}
.tb-default .mat-mdc-tab-group.mat-background-accent,
.tb-default .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-header-with-background-background-color: #1a3f7d;
}
.tb-default .mat-mdc-checkbox.mat-accent {
  --mdc-checkbox-selected-focus-icon-color: #1a3f7d;
  --mdc-checkbox-selected-hover-icon-color: #1a3f7d;
  --mdc-checkbox-selected-icon-color: #1a3f7d;
  --mdc-checkbox-selected-pressed-icon-color: #1a3f7d;
}
.tb-default .mat-mdc-button.mat-accent {
  --mdc-text-button-label-text-color: #1a3f7d;
  --mat-text-button-state-layer-color: #1a3f7d;
  --mat-text-button-ripple-color: rgba(26, 63, 125, .1);
}
.tb-default .mat-mdc-unelevated-button.mat-accent {
  --mdc-filled-button-container-color: #1a3f7d;
  --mdc-filled-button-label-text-color: white;
}
.tb-default .mat-mdc-raised-button.mat-accent {
  --mdc-protected-button-container-color: #1a3f7d;
  --mdc-protected-button-label-text-color: white;
}
.tb-default .mat-mdc-outlined-button.mat-accent {
  --mdc-outlined-button-label-text-color: #1a3f7d;
  --mat-outlined-button-state-layer-color: #1a3f7d;
  --mat-outlined-button-ripple-color: rgba(26, 63, 125, .1);
}
.tb-default .mat-mdc-icon-button.mat-accent {
  --mdc-icon-button-icon-color: #1a3f7d;
  --mat-icon-button-state-layer-color: #1a3f7d;
  --mat-icon-button-ripple-color: rgba(26, 63, 125, .1);
}
.tb-default .mat-mdc-fab.mat-accent {
  --mdc-fab-container-color: #1a3f7d;
  --mat-fab-foreground-color: white;
}
.tb-default .mat-mdc-mini-fab.mat-accent {
  --mdc-fab-small-container-color: #1a3f7d;
  --mat-fab-small-foreground-color: white;
}
.tb-default .mat-icon.mat-accent {
  --mat-icon-color: #1a3f7d;
}
.tb-default .mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #1a3f7d;
  --mat-toolbar-container-text-color: white;
}
.tb-default .mat-badge-accent {
  --mat-badge-background-color: #1a3f7d;
  --mat-badge-text-color: white;
}
.tb-default .mat-step-header.mat-accent {
  --mat-stepper-header-selected-state-icon-background-color: #1a3f7d;
}
.tb-default mat-fab-toolbar.mat-accent .mat-fab-toolbar-background {
  background: #1a3f7d;
}


/* ===================================================================
   3. SIDENAV
   =================================================================== */

.tb-default mat-sidenav.tb-site-sidenav {
  background: linear-gradient(180deg, #0f2847 0%, #132e55 100%);
}


/* ===================================================================
   4. LOADING SPINNER
   =================================================================== */

.tb-loading-spinner > div {
  background-color: #1a3f7d !important;
}


/* ===================================================================
   5. LOGIN BUTTON — Force MET blue on accent buttons
   =================================================================== */

/* Global accent button override (catches login button) */
.mat-mdc-raised-button.mat-accent,
.mat-mdc-unelevated-button.mat-accent,
.mat-mdc-raised-button.mat-mdc-button-base.mat-accent,
.tb-default .mat-mdc-raised-button.mat-accent,
.tb-default .mat-mdc-unelevated-button.mat-accent {
  --mdc-protected-button-container-color: white !important;
  --mdc-protected-button-label-text-color: #1a3f7d !important;
  --mdc-filled-button-container-color: white !important;
  --mdc-filled-button-label-text-color: #1a3f7d !important;
  background-color: white !important;
  color: #1a3f7d !important;
  font-weight: 600 !important;
}
.mat-mdc-raised-button.mat-accent:hover,
.mat-mdc-unelevated-button.mat-accent:hover {
  background-color: #e8edf4 !important;
}

/* Login page — form error messages in white */
.tb-default .mat-mdc-form-field-error,
.tb-default .mat-error,
.tb-default .mat-mdc-form-field .mat-mdc-form-field-error,
.mat-mdc-form-field-error,
.mat-error,
.mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error {
  color: white !important;
}
/* Error underline — white instead of orange/red */
.tb-default .mat-mdc-form-field.mat-form-field-invalid .mdc-line-ripple::after,
.tb-default .mat-mdc-form-field.mat-form-field-invalid .mdc-line-ripple--active::after,
.mat-mdc-form-field.mat-form-field-invalid .mdc-line-ripple::after {
  border-bottom-color: white !important;
}
.tb-default .mat-mdc-form-field.mat-form-field-invalid .mat-mdc-floating-label,
.mat-mdc-form-field.mat-form-field-invalid .mat-mdc-floating-label {
  color: white !important;
}

/* ===================================================================
   6. LOGIN PAGE — Logo visibility + SENTINEL EDGE branding
   =================================================================== */

/* Make logo WHITE on the dark login card background */
.login-logo img.tb-logo-title,
.login-logo img {
  filter: brightness(0) invert(1) !important;
  width: auto !important;
  height: auto !important;
  max-width: 280px !important;
  max-height: 70px !important;
  object-fit: contain !important;
}

/* Login form — labels, inputs, icons in white for contrast on dark bg */
tb-login .mat-mdc-form-field .mdc-floating-label,
tb-login .mat-mdc-form-field .mat-mdc-floating-label,
tb-login .mat-mdc-form-field label {
  color: rgba(255, 255, 255, 0.7) !important;
}
tb-login .mat-mdc-form-field .mat-mdc-input-element,
tb-login .mat-mdc-form-field input {
  color: white !important;
}
tb-login .mat-mdc-form-field .mat-mdc-form-field-icon-suffix .mat-icon,
tb-login .mat-mdc-form-field .mat-icon,
tb-login .mat-mdc-form-field .mdc-text-field__icon {
  color: rgba(255, 255, 255, 0.7) !important;
}
tb-login .mat-mdc-form-field .mdc-line-ripple::before {
  border-bottom-color: rgba(255, 255, 255, 0.4) !important;
}
tb-login .mat-mdc-form-field .mdc-line-ripple::after {
  border-bottom-color: white !important;
}
tb-login a {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Add "SENTINEL EDGE" text below logo */
.login-logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.login-logo::after {
  content: "SENTINEL  EDGE" !important;
  display: block !important;
  margin-top: 16px !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  letter-spacing: 6px !important;
  word-spacing: 12px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  text-transform: uppercase !important;
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
}


/* ===================================================================
   6. SIDEBAR LOGO — White version
   =================================================================== */

mat-sidenav.tb-site-sidenav img.tb-logo-title,
mat-sidenav.tb-site-sidenav tb-logo img {
  filter: brightness(0) invert(1) !important;
  max-height: 36px !important;
  width: auto !important;
}


/* ===================================================================
   7. HIDE THINGSBOARD BRANDING REMNANTS
   =================================================================== */

/* Hide GitHub Star button in toolbar */
a[href*="github.com/thingsboard"],
[class*="github-star"],
iframe[src*="github.com/thingsboard"] {
  display: none !important;
}

/* Hide thingsboard.io links */
a[href*="thingsboard.io"] {
  display: none !important;
}

/* Footer copyright replacement */
.footer-text small {
  visibility: hidden;
  position: relative;
}
.footer-text small::after {
  content: "Sentinel Edge — Maghreb Electro-Technique";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
}

/* Logo click should not open thingsboard.io - make pointer-events none */
tb-logo img.tb-logo-title {
  pointer-events: none;
  cursor: default;
}