.error-alert {
    color: red;
    margin-top: 10px;
    font-size: 17px;
    text-align: center;
    text-decoration: none;
    margin-bottom: 10px;
}


.page-ticket-panel {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.calendar-section-ticket {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.calendar-ticket {
    background-color: #F4F4F4;
    padding: 20px;
    border-radius: 5px;
}

.list-tickets {
    width: 100%;
    overflow-x: hidden;
}

.battery-tags-tickets {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

    .battery-tags-tickets span {
        font-weight: 600;
        font-size: 20px;
    }

    .battery-tags-tickets div {
        display: flex;
        gap: 10px;
    }

        .battery-tags-tickets div span {
            display: flex;
            gap: 10px;
            color: #515151;
        }

.battery-tags-red-tickets {
    background-color: #E40E18;
    padding: 0 40px;
    border-radius: 5px;
}

.battery-tags-yellow-tickets {
    background-color: #FF9D00;
    padding: 0 40px;
    border-radius: 5px;
}

.battery-tags-green-tickets {
    background-color: #00FF44;
    padding: 0 40px;
    border-radius: 5px;
}

.list-title-tickets {
    display: grid;
    grid-template-columns: 0.5fr 0.7fr 1fr 2fr 3fr 2fr 3fr 0fr;
    background-color: #F4F4F4;
    padding: 12px 20px;
    font-weight: bold;
    justify-content: space-between;
    border-radius: 5px;
}

.list-item-tickets {
    display: grid;
    grid-template-columns: 0.5fr 0.7fr 1fr 2fr 3fr 2fr 3fr 0fr;
    background-color: #FFFFFF;
    padding: 12px 20px;
    justify-content: space-between;
    border-radius: 5px;
    margin: 10px 0;
}


.sync-container-tickets {
    display: flex;
    justify-content: flex-start; 
    cursor: pointer;
}


.sync-container-tickets > span.sync-message-tickets {
    display: flex;
    background-color: #FFDE21;
    color: #d9534f;
    border-radius: 12px;
    padding: 5px;
    max-width: 35px;
    font-weight: bold;
}

    .sync-container-tickets > span.sync-message-tickets img {
        width: 25px;
        height: 25px;
    }

.list-funtion-tickets div {
    padding: 5px;
    background-color: black;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

    .list-funtion-tickets div p {
        margin-top: -10px;
        font-size: 30px;
        margin-left: 3px;
    }


.modal-overlay-ticket {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    margin-left: -140px;
}

.modal-ticket {
    background-color: #F4F4F4;
    border-radius: 8px;
    padding: 10px;
    width: 120px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 20;
    margin-right: 20px;
}

    .modal-ticket ul {
        list-style: none;
        margin: 0;
        padding: 0 10px;
    }

        .modal-ticket ul li {
            margin: 10px 0;
        }

            .modal-ticket ul li a {
                color: black;
                text-decoration: none;
                font-size: 15px;
                cursor: pointer;
            }

                .modal-ticket ul li a:hover {
                    text-decoration: underline;
                }

.no-result-message-office {
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 100px;
}

@media (max-width: 1326px) {
    .page-ticket-panel {
        flex-direction: column;
    }
}


@media (max-width: 550px) {

    .list-funtion-tickets div p {
        margin-left: 4px;
    }

    /* Estilos das tags (mantidos) */
    .battery-tags-tickets {
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex-wrap: wrap;
    }

        .battery-tags-tickets span {
            font-weight: 500;
            font-size: 15px;
        }

    /* --- INÍCIO DA REFORMULAÇÃO RESPONSIVA (VERSÃO FINAL E CORRIGIDA) --- */

    /* 1. Esconde o cabeçalho da tabela no mobile */
    .list-title-tickets {
        display: none;
    }

    /* 2. Estrutura principal do card em Grid */
    .list-item-tickets {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 colunas de tamanho igual */
        gap: 5px 10px; /* 20px de espaço entre linhas, 15px entre colunas */
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

        /* 3. Estilo para CADA item da grade (label + valor) */
        .list-item-tickets > span,
        .sync-container-tickets,
        .list-funtion-tickets {
            padding: 0; /* Remove padding antigo para controlar o espaçamento com o gap */
        }

            /* 4. A REGRA PRINCIPAL: Label em cima, Valor embaixo, para TODOS */
            .list-item-tickets > span::before,
            .sync-container-tickets::before,
            .list-funtion-tickets::before {
                content: '...'; /* Definido abaixo para cada item */
                display: block; /* Força o label a ficar em uma linha própria */
                font-size: 12px;
                font-weight: 500;
                color: #515151;
                text-transform: uppercase;
                margin-bottom: 4px;
                min-width: 0; /* Reseta o min-width antigo que não é mais necessário */
            }

        /* Estilo do Valor (o texto do span/conteúdo do container) */
        .list-item-tickets > span,
        .list-item-tickets > div { /* Aplica ao container de sync e function também */
            font-weight: 600;
            color: #111;
        }

            /* 5. Define o texto de CADA label, sem exceções */
            .list-item-tickets > span:nth-of-type(1)::before {
                content: 'Item';
            }

            .list-item-tickets > span:nth-of-type(2)::before {
                content: 'Pago';
            }

            .list-item-tickets > span:nth-of-type(3)::before {
                content: 'Data/Hora';
            }

            .list-item-tickets > span:nth-of-type(4)::before {
                content: 'Bateria';
            }

            .list-item-tickets > span:nth-of-type(5)::before {
                content: 'Cliente';
            }

            .list-item-tickets > span:nth-of-type(6)::before {
                content: 'Produto';
            }

    .sync-container-tickets::before {
        content: 'Status';
    }

    .list-funtion-tickets::before {
        content: 'Ações';
    }

    /* 6. Garante que os containers de Status e Ações se comportem como blocos */
    .sync-container-tickets, .list-funtion-tickets {
        display: block; /* Garante o comportamento de empilhamento do label/valor */
    }

        /* Garante que o span interno do status não tenha um ::before para não duplicar */
        .sync-container-tickets > span.sync-message-tickets::before {
            content: none;
        }

        /* Estilo do botão de ações */
        .list-funtion-tickets div {
            /* O estilo original do botão já é adequado */
        }
}