/* =====================================================
   TEMA ELETROS RACE — Navy #1B2E6B / Azul #2E9FE6 / Vermelho #E63329
====================================================== */

/* ── 1. Variáveis globais ─────────────────────────── */
:root {
    --er-navy:         #1B2E6B;
    --er-navy-dark:    #142354;
    --er-navy-deep:    #0F1B40;
    --er-blue:         #2E9FE6;
    --er-blue-dark:    #1878C8;
    --er-blue-light:   #6FC0F2;
    --er-red:          #E63329;
    --er-navy-bg:      rgba(27, 46, 107, 0.07);
    --er-blue-bg:      rgba(46, 159, 230, 0.10);
    --tb-primary-color: #1B2E6B !important;
    --tb-primary-500:   #1B2E6B !important;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --soft-shadow:      0 4px 16px rgba(15, 27, 64, 0.06) !important;
    --hover-shadow:     0 8px 24px rgba(46, 159, 230, 0.18) !important;
}

/* ── 2. Scrollbars ────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(46,159,230,0.45); }

/* ── 3. Botões ────────────────────────────────────── */
.mat-mdc-button, .mat-mdc-raised-button,
.mat-mdc-unelevated-button, .mat-mdc-stroked-button {
    border-radius: var(--border-radius-sm) !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}

.mat-mdc-button.mat-primary,
.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-fab.mat-primary,
.mat-mdc-mini-fab.mat-primary {
    background-color: var(--er-navy) !important;
    color: #ffffff !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 3px 10px rgba(27,46,107,0.25) !important;
}

.mat-mdc-raised-button.mat-primary:hover,
.mat-mdc-fab.mat-primary:hover {
    background-color: var(--er-navy-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--hover-shadow);
}

.mat-mdc-button.mat-primary .mat-icon,
.mat-mdc-raised-button.mat-primary .mat-icon,
.mat-mdc-unelevated-button.mat-primary .mat-icon,
.mat-mdc-fab.mat-primary .mat-icon,
.mat-mdc-mini-fab.mat-primary .mat-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ── 4. Cards e painéis ───────────────────────────── */
.mat-mdc-card, .tb-card,
.tb-dashboard-page .tb-dashboard-container {
    border-radius: var(--border-radius-md) !important;
    box-shadow: var(--soft-shadow);
    border: 1px solid rgba(27,46,107,0.06) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mat-mdc-card:hover {
    box-shadow: 0 8px 28px rgba(15,27,64,0.09) !important;
    transform: translateY(-1px);
}

.mat-mdc-dialog-container .mdc-dialog__surface {
    border-radius: var(--border-radius-lg) !important;
    box-shadow: 0 24px 56px rgba(15,27,64,0.12) !important;
}

.mat-mdc-text-field-wrapper {
    border-radius: var(--border-radius-sm) !important;
}

/* ── 5. Toolbar / Cabeçalho ───────────────────────── */
/* Barra clara para o logo colorido, com filete nas cores da marca */
.mat-toolbar.mat-primary {
    background: #ffffff !important;
    color: var(--er-navy) !important;
    box-shadow: 0 2px 12px rgba(15,27,64,0.08) !important;
    border-bottom: 3px solid transparent !important;
    border-image: linear-gradient(90deg, var(--er-navy) 0%, var(--er-blue) 55%, var(--er-red) 100%) 1 !important;
}

.mat-toolbar.mat-primary a,
.mat-toolbar.mat-primary .mat-mdc-button,
.mat-toolbar.mat-primary .mat-mdc-icon-button,
.mat-toolbar.mat-primary .mat-icon {
    color: var(--er-navy) !important;
    fill: var(--er-navy) !important;
}

/* Logo maior no cabeçalho */
.mat-toolbar img,
.mat-toolbar object,
tb-logo img,
tb-logo object,
.tb-logo img,
.tb-logo object {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
}

/* ── 6. Menu lateral ──────────────────────────────── */
.tb-side-menu,
mat-sidenav.tb-side-menu {
    border-right: 1px solid rgba(27,46,107,0.1) !important;
}

.tb-side-menu .mat-nav-list .mat-mdc-list-item {
    margin: 3px 8px !important;
    border-radius: var(--border-radius-sm) !important;
    width: auto !important;
    transition: all 0.2s ease !important;
}

.tb-side-menu .mat-nav-list .mat-mdc-list-item:hover {
    background-color: var(--er-blue-bg) !important;
}

.tb-side-menu .mat-nav-list .mat-mdc-list-item.tb-active {
    background: linear-gradient(90deg, rgba(27,46,107,0.12) 0%, rgba(46,159,230,0.05) 100%) !important;
    border-left: 3px solid var(--er-red) !important;
    padding-left: 5px !important;
}

.tb-side-menu .mat-nav-list .mat-mdc-list-item.tb-active .mat-mdc-list-item-icon,
.tb-side-menu .mat-nav-list .mat-mdc-list-item.tb-active .mdc-list-item__primary-text {
    color: var(--er-navy) !important;
    font-weight: 600 !important;
}

.tb-side-menu .mat-mdc-list-item-icon,
.tb-side-menu .mat-icon {
    transition: color 0.2s ease !important;
}

.tb-side-menu .mat-nav-list .mat-mdc-list-item:hover .mat-icon {
    color: var(--er-blue-dark) !important;
}

.tb-side-menu .tb-nav-header {
    color: var(--er-navy) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    opacity: 0.6 !important;
    padding: 16px 16px 4px !important;
}

/* ── 7. Links e cores primárias ───────────────────── */
.tb-primary-color,
.mat-mdc-icon-button.mat-primary {
    color: var(--er-navy) !important;
}

a {
    color: var(--er-blue-dark) !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}

a:hover { color: var(--er-navy) !important; }

/* Chips e badges */
.mat-mdc-chip.mat-primary {
    background-color: var(--er-blue-bg) !important;
    color: var(--er-navy) !important;
}

/* Tabs */
.mat-mdc-tab-group .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label,
.mat-mdc-tab-group .mat-mdc-tab.mdc-tab--active .mat-icon {
    color: var(--er-navy) !important;
}

.mat-mdc-tab-group .mdc-tab-indicator__content--underline {
    border-color: var(--er-blue) !important;
}

/* Progress bar */
.mat-mdc-progress-bar .mdc-linear-progress__bar-inner {
    border-color: var(--er-blue) !important;
}

/* Toggle */
.mat-mdc-slide-toggle.mat-primary .mdc-switch:enabled .mdc-switch__track::after {
    background-color: var(--er-blue) !important;
}

/* ── 8. Tela de login ─────────────────────────────── */
/* Fundo claro para o logo colorido, com energia das cores da marca */
tb-login {
    background: linear-gradient(135deg, #f4f7fd 0%, #e8f1fb 55%, #dcebf9 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Detalhes decorativos no fundo */
tb-login::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46,159,230,0.14) 0%, rgba(46,159,230,0) 70%);
    top: -120px;
    right: -120px;
    pointer-events: none;
}

