/* Estilos gerais */
.header {
    background-color: #7a9e71;  /* Cor verde mais escura */
    padding: 10px 0;
    display: flex;
    justify-content: space-between;  /* Alinha logo e ícones nas extremidades */
    align-items: center;  /* Centraliza verticalmente */
    border-radius: 10px 10px 0 0;  /* Bordas arredondadas apenas no topo */
}

/* Status Box */
.status-box {
    background-color: #dff0d8; /* Fundo verde claro */
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    margin: 20px auto 0;  /* Centraliza com margem no topo */
    text-align: center;
    border: 2px solid #4a7c3a;  /* Borda verde */
}

.status-box h2 {
    color: #4a7c3a;
    margin: 0 0 10px 0;
}

.status-indicator {
    width: 15px;
    height: 15px;
    background-color: limegreen; /* Bolinha verde (indicador de status) */
    border-radius: 50%;  /* Formato circular */
    display: inline-block;
    margin-left: 5px;
}

/* Estilo dos botões no modo manual (padrão) */
.device-btn {
    background-color: #e0e0e0; /* Cinza para modo automático (desativado por padrão) */
    color: #9e9e9e;
    border: none;
    padding: 12px 8px; /* Ajuste no padding */
    border-radius: 8px;
    cursor: not-allowed;  /* Cursor "não permitido" (modo automático) */
    font-size: 0.95rem;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    transition: all 0.3s ease;  /* Efeito suave ao hover */
    pointer-events: none; /* Desativa cliques no modo automático */
    margin: 20px auto 0;
}

/* Efeito hover (só no modo manual) */
.device-btn:hover {
    background-color: #7a9e71; /* Verde ao passar o mouse */
    color: white;
    transform: translateY(-2px); /* Levanta o botão */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Sombra */
    margin: 20px auto 0;
}

.device-btn.active {
    background-color: #4CAF50;
    color: white;
}
.device-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modo toggle */
.mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    position: relative;
}

.mode-icon {
    width: 60px;
    margin: 0 15px;
    transition: all 0.3s ease; /* Efeito suave */
}

/* Ícone do modo automático (opacidade baixa quando desativado) */
.auto-icon {
    opacity: 0.6;
}

/* Ícone do modo manual (destaque quando ativado) */
.manual-icon {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(74, 124, 58, 0.5)); /* Sombra verde */
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cce3c1; /* Fundo do toggle (verde claro) */
    border: 2px solid #2f6532; /* Borda verde escura */
    border-radius: 30px; /* Arredondado */
    transition: .4s; /* Animação suave */
}

.slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 2px;
    background-color: #2f6532;  /* Bolinha verde escura */
    border-radius: 50%;
    transition: .4s;
}

/* Quando o toggle está ativado (modo automático) */
input:checked + .slider {
    background-color: #2f6532; /* Fundo verde escuro */
}

input:checked + .slider:before {
    transform: translateX(28px); /* Move a bolinha para a direita */
    background-color: white; /* Bolinha branca */
}

/* Feedback visual do modo */
.mode-status {
    margin-left: 15px;
    font-weight: bold;
    color: #4a7c3a;
    min-width: 100px;
}

/* Quando no modo automático */
/* Efeito hover apenas no modo manual */
#modeToggle:not(:checked) ~ .status-box .buttons-container .device-btn:hover,
.container:has(#modeToggle:not(:checked)) .buttons-container .device-btn:hover {
    background-color: #7a9e71 !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    margin: 20px auto 0;
}

/* CORREÇÃO DA INDICAÇÃO DE MODO */
/* Modo Automático ATIVADO (checkbox marcado) */
#modeToggle:checked ~ .auto-icon,
.container:has(#modeToggle:checked) .auto-icon {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(74, 124, 58, 0.5));
}

#modeToggle:checked ~ .manual-icon,
.container:has(#modeToggle:checked) .manual-icon {
    opacity: 0.6;
    filter: none;
}

#modeToggle:checked ~ .mode-status::before,
.container:has(#modeToggle:checked) .mode-status::before {
    content: "";
}

/* Modo Manual ATIVADO (checkbox NÃO marcado) */
#modeToggle:not(:checked) ~ .auto-icon,
.container:has(#modeToggle:not(:checked)) .auto-icon {
    opacity: 0.6;
    filter: none;
}

#modeToggle:not(:checked) ~ .manual-icon,
.container:has(#modeToggle:not(:checked)) .manual-icon {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(74, 124, 58, 0.5));
}

#modeToggle:not(:checked) ~ .mode-status::before,
.container:has(#modeToggle:not(:checked)) .mode-status::before {
    content: "";
}


/* Painel de sensores */
.sensor-panel {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    margin: 20px auto 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.sensor-panel h3 {
    color: #4a7c3a;
    text-align: center;
    margin: 0 0 15px 0;
    font-size: 1.2rem;
}

.sensor-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.sensor-card {
    background-color: #f0f7eb; /* Fundo verde claro */
    border-radius: 8px;
    padding: 12px;
    margin: 20px auto 0;
    border: 1px solid #cce3c1; /* Borda sutil */
}

.sensor-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.sensor-header img {
    width: 25px; /* Tamanho dos ícones (sol, termômetro, etc.) */
    margin-right: 10px;
}

.sensor-header span {
    font-weight: bold;
    color: #2f6532;
    font-size: 1rem;
}

.sensor-values {
    display: flex;
    justify-content: space-between;
}

.sensor-value, .sensor-range {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sensor-value span:first-child,
.sensor-range span {
    font-size: 0.8rem;
    color: #666;
}

.current-value {
    font-weight: bold;
    color: #4a7c3a;  /* Verde escuro para valores */
    font-size: 1.1rem;
}

/* Responsividade */
@media (min-width: 600px) {
    .sensor-grid {
        grid-template-columns: repeat(2, 1fr); /* Transforma o grid de 1 para 2 colunas */
    }
    
    .mode-icon {
        width: 70px; /* Aumenta o tamanho dos ícones (automático/manual) */
    }
}

#modeToggle:not(:checked) ~ .status-box .buttons-container .device-btn,
.container:has(#modeToggle:not(:checked)) .buttons-container .device-btn {
    background-color: #9ac779 !important;  /* Verde claro (ativo) */
    color: #2f6532 !important;  /* Texto verde escuro */
    cursor: pointer !important;  /* Cursor clicável */
    pointer-events: auto !important;  /* Habilita interação */
    border: none !important;
    margin: 20px auto 0;
}

@media (max-width: 400px) {
.buttons-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 2 botões por linha */
    gap: 15px;  /* Espaçamento entre botões */
    padding: 15px;
    width: 100%;
    margin: 20px auto 0;
}

.buttons-container .device-btn {
    background-color: #e0e0e0;  /* Mantém cinza (modo automático) */
    color: #9e9e9e;
    cursor: not-allowed;  /* Cursor "não permitido" */
    pointer-events: none;  /* Desativa cliques */
    border: 1px solid #cccccc;
    margin: 20px auto 0;
}

    .mode-toggle {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .mode-icon {
        width: 50px;
    }
    
    .mode-status {
        width: 100%;
        text-align: center;
    }
}