/* ==========================================================================
   ROTA 88 - TEMA DE ALTO CONTRASTE & IDENTIDADE VISUAL PROFISSIONAL
   ========================================================================== */

/* 1. Logotipo Rota88 no Topo Esquerdo */
header a[href="/"],
[role="banner"] a[href="/"],
nav a[href="/"],
a.navbar-logo,
a.logo {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 170px !important;
    width: 170px !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

header a[href="/"] img,
[role="banner"] a[href="/"] img,
nav a[href="/"] img,
img[src*="fleetbase-icon"],
img[alt="Fleetbase"] {
    content: url('/images/rota88-logo.svg') !important;
    height: 38px !important;
    width: 170px !important;
    min-width: 170px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    display: inline-block !important;
}

/* 2. Botão do Menu Lateral (Sidebar Toggle) - Destaque Visual Dourado e Alto Contraste */
.sidebar-toggle-button,
header button.sidebar-toggle-button,
[role="banner"] button.sidebar-toggle-button,
button.next-org-button-trigger:has(#sidebar-toggle-icon) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    width: 38px !important;
    height: 34px !important;
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1.5px solid #f59e0b !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    margin-right: 14px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: all 0.2s ease-in-out !important;
    visibility: visible !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3) !important;
}

.sidebar-toggle-button:hover,
header button.sidebar-toggle-button:hover,
[role="banner"] button.sidebar-toggle-button:hover {
    background: rgba(245, 158, 11, 0.35) !important;
    border-color: #fbbf24 !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6) !important;
}

/* Ícone SVG do Menu Lateral - Linhas e Preenchimento em Branco e Dourado */
#sidebar-toggle-icon,
svg#sidebar-toggle-icon {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

#sidebar-toggle-icon .cls-1,
#sidebar-toggle-icon .cls-3,
#sidebar-toggle-icon path,
#sidebar-toggle-icon rect:not([fill="transparent"]) {
    fill: #ffffff !important;
    opacity: 1 !important;
}

#sidebar-toggle-icon .cls-2,
#sidebar-toggle-icon line {
    stroke: #fbbf24 !important;
    stroke-width: 20px !important;
    stroke-linecap: round !important;
}

.sidebar-toggle-button:hover #sidebar-toggle-icon .cls-1,
.sidebar-toggle-button:hover #sidebar-toggle-icon .cls-3 {
    fill: #fbbf24 !important;
}

/* 3. Cabeçalho Superior em Azul Noturno com Linha de Destaque Dourada */
header, 
[role="banner"] {
    background-color: #0b132b !important;
    border-bottom: 2px solid #f59e0b !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    min-height: 56px !important;
}

/* 4. Textos dos Menus Superiores em BRANCO PURO (Sem cortes/reticências) */
header [role="menubar"] [role="menuitem"],
[role="banner"] [role="menubar"] [role="menuitem"],
header .next-nav-menu-item,
[role="banner"] .next-nav-menu-item {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    opacity: 0.95 !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    overflow: visible !important;
    max-width: none !important;
}

/* Efeito ao passar o mouse nos itens do menu */
header [role="menubar"] [role="menuitem"]:hover,
[role="banner"] [role="menubar"] [role="menuitem"]:hover {
    color: #fbbf24 !important;
    background-color: rgba(245, 158, 11, 0.15) !important;
    opacity: 1 !important;
}

/* Menu Selecionado / Ativo */
header [role="menubar"] [role="menuitem"].active,
[role="banner"] [role="menubar"] [role="menuitem"].active {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #0b132b !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4) !important;
    opacity: 1 !important;
}

/* 5. Ícones e Botões do Topo em Branco Puro e Dourado */
header .snm-more-btn,
header .snm-customise-btn,
[role="banner"] .snm-more-btn,
[role="banner"] .snm-customise-btn {
    color: #ffffff !important;
    opacity: 0.95 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease-in-out !important;
}

header .snm-more-btn svg,
header .snm-customise-btn svg,
[role="banner"] .snm-more-btn svg,
[role="banner"] .snm-customise-btn svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

header .snm-more-btn:hover,
header .snm-customise-btn:hover,
[role="banner"] .snm-more-btn:hover,
[role="banner"] .snm-customise-btn:hover {
    background-color: rgba(245, 158, 11, 0.2) !important;
}

header .snm-more-btn:hover svg,
header .snm-customise-btn:hover svg,
[role="banner"] .snm-more-btn:hover svg,
[role="banner"] .snm-customise-btn:hover svg {
    color: #fbbf24 !important;
    fill: #fbbf24 !important;
}

