/* css/components/toolbar.css */
/* v5.0 - Hotbar Dinâmica (Inferior vs Lateral) */

/* 1. ESTILO BASE (Comum para os dois modos) */
#bottom-toolbar {
    position: fixed;
    z-index: 1;
    
    /* Cor e Estilo Industrial/RPG */
    background: #1a1a1a;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    
    /* Layout dos Botões */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
    
    /* Geometria Quadrada */
    border-radius: 0;
    transition: all 0.3s ease;
}

/* 2. MODO RETRATO (Padrão: Celular em pé ou Altura > Largura) */
/* A barra fica no RODAPÉ */
#bottom-toolbar {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    
    flex-direction: row; /* Ícones lado a lado */
    border-top: 2px solid #333;
    border-right: none;
}

/* 3. MODO PAISAGEM (PC ou Celular deitado: Largura > Altura) */
/* A barra vai para a ESQUERDA */
@media (orientation: landscape) {
    #bottom-toolbar {
        top: 0;
        left: 0;
        bottom: auto; /* Anula o bottom */
        
        width: 70px;
        height: 100%;
        
        flex-direction: column; /* Ícones um embaixo do outro */
        border-top: none;
        border-right: 2px solid #333; /* Borda na direita */
    }
}

/* --- ESTILO DOS BOTÕES (Slots) --- */
.tool-button {
    appearance: none;
    outline: none;
    position: relative;
    
    /* Tamanho do Slot */
    width: 54px;
    height: 54px;
    border-radius: 0 !important; /* Quadrado */
    
    /* Visual Slot Vazio */
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #444;
    color: #666;
    
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.1s;
}

.tool-button svg {
    width: 28px; height: 28px;
    stroke-width: 2px; stroke: currentColor; fill: none;
}

.tool-button:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #888;
    color: #ddd;
}

/* Estado Ativo (Equipado) */
.tool-button.active {
    background: #333;
    color: var(--color-primary, #ff6b6b);
    border-color: var(--color-primary, #ff6b6b);
    border-width: 3px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.tool-button.active svg {
    filter: drop-shadow(0 0 3px rgba(255, 107, 107, 0.5));
}

/* --- TOOLTIPS INTELIGENTES --- */
/* Padrão: Tooltip aparece EM CIMA (para barra inferior) */
.tool-button[title]:hover::after {
    content: attr(title);
    position: absolute;
    z-index: 2;
    background: #000; color: #fff;
    padding: 6px 10px;
    font-size: 12px; font-family: monospace; text-transform: uppercase;
    white-space: nowrap; pointer-events: none;
    border: 1px solid #fff;
    
    /* Posição para barra INFERIOR */
    bottom: 65px; left: 50%;
    transform: translateX(-50%);
}

/* No Modo Paisagem: Tooltip aparece NA DIREITA (para barra lateral) */
@media (orientation: landscape) {
    .tool-button[title]:hover::after {
        bottom: auto; left: 65px; /* Joga para a direita do botão */
        top: 50%;
        transform: translateY(-50%); /* Centraliza verticalmente */
    }
}

/* Mobile Touch: Esconde tooltips */
@media (max-width: 600px) {
    #bottom-toolbar { height: 60px; gap: 4px; }
    .tool-button { width: 48px; height: 48px; }
    .tool-button[title]:hover::after { display: none; }
    
    /* Em paisagem no celular, ajusta a largura */
    @media (orientation: landscape) {
        #bottom-toolbar { width: 60px; height: 100%; }
    }
}

/* Display de Coordenadas (HUD) */
#coord-display {
    position: fixed;
    bottom: 100px; /* Acima da Toolbar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 90; /* Abaixo da toolbar (100) mas acima do canvas */
    
    display: flex;
    gap: 20px;
    padding: 8px 20px;
    
    background: rgba(0, 0, 0, 0.6); /* Mais transparente que a toolbar */
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px; /* Levemente arredondado ou 0px se preferir industrial */
    
    font-family: 'Consolas', 'Monaco', monospace; /* Fonte técnica */
    font-size: 14px;
    color: #fff;
    
    opacity: 0; /* Começa invisível */
    transition: opacity 0.3s ease;
    pointer-events: none; /* O mouse passa direto por ele */
}

/* Cores para os Eixos (Padrão 3D: R=X, G=Y, B=Z) */
.coord-val { font-weight: bold; }
.coord-x { color: #ff6b6b; margin-right: 5px; } /* Vermelho */
.coord-y { color: #4ecdc4; margin-right: 5px; } /* Verde/Ciano */
.coord-z { color: #45b7d1; margin-right: 5px; } /* Azul */

/* Remove setas de input number */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
  -moz-appearance: textfield;
}