/* =======================================
   Farol Label Stylesheet
   Autor: GitHub Copilot for Marcelo Macedo (Farol Operacional)
   Descrição: Estilo para aplicar aos labels dos faróis
   ======================================= */

/* Container para alinhar os círculos e seus labels */
.farol-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 10px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Estilo para o texto abaixo dos faróis */
.farol-label-text {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin-top: 8px !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 90px !important;
    transition: all 0.3s ease !important;
    cursor: help !important; /* Indica que há tooltip ao passar o mouse */
}

/* Cores dos textos para tema claro */
.theme-light .farol-green-text,
html:not([data-theme='dark']) .farol-green-text {
    color: #198754 !important;
}

.theme-light .farol-yellow-text,
html:not([data-theme='dark']) .farol-yellow-text {
    color: #cc9a06 !important;
}

.theme-light .farol-red-text,
html:not([data-theme='dark']) .farol-red-text {
    color: #dc3545 !important;
}

.theme-light .farol-gray-text,
html:not([data-theme='dark']) .farol-gray-text {
    color: #6c757d !important;
}

/* Cores dos textos para tema escuro */
.theme-dark .farol-green-text,
html[data-theme='dark'] .farol-green-text {
    color: #2ecc71 !important;
}

.theme-dark .farol-yellow-text,
html[data-theme='dark'] .farol-yellow-text {
    color: #f9ca24 !important;
}

.theme-dark .farol-red-text,
html[data-theme='dark'] .farol-red-text {
    color: #ff6b6b !important;
}

.theme-dark .farol-gray-text,
html[data-theme='dark'] .farol-gray-text {
    color: #a0a0a0 !important;
}

/* Efeito hover para destacar o texto */
.farol-label-text:hover {
    transform: scale(1.05) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* Garante que o círculo do farol fique acima de outros elementos */
.farol-circle {
    z-index: 5 !important;
    position: relative !important;
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    .farol-label-text {
        font-size: 10px !important;
    }
}