tb-login::after {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230,51,41,0.10) 0%, rgba(230,51,41,0) 70%);
    bottom: -80px;
    left: -60px;
    pointer-events: none;
}

tb-login > div,
.tb-login-content {
    background: transparent !important;
    box-shadow: none !important;
}

tb-login .mat-mdc-card {
    background-color: #ffffff !important;
    border: 1px solid rgba(27,46,107,0.08) !important;
    border-top: 4px solid transparent !important;
    border-image: linear-gradient(90deg, var(--er-navy) 0%, var(--er-blue) 55%, var(--er-red) 100%) 1 !important;
    border-radius: 24px !important;
    box-shadow: 0 32px 64px rgba(15,27,64,0.14) !important;
    padding: 32px !important;
}

/* Logo maior na tela de login */
tb-login img,
tb-login object {
    height: 64px !important;
    max-height: 64px !important;
    width: auto !important;
    max-width: 260px !important;
    object-fit: contain !important;
    margin-bottom: 8px !important;
}

tb-login .mat-mdc-card-title,
tb-login .mat-mdc-card-subtitle,
tb-login .tb-login-content,
tb-login span, tb-login div {
    color: var(--er-navy) !important;
}

tb-login a { color: var(--er-blue-dark) !important; }

tb-login .mat-mdc-text-field-wrapper {
    background-color: #f2f6fb !important;
    border-radius: 12px !important;
    border: 1px solid #d7e3f2 !important;
    transition: all 0.3s ease !important;
}

tb-login .mdc-text-field__input,
tb-login .mdc-floating-label,
tb-login .mat-icon {
    color: var(--er-navy) !important;
    fill: var(--er-navy) !important;
}

tb-login .mat-mdc-text-field-wrapper:hover,
tb-login .mat-mdc-text-field-wrapper.mdc-text-field--focused {
    background-color: #ffffff !important;
    border: 1px solid var(--er-blue) !important;
    box-shadow: 0 0 0 3px rgba(46,159,230,0.15) !important;
}

tb-login button[type="submit"] {
    background: linear-gradient(90deg, var(--er-navy) 0%, var(--er-blue-dark) 100%) !important;
    color: #ffffff !important;
    height: 50px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    margin-top: 16px !important;
    box-shadow: 0 6px 20px rgba(27, 46, 107, 0.35) !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

tb-login button[type="submit"]:hover {
    background: linear-gradient(90deg, var(--er-navy-deep) 0%, var(--er-navy) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(46, 159, 230, 0.45) !important;
}