/* =========================================================
   INNAIOT THINGSBOARD CUSTOM BRANDING
   Match ai.innaiot.com dark background tone
   Only:
   - left sidebar
   - top header
   - dashboard title bar
   ========================================================= */

:root {
    --innaiot-dark: #0C1929;
    --innaiot-hover: #13263A;
    --innaiot-active: #1A3350;
}


/* =========================================================
   LEFT SIDEBAR
   ========================================================= */

.tb-side-menu {
    background-color: var(--innaiot-dark) !important;
    color: #ffffff !important;
}

.tb-side-menu mat-toolbar,
.tb-side-menu .mat-toolbar,
.tb-side-menu .mat-mdc-toolbar {
    background-color: var(--innaiot-dark) !important;
}

.tb-side-menu a,
.tb-side-menu button,
.tb-side-menu span {
    color: #ffffff !important;
}

.tb-side-menu mat-icon,
.tb-side-menu tb-icon,
.tb-side-menu svg {
    color: #ffffff !important;
    fill: currentColor !important;
}

.tb-side-menu a:hover,
.tb-side-menu button:hover {
    background-color: var(--innaiot-hover) !important;
}

.tb-side-menu .active,
.tb-side-menu .tb-active,
.tb-side-menu a.active,
.tb-side-menu [aria-current="page"] {
    background-color: var(--innaiot-active) !important;
    color: #ffffff !important;
}


/* =========================================================
   MAIN TOP HEADER
   ========================================================= */

mat-toolbar.mat-primary,
.mat-toolbar.mat-primary,
.mat-mdc-toolbar.mat-primary,
mat-toolbar[color="primary"],
.tb-primary-toolbar {
    background-color: var(--innaiot-dark) !important;
    color: #ffffff !important;
}

mat-toolbar.mat-primary > *,
.mat-toolbar.mat-primary > *,
.mat-mdc-toolbar.mat-primary > *,
mat-toolbar[color="primary"] > *,
.tb-primary-toolbar > * {
    color: #ffffff !important;
}

mat-toolbar.mat-primary button,
mat-toolbar.mat-primary a,
mat-toolbar.mat-primary mat-icon,
mat-toolbar.mat-primary tb-icon,

.mat-toolbar.mat-primary button,
.mat-toolbar.mat-primary a,
.mat-toolbar.mat-primary mat-icon,

.mat-mdc-toolbar.mat-primary button,
.mat-mdc-toolbar.mat-primary a,
.mat-mdc-toolbar.mat-primary mat-icon,

mat-toolbar[color="primary"] button,
mat-toolbar[color="primary"] a,
mat-toolbar[color="primary"] mat-icon,

.tb-primary-toolbar button,
.tb-primary-toolbar a,
.tb-primary-toolbar mat-icon,
.tb-primary-toolbar tb-icon {
    color: #ffffff !important;
}


/* =========================================================
   DASHBOARD TITLE BAR
   Example: Factory > Machine
   ========================================================= */

tb-dashboard-page mat-fab-toolbar .mat-fab-toolbar-background {
    background: var(--innaiot-dark) !important;
    background-color: var(--innaiot-dark) !important;
    color: #ffffff !important;
}

/* keep toolbar itself transparent over the dark background */
tb-dashboard-page mat-fab-toolbar .mat-toolbar.mat-primary,
tb-dashboard-page mat-fab-toolbar mat-toolbar.mat-primary {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

tb-dashboard-page mat-fab-toolbar .state-name,
tb-dashboard-page mat-fab-toolbar button,
tb-dashboard-page mat-fab-toolbar a,
tb-dashboard-page mat-fab-toolbar mat-icon,
tb-dashboard-page mat-fab-toolbar tb-icon,
tb-dashboard-page mat-fab-toolbar .mat-icon,
tb-dashboard-page mat-fab-toolbar span {
    color: #ffffff !important;
}


/* =========================================================
   HOVER EFFECTS
   ========================================================= */

mat-toolbar.mat-primary button:hover,
.mat-mdc-toolbar.mat-primary button:hover,
.tb-primary-toolbar button:hover,
tb-dashboard-page mat-fab-toolbar button:hover {
    background-color: rgba(255,255,255,0.10) !important;
}


/* =========================================================
   LOADER
   Optional - keep loading dots dark
   ========================================================= */

.tb-loader > div,
.tb-loader > span,
.tb-loading-spinner > div,
.tb-loading-spinner > span,
.loading-dots > div,
.loading-dots > span {
    background-color: var(--innaiot-dark) !important;
}

.tb-loader circle,
.tb-loading-spinner circle {
    fill: var(--innaiot-dark) !important;
    stroke: var(--innaiot-dark) !important;
}