/* ============================================================
   uaitech-theme.css — v4 (Dark/Light Mode Support)
   Apenas CORES, header e estilos mínimos de tela.
   NENHUM hack de altura/flex — o sap.m.Page cuida do layout.
   ============================================================ */

/* === Override de cores do Horizon (Light Mode) === */
:root,
[data-theme="light"] {
    --sapBrandColor:               #FF4545;
    --sapHighlightColor:           #FF4545;
    --sapActiveColor:              #CC3333;

    --sapButton_Emphasized_Background:        #FF4545;
    --sapButton_Emphasized_BorderColor:       #FF4545;
    --sapButton_Emphasized_Hover_Background:  #CC3333;
    --sapButton_Emphasized_Hover_BorderColor: #CC3333;
    --sapButton_Emphasized_Active_Background: #A82828;
    --sapButton_Emphasized_TextColor:         #FFFFFF;

    --sapLinkColor:          #FF4545;
    --sapLink_Hover_Color:   #CC3333;
    --sapSelectedColor:      #FF4545;
    --sapContent_FocusColor: #FF4545;

    /* Custom theme colors for light mode */
    --uaitechHeader_BG:         #2B2B2B;
    --uaitechHeader_Text:       #FFFFFF;
    --uaitechHeader_SubText:    #CCCCCC;
    --uaitechHeader_Border:     #FF4545;
    --uaitechCardShadow:        rgba(0, 0, 0, 0.08);
    --uaitechCardHoverShadow:   rgba(255, 69, 69, 0.15);
}

/* === Override para Dark Mode === */
[data-theme="dark"] {
    --sapBrandColor:               #FF6B6B;
    --sapHighlightColor:           #FF6B6B;
    --sapActiveColor:              #FF8888;

    --sapButton_Emphasized_Background:        #FF6B6B;
    --sapButton_Emphasized_BorderColor:       #FF6B6B;
    --sapButton_Emphasized_Hover_Background:  #FF8888;
    --sapButton_Emphasized_Hover_BorderColor: #FF8888;
    --sapButton_Emphasized_Active_Background: #FF4545;
    --sapButton_Emphasized_TextColor:         #FFFFFF;

    --sapLinkColor:          #FF8888;
    --sapLink_Hover_Color:   #FFAAAA;
    --sapSelectedColor:      #FF6B6B;
    --sapContent_FocusColor: #FF6B6B;

    /* Custom theme colors for dark mode */
    --uaitechHeader_BG:         #1A1A1A;
    --uaitechHeader_Text:       #F5F5F5;
    --uaitechHeader_SubText:    #B0B0B0;
    --uaitechHeader_Border:     #FF6B6B;
    --uaitechCardShadow:        rgba(0, 0, 0, 0.3);
    --uaitechCardHoverShadow:   rgba(255, 107, 107, 0.2);
}

/* ============================================================
   CABEÇALHO (sap.m.Bar com class uaitechHeader)
   ============================================================ */

/* Barra com borda inferior vermelha (assinatura Uai-Tech) */
.uaitechHeader.sapMBar,
.uaitechHeader .sapMBarPH,
.uaitechHeader .sapMBarLeft,
.uaitechHeader .sapMBarRight {
    background-color: var(--uaitechHeader_BG) !important;
}
.uaitechHeader.sapMBar {
    border-bottom: 4px solid var(--uaitechHeader_Border) !important;
    height: 3rem;
}

/* Título do cabeçalho — legível em ambos os modos */
.uaitechHeader .uaitechHeaderTitle,
.uaitechHeader .uaitechHeaderTitle .sapMTitleInner,
.uaitechHeader .sapMTitle {
    color: var(--uaitechHeader_Text) !important;
    font-weight: 600;
}

/* Logo */
.uaitechHeader .uaitechLogo {
    margin-right: 0.75rem;
}

/* Nome do usuário no header */
.uaitechHeader .uaitechHeaderUserName {
    color: var(--uaitechHeader_SubText) !important;
    font-size: 0.875rem;
    margin-right: 0.5rem;
    line-height: 3rem;
}

/* ── Botões tema e logout do header ──
   Mesma técnica dos botões de navegação: definir color no .sapMBtnInner
   para herdar ao ícone filho (o SAP injeta CSS dinâmico, então o !important
   no filho perde — mas herança de color no pai vence). */

