/* =====================================================
   1. VARIÁVEIS GLOBAIS E SCROLLBARS MODERNAS
====================================================== */
:root {
    --tb-primary-color: #773DFA !important;
    --tb-primary-500: #773DFA !important;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --soft-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    --hover-shadow: 0 12px 32px rgba(119, 61, 250, 0.12) !important;
}

/* Barras de rolagem invisíveis e modernas (estilo macOS/Mobile) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* =====================================================
   2. BOTÕES PRIMÁRIOS E FLOATING ACTION BUTTONS (FAB)
====================================================== */
.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: #773DFA !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important; 
    box-shadow: 0 4px 12px rgba(119, 61, 250, 0.2) !important;
}

/* Efeito de hover moderno nos botões */
.mat-mdc-raised-button.mat-primary:hover,
.mat-mdc-fab.mat-primary:hover {
    background-color: #5c2bbd !important;
    transform: translateY(-2px);
    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;
}

/* =====================================================
   3. CARDS, PAINÉIS E MODAIS (A Mágica da Modernidade)
====================================================== */
/* Suaviza as caixas de widgets e dashboards */
.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(0, 0, 0, 0.03) !important;
    transition: box-shadow 0.3s ease;
}

.mat-mdc-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
}

/* Modais de configuração e popup muito mais limpos */
.mat-mdc-dialog-container .mdc-dialog__surface {
    border-radius: var(--border-radius-lg) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.1) !important;
}

/* Campos de formulário (Inputs) com estilo mais contemporâneo */
.mat-mdc-text-field-wrapper {
    border-radius: var(--border-radius-sm) !important;
}

/* =====================================================
   4. TOOLBAR SUPERIOR E MENUS
====================================================== */
.mat-toolbar.mat-primary {
    background-color: #773DFA !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.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: #ffffff !important;
    fill: #ffffff !important;
}

/* =====================================================
   5. MENU LATERAL (SIDE MENU)
====================================================== */
/* Deixa o menu com um espaçamento interno mais elegante */
.tb-side-menu .mat-nav-list .mat-mdc-list-item {
    margin: 4px 8px !important;
    border-radius: var(--border-radius-sm) !important;
    width: auto !important;
    transition: background-color 0.2s ease !important;
}

.tb-side-menu .mat-nav-list .mat-mdc-list-item.tb-active {
    background-color: rgba(119, 61, 250, 0.08) !important;
    border-left: none !important; /* Remove aquela barra lateral dura antiga */
}

.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: #773DFA !important;
    font-weight: 600 !important;
}

/* =====================================================
   6. LINKS GERAIS E ELEMENTOS ISOLADOS
====================================================== */
.tb-primary-color,
.mat-mdc-icon-button.mat-primary {
    color: #773DFA !important;
}

a {
    color: #773DFA !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}

a:hover {
    color: #5c2bbd !important;
}

/* =====================================================
   7. TELA DE LOGIN (DARK GLASSMORPHISM)
====================================================== */

/* 1. Mantém o gradiente de fundo usando suas cores */
tb-login {
    background: linear-gradient(135deg, #305680 0%, #773DFA 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Remove fundos brancos residuais do ThingsBoard */
tb-login > div, 
.tb-login-content {
    background: transparent !important;
    box-shadow: none !important;
}

/* 2. O Card de Login com Efeito de Vidro Escuro */
tb-login .mat-mdc-card {
    background-color: rgba(0, 0, 0, 0.45) !important; /* Fundo escuro semi-transparente */
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4) !important;
    padding: 30px !important;
}

/* 3. Força textos, links e títulos para branco absoluto */
tb-login .mat-mdc-card-title,
tb-login .mat-mdc-card-subtitle,
tb-login .tb-login-content,
tb-login span,
tb-login div,
tb-login a {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important; /* Ajuda extra na leitura */
}

/* 4. Campos de formulário adaptados para o tema escuro */
tb-login .mat-mdc-text-field-wrapper {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Quase transparente */
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

/* Cor do texto digitado, dos labels flutuantes e dos ícones */
tb-login .mdc-text-field__input,
tb-login .mdc-floating-label,
tb-login .mat-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Ajuste quando o usuário clica no input */
tb-login .mat-mdc-text-field-wrapper:hover,
tb-login .mat-mdc-text-field-wrapper.mdc-text-field--focused {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* 5. Corrige a cor do Botão "Entrar" (Tira o Laranja e aplica o seu Roxo) */
tb-login button[type="submit"] {
    background-color: #773DFA !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: 15px !important;
    box-shadow: 0 8px 20px rgba(119, 61, 250, 0.4) !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}

tb-login button[type="submit"]:hover {
    background-color: #5c2bbd !important;
    transform: translateY(-2px);
}