/* Nome da Organização e Usuário no Topo em BRANCO PURO */
header .next-org-button-trigger,
header .next-org-button-trigger .truncate,
header .next-org-button-trigger [class*="text-gray"],
header .next-user-button-trigger,
header .next-header-menu-item-dd-trigger .truncate,
[role="banner"] .next-org-button-trigger,
[role="banner"] .next-org-button-trigger .truncate,
[role="banner"] .next-org-button-trigger [class*="text-gray"],
[role="banner"] .next-user-button-trigger,
[role="banner"] .next-header-menu-item-dd-trigger .truncate {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Badge 'r' com texto escuro sobre fundo dourado */
header .next-org-button-trigger .org-badge,
[role="banner"] .next-org-button-trigger .org-badge {
    background-color: #f59e0b !important;
    color: #0b132b !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
}

/* Avatar do Usuário com anel dourado sutil */
header .next-user-button-trigger img,
[role="banner"] .next-user-button-trigger img {
    border: 1.8px solid #f59e0b !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5) !important;
}

/* Triggers de Notificações, Globo e Chat */
header .local-selector-tray-trigger svg,
header .chat-tray-panel-trigger svg,
[role="banner"] .local-selector-tray-trigger svg,
[role="banner"] .chat-tray-panel-trigger svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 0.95 !important;
    transition: all 0.2s ease !important;
}

header .local-selector-tray-trigger:hover svg,
header .chat-tray-panel-trigger:hover svg,
[role="banner"] .local-selector-tray-trigger:hover svg,
[role="banner"] .chat-tray-panel-trigger:hover svg {
    color: #fbbf24 !important;
    fill: #fbbf24 !important;
    opacity: 1 !important;
}

/* ==========================================================================
   6. DROPDOWNS E MENUS FLUTUANTES (ALTO CONTRASTE - TEXTO ESCURO NO BRANCO)
   ========================================================================== */
[role="menu"],
.dropdown-menu,
.next-dropdown-menu,
.next-user-button-tray,
.next-org-button-tray,
.next-dd-menu {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px !important;
    padding: 6px !important;
}

/* TEXTOS DENTRO DO DROPDOWN: DEVEM SER ESCUROS PARA TOTAL VISIBILIDADE */
.dropdown-menu a,
.next-dropdown-menu a,
.next-user-button-tray a,
.next-org-button-tray a,
.next-header-dd-menu-item,
.next-dd-item,
[role="menu"] a,
[role="menu"] button,
[role="menu"] span:not(.badge),
[role="menuitem"]:not(header [role="menubar"] [role="menuitem"]) {
    color: #0f172a !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
}

/* Ícones dentro do Dropdown */
.dropdown-menu svg,
.next-dropdown-menu svg,
.next-user-button-tray svg,
.next-org-button-tray svg,
.next-header-dd-menu-item:not(.active) svg,
[role="menu"] svg {
    color: #475569 !important;
    fill: #475569 !important;
    margin-right: 8px !important;
}

/* Hover nos itens do Dropdown */
.next-header-dd-menu-item:hover,
.next-dd-item:hover,
[role="menu"] a:hover,
[role="menu"] button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-radius: 6px !important;
}

.next-header-dd-menu-item:hover svg,
[role="menu"] a:hover svg {
    color: #d97706 !important;
    fill: #d97706 !important;
}

/* Item ativo no Dropdown (ex: Início) */
.next-header-dd-menu-item.active,
[role="menu"] a.active {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #0b132b !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
}

.next-header-dd-menu-item.active svg,
[role="menu"] a.active svg {
    color: #0b132b !important;
    fill: #0b132b !important;
}

/* ==========================================================================
   7. OCULTAR ELEMENTOS INDESEJADOS
   ========================================================================== */
a[href*="fleetbase.io"],
a[href*="github.com/fleetbase"],
a[href*="discord.gg"],
.fleetbase-attribution,
[data-component="fleetbase-blog"],
[data-component="github-card"],
.grid-stack-item:has(a[href*="github.com/fleetbase"]),
.grid-stack-item:has(a[href*="fleetbase.io/blog"]),
.version-tag {
    display: none !important;
}

/* 8. Botões de Ação Primários Dourados */
.btn-primary,
button.btn-primary,
.next-btn-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-color: #f59e0b !important;
    color: #0b132b !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
.next-btn-primary:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #0b132b !important;
}