/* Fundo transparente em ambos os botões */
.uaitechHeader .uaitechHeaderThemeToggle .sapMBtnInner,
.uaitechHeader .uaitechHeaderLogout .sapMBtnInner {
    background-color : transparent !important;
    border-color     : transparent !important;
    box-shadow       : none !important;
}

/* Logout — sempre branco, hover vermelho */
.uaitechHeader .uaitechHeaderLogout .sapMBtnInner {
    color : #ffffff !important;
}
.uaitechHeader .uaitechHeaderLogout:hover .sapMBtnInner {
    color : #FF4545 !important;
}

/* Lâmpada — ACESA no modo claro (amarela com brilho) */
[data-theme="light"] .uaitechHeader .uaitechHeaderThemeToggle .sapMBtnInner {
    color       : #FFC93C !important;
    text-shadow : 0 0 8px rgba(255, 201, 60, 0.9) !important;
}

/* Lâmpada — APAGADA no modo escuro (cinza, sem brilho) */
[data-theme="dark"] .uaitechHeader .uaitechHeaderThemeToggle .sapMBtnInner {
    color       : #6B6B6B !important;
    text-shadow : none !important;
}

/* Hover na lâmpada — destaque vermelho Uai-Tech */
.uaitechHeader .uaitechHeaderThemeToggle:hover .sapMBtnInner {
    color       : #FF4545 !important;
    text-shadow : 0 0 8px rgba(255, 69, 69, 0.7) !important;
}

/* Avatar — fundo Uai-Tech dinâmico */
.uaitechHeader .sapFAvatar {
    background-color: var(--sapBrandColor) !important;
    color: #FFFFFF !important;
}

/* Botões de navegação do menu central */
.uaitechHeader .uaitechNavBtn .sapMBtnInner {
    color: var(--uaitechHeader_SubText) !important;
    font-size: 0.8rem !important;
}
.uaitechHeader .uaitechNavBtn .sapMBtnIcon {
    color: var(--uaitechHeader_SubText) !important;
    font-size: 0.85rem !important;
}
.uaitechHeader .uaitechNavBtn:hover .sapMBtnInner,
.uaitechHeader .uaitechNavBtn:hover .sapMBtnIcon {
    color: var(--uaitechHeader_Border) !important;
}
/* Área central do header */
.uaitechHeader .sapMBarPH {
    background-color: var(--uaitechHeader_BG) !important;
}

/* ============================================================
   CARDS DA HOME
   ============================================================ */

.uaitechWelcomeCard {
    box-shadow: 0 2px 8px var(--uaitechCardShadow);
}

.uaitechCardFase {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.uaitechCardFase:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--uaitechCardHoverShadow);
}

/* Card ativo na Home (Dashboard — clicável) */
.uaitechCardAtivo {
    border-left: 4px solid var(--sapBrandColor) !important;
}

/* ============================================================
   DASHBOARD — KPI TILES
   ============================================================ */

/* Tamanho padrão dos tiles KPI */
.uaitechKpiTile.sapMGT {
    width: 180px !important;
    height: 160px !important;
}

/* ============================================================
   DASHBOARD — PAINEL DE ALERTAS
   ============================================================ */

.uaitechDashboardAlertas.sapMPanel {
    border-top: 3px solid var(--sapBrandColor) !important;
}

/* ============================================================
   TELA DE LOGIN
   ============================================================ */

/* Card centralizado */
.uaitechLoginCard.sapMPanel {
    box-shadow: 0 4px 20px var(--uaitechCardShadow) !important;
    border-radius: 8px !important;
    border: none !important;
    overflow: hidden !important; /* garante que a área do logo respeite o border-radius */
}

/* Remove padding interno do Panel para a área do logo poder ir de borda a borda */
.uaitechLoginCard.sapMPanel > .sapMPanelContent {
    padding: 0 !important;
}

/* Área do logo: fundo Uai-Tech + borda dinâmica.
   Colocada diretamente no Panel (sem VBox pai com margin) para ocupar
   100% da largura do card. O logo fica legível em ambos os modos. */
.uaitechLoginLogoArea {
    background-color: var(--uaitechHeader_BG) !important;
    border-bottom: 3px solid var(--uaitechHeader_Border);
    padding: 1.5rem 1rem;
    box-sizing: border-box;
}

/* Rodabé discreto */
.uaitechLoginFooter {
    color: var(--uaitechHeader_SubText) !important;
    font-size: 0.8rem !important;
}