@extends('layouts.master')

@section('content')
<div class="new-ouvidoria mt-4">
    <div class="row g-8">
        <div class="col-lg-4">
            <div class="card mb-4 border">
                <div class="card-header bg-dark text-white py-3">
                    <h5 class="mb-0"><i class="bi bi-bar-chart me-2"></i>Estatísticas da Ouvidoria</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="fw-medium">Denúncias</span>
                            <span class="text-dark fw-bold" id="denuncia-percent">0%</span>
                        </div>
                        <div class="progress rounded-0" style="height: 8px;">
                            <div class="progress-bar bg-dark" id="denuncia-bar" role="progressbar" style="width: 0%"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="fw-medium">Reclamações</span>
                            <span class="text-dark fw-bold" id="reclamacao-percent">0%</span>
                        </div>
                        <div class="progress rounded-0" style="height: 8px;">
                            <div class="progress-bar bg-gray-700" id="reclamacao-bar" role="progressbar" style="width: 0%"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="fw-medium">Sugestões</span>
                            <span class="text-dark fw-bold" id="sugestao-percent">0%</span>
                        </div>
                        <div class="progress rounded-0" style="height: 8px;">
                            <div class="progress-bar bg-secondary" id="sugestao-bar" role="progressbar" style="width: 0%"></div>
                        </div>
                    </div>
                    <div class="mb-0">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="fw-medium">Elogios</span>
                            <span class="text-dark fw-bold" id="elogio-percent">0%</span>
                        </div>
                        <div class="progress rounded-0" style="height: 8px;">
                            <div class="progress-bar bg-gray-600" role="progressbar" id="elogio-bar" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-4 border">
                <div class="card-header bg-dark text-white py-3">
                    <h5 class="mb-0"><i class="bi bi-geo-alt me-2"></i>Manifestação Presencial</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <p class="mb-0 fw-medium">Setor</p>
                        <p class="mb-2 text-muted small">Controle Interno</p>
                    </div>
                    <div class="mb-3">
                        <p class="mb-0 fw-medium">Endereço</p>
                        <p class="mb-1 text-muted small">Rua Francisco Albino, nº511</p>
                        <p class="mb-2 text-muted small">Centro - Inocência/MS. CEP: 79580-023</p>
                    </div>
                    <div class="mb-3">
                        <p class="mb-0 fw-medium">Responsável</p>
                        <p class="mb-2 text-muted small">Bruna da Silva Ferreira</p>
                    </div>
                    <div class="mb-3">
                        <p class="mb-0 fw-medium">E-mail</p>
                        <p class="mb-2 text-muted small">ouvidoria@camarainocencia.ms.gov.br</p>
                    </div>
                    <div class="mb-3">
                        <p class="mb-0 fw-medium">Telefone</p>
                        <p class="mb-2 text-muted small">(xx) xxxxxxx</p>
                    </div>
                    <div class="mb-0">
                        <p class="mb-0 fw-medium">Horário de Atendimento</p>
                        <p class="mb-0 text-muted small">De segunda a sexta, das 7:00 hrs as 11:00 hrs e 13:00 as 16:00 hrs.</p>
                    </div>
                </div>
            </div>
            <div class="card border">
                <div class="card-header bg-dark text-white py-3">
                    <h5 class="mb-0"><i class="bi bi-phone me-2"></i>Aplicativo da Ouvidoria</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-3">Baixe nosso aplicativo para acompanhar suas manifestações</p>
                    <div class="row g-2">
                        <div class="col-6">
                            <div class="border p-2 text-center">
                                <p class="mb-1 fw-medium small">Google Play</p>
                                <img src="https://camaramunicipaldejardim.ms.gov.br/assets/images/google.png" alt="Google Play"
                                     class="img-fluid mb-2" style="max-height: 80px;">
                                <img src="https://camaramunicipaldejardim.ms.gov.br/assets/images/QRCode_F%C3%A1cil.png" width="80" height="80"
                                     alt="QR Code" class="img-fluid">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="border p-2 text-center">
                                <p class="mb-1 fw-medium small">Apple Store</p>
                                <br />
                                <img src="https://camaramunicipaldejardim.ms.gov.br/assets/images/Apple_Store.png" alt="Apple Store"
                                     class="img-fluid mb-1" style="max-height: 35px;">
                                <br /><br />
                                <img src="https://camaramunicipaldejardim.ms.gov.br/assets/images/QRCode_F%C3%A1cil.png" width="82" height="82"
                                     alt="QR Code" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <!-- Busca de Protocolo -->
            <div class="card mb-4 border">
                <div class="card-header bg-dark text-white py-3">
                    <h5 class="mb-0"><i class="bi bi-search me-2"></i>Acompanhamento de Manifestação</h5>
                </div>
                <div class="card-body">
                    <form id="busca-protocolo-form" class="row g-2 align-items-center">
                        {!! csrf_field() !!}
                        <input type="hidden" name="entidade_id" value="cminocencia">
                        <div class="col-md-8">
                            <input type="text" name="protocolo" class="form-control rounded-0" placeholder="Informe o número do protocolo" required>
                        </div>
                        <div class="col-md-4">
                            <button type="button" id="buscar-protocolo-btn" class="btn btn-dark w-100 rounded-0">
                                <i class="bi bi-search me-1"></i> Consultar
                            </button>
                        </div>
                    </form>

                    <div id="status-container" class="mt-4" style="display: none;">
                        <h6 class="mb-3 border-bottom pb-2">Status da Manifestação</h6>

                        <div class="status-timeline mb-4">
                            <div class="timeline-progress">
                                <div class="timeline-step completed">
                                    <div class="timeline-dot"></div>
                                    <span class="timeline-label">Registrada</span>
                                </div>
                                <div class="timeline-step completed">
                                    <div class="timeline-dot"></div>
                                    <span class="timeline-label">Em análise</span>
                                </div>
                                <div class="timeline-step active">
                                    <div class="timeline-dot"></div>
                                    <span class="timeline-label">Em andamento</span>
                                </div>
                                <div class="timeline-step">
                                    <div class="timeline-dot"></div>
                                    <span class="timeline-label">Concluída</span>
                                </div>
                            </div>
                        </div>

                        <div class="manifestation-details">
                            <h6 class="mb-3 border-bottom pb-2">Detalhes da Manifestação</h6>
                            <div class="bg-light p-3">
                                <div class="row">
                                    <div class="col-md-6">
                                        <p class="mb-2"><strong>Protocolo:</strong> <span id="protocol-number">20231021143025</span></p>
                                        <p class="mb-2"><strong>Assunto:</strong> Solicitação de informação</p>
                                    </div>
                                    <div class="col-md-6">
                                        <p class="mb-2"><strong>Data de abertura:</strong> 21/10/2023</p>
                                        <p class="mb-0"><strong>Previsão de conclusão:</strong> 30/10/2023</p>
                                    </div>
                                    
                                    <div class="col-12 mt-3" id="response-container" style="display: none;">
                                        <h6 class="mb-2">Resposta da Ouvidoria:</h6>
                                        <div class="p-3 bg-white border rounded">
                                            <p id="response-text" class="mb-0 text-muted small"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card border">
                <div class="card-header bg-dark text-white py-3">
                    <h4 class="mb-0"><i class="bi bi-pencil-square me-2"></i>Formulário de Ouvidoria</h4>
                </div>
                <div class="card-body p-4">

                    <div id="alert-container"></div>

                    <form id="ouvidoria-form" enctype="multipart/form-data">
                        {!! csrf_field() !!}
                        <input type="hidden" name="entidade_id" value="cminocencia">

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Tipo de Manifestação <span
                                        class="text-danger">*</span></label>
                                <select name="tipo" class="form-select rounded-0" required>
                                    <option value="">Selecione o tipo</option>
                                    <option value="Denúncia">Denúncia</option>
                                    <option value="Reclamação">Reclamação</option>
                                    <option value="Sugestão">Sugestão</option>
                                    <option value="Elogio">Elogio</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Assunto <span class="text-danger">*</span></label>
                                <input type="text" name="assunto" class="form-control rounded-0" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-medium">Descrição <span class="text-danger">*</span></label>
                            <textarea name="descricao" rows="4" class="form-control rounded-0"
                                      placeholder="Descreva detalhadamente sua manifestação..." required></textarea>
                            <div class="form-text">Máximo de 5000 caracteres</div>
                        </div>

                        <div class="form-check form-switch mb-3">
                            <input type="checkbox" class="form-check-input" id="anonimo-checkbox" name="anonimo"
                                   value="1">
                            <label class="form-check-label" for="anonimo-checkbox">Enviar como anônimo</label>
                        </div>

                        <div id="dados-pessoais">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-medium">Nome <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control rounded-0" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-medium">E-mail <span
                                            class="text-danger">*</span></label>
                                    <input type="email" name="email" class="form-control rounded-0" required>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-medium">Parlamentar</label>
                            <select name="parlamentar_id" id="parlamentar-select" class="form-select rounded-0">
                                <option value="">Carregando parlamentares...</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-medium">Anexos (PDF, JPG, PNG)</label>
                            <input type="file" name="anexo[]" class="form-control rounded-0" multiple>
                            <div class="form-text">Tamanho máximo por arquivo: 5MB. Formatos aceitos: PDF, JPG, PNG
                            </div>
                        </div>
                        
                        <!-- AQUI ESTÁ A CAIXINHA DO reCAPTCHA -->
                        <div class="g-recaptcha" data-sitekey="6LcME9YrAAAAAL-9-AZeJ4c97eCuKWMtTE4UbmoH"
                             style="margin: 0 auto; display: inline-block;">
                        </div>
                        <br />

                        <div class="d-grid">
                            <button type="button" id="enviar-manifestacao-btn"
                                    class="btn btn-dark btn-lg rounded-0 fw-medium py-3">
                                <i class="bi bi-send me-2"></i>Enviar Manifestação
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Informações de Prazos -->
        <div class="col-lg-4">
            <div class="card border mb-4">
                <div class="card-header bg-dark text-white py-3">
                    <h5 class="mb-0"><i class="bi bi-clock me-2"></i>Informações de Prazos</h5>
                </div>
                <div class="card-body">
                    <!-- Prazo de Resposta -->
                    <div class="mb-3">
                        <h6 class="fw-medium">Prazos de Resposta</h6>
                        <p class="text-muted small mb-0">
                            O prazo para resposta ao cidadão é de <strong>30 dias</strong> a contar da data em que a
                            manifestação foi registrada.
                            Este prazo pode ser prorrogado por mais 30 dias, mediante justificativa.
                        </p>
                    </div>

                    <!-- O que é a Ouvidoria -->
                    <div class="mb-3">
                        <h6 class="fw-medium">O que é a Ouvidoria?</h6>
                        <p class="text-muted small mb-0">
                            A ouvidoria funciona como uma ponte entre você e a Administração Pública (órgãos, entidades
                            e agentes públicos).
                            Recebe manifestações, analisa, orienta e encaminha às áreas responsáveis pelo tratamento ou
                            apuração.
                        </p>
                    </div>

                    <!-- Atividades da Ouvidoria -->
                    <div>
                        <h6 class="fw-medium">Atividades da Ouvidoria</h6>
                        <p class="text-muted small mb-0">
                            Além de receber e encaminhar manifestações, a ouvidoria identifica melhorias, propõe
                            mudanças
                            e aponta situações irregulares nos órgãos ou entidades, com base nas informações trazidas
                            pelos cidadãos.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<!-- AQUI ESTÁ A CORREÇÃO: Usar a API simples que exibe o widget v2 -->
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
    function loadStats() {
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
            document.querySelector('input[name="_token"]')?.value;

        if (!csrfToken) {
            console.error('Token CSRF não encontrado!');
            return;
        }

        fetch(`/api/ouvidoria/stats`, {
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest'
                },
                credentials: 'same-origin'
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`Erro HTTP: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('Dados recebidos da API:', data);

                const total = data.total || 1;
                const stats = data.stats || {};

                const tipos = [{
                        api: 'Denúncia',
                        html: 'denuncia'
                    },
                    {
                        api: 'Reclamação',
                        html: 'reclamacao'
                    },
                    {
                        api: 'Sugestão',
                        html: 'sugestao'
                    },
                    {
                        api: 'Elogio',
                        html: 'elogio'
                    }
                ];

                tipos.forEach(tipo => {
                    const count = stats[tipo.api]?.total || 0;
                    const percent = Math.round((count / total) * 100);

                    const bar = document.getElementById(`${tipo.html}-bar`);
                    const countLabel = document.getElementById(
                        `${tipo.html}-percent`);

                    if (bar && countLabel) {
                        bar.style.width = percent + '%';
                        bar.setAttribute('aria-valuenow', percent);
                        countLabel.textContent = count;
                        bar.setAttribute('title', `${count} ${tipo.api}`);
                    }
                });
            })
            .catch(err => {
                console.error('Erro ao carregar estatísticas:', err);
            });
    }

    document.addEventListener('DOMContentLoaded', loadStats);

    document.addEventListener('DOMContentLoaded', function() {
        const anonimoCheckbox = document.getElementById('anonimo-checkbox');
        const dadosPessoais = document.getElementById('dados-pessoais');
        const personalFields = dadosPessoais.querySelectorAll('input');
        const alertContainer = document.getElementById('alert-container');
        const parlamentarSelect = document.getElementById('parlamentar-select');
        const buscarProtocoloBtn = document.getElementById('buscar-protocolo-btn');
        const enviarManifestacaoBtn = document.getElementById('enviar-manifestacao-btn');

        const API_BASE_URL = '/api';

        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
            document.querySelector('input[name="_token"]')?.value;

        if (!csrfToken) {
            console.error('Token CSRF não encontrado!');
        }

        function showAlert(message, type = 'success') {
            alertContainer.innerHTML = `
                <div class="alert alert-${type} alert-dismissible fade show rounded-0" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;

            setTimeout(() => {
                const alertElement = alertContainer.querySelector('.alert');
                if (alertElement) {
                    const alert = new bootstrap.Alert(alertElement);
                    alert.close();
                }
            }, 5000);
        }

        function loadAssemblymen() {
            fetch(`${API_BASE_URL}/assemblymen`, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    mode: 'cors'
                })
                .then(response => {
                    console.log('Resposta da API:', response);
                    if (!response.ok) {
                        throw new Error('Erro na rede: ' + response.status);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Dados recebidos:', data);
                    if (data.status) {
                        parlamentarSelect.innerHTML = '<option value="">Selecione um parlamentar</option>';
                        data.data.forEach(parlamentar => {
                            const option = document.createElement('option');
                            option.value = parlamentar.id;
                            option.textContent = parlamentar.short_name || parlamentar.name;
                            parlamentarSelect.appendChild(option);
                        });
                    } else {
                        parlamentarSelect.innerHTML =
                            '<option value="">Erro ao carregar parlamentares</option>';
                        console.error('Erro na resposta da API:', data);
                    }
                })
                .catch(error => {
                    console.error('Erro ao carregar parlamentares:', error);
                    parlamentarSelect.innerHTML = '<option value="">Erro ao carregar</option>';
                    showAlert('Erro ao carregar lista de parlamentares.', 'danger');
                });
        }

        function toggleCampos() {
            if (anonimoCheckbox.checked) {
                dadosPessoais.style.display = 'none';
                personalFields.forEach(input => {
                    input.removeAttribute('required');
                    input.value = '';
                });
            } else {
                dadosPessoais.style.display = 'block';
                personalFields.forEach(input => input.setAttribute('required', 'required'));
            }
        }

        buscarProtocoloBtn.addEventListener('click', function() {
            const protocoloInput = document.querySelector('input[name="protocolo"]');
            const protocolo = protocoloInput.value.trim();
            const entidadeId = document.querySelector('input[name="entidade_id"]').value;

            if (!protocolo) {
                showAlert('Por favor, informe um número de protocolo.', 'danger');
                return;
            }

            buscarProtocoloBtn.disabled = true;
            buscarProtocoloBtn.innerHTML =
                '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Buscando...';

            const formData = new FormData();
            formData.append('_token', csrfToken);
            formData.append('entidade_id', entidadeId);
            formData.append('protocolo', protocolo);

            fetch(`${API_BASE_URL}/chamados`, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: formData,
                    mode: 'cors'
                })
                .then(response => {
                    console.log(response.body);
                    if (!response.ok) {
                        throw new Error('Erro na rede: ' + response.status);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log(data);
                    if (data.status) {
                        const statusContainer = document.getElementById('status-container');
                        statusContainer.style.display = 'block';
                        statusContainer.scrollIntoView({
                            behavior: 'smooth'
                        });

                        const manifest = data.data;
                        document.getElementById('protocol-number').textContent = manifest.protocolo || '';
                        document.querySelector('.manifestation-details .col-md-6 p:nth-child(2)').innerHTML =
                            `<strong>Assunto:</strong> ${manifest.assunto || '-'}`;
                        document.querySelector('.manifestation-details .col-md-6 p:nth-child(1)').innerHTML =
                            `<strong>Protocolo:</strong> ${manifest.protocolo || '-'}`;
                        document.querySelector('.manifestation-details .col-md-6 p:nth-child(3)')?.remove();
                        document.querySelector('.manifestation-details .col-md-6 p:nth-child(4)')?.remove();

                        showAlert('Protocolo encontrado com sucesso!', 'success');

                        const timelineSteps = document.querySelectorAll('.timeline-step');
                        timelineSteps.forEach((step, index) => {
                            step.classList.remove('completed', 'active');
                            if (index < manifest.status) {
                                step.classList.add('completed');
                            } else if (index === manifest.status) {
                                step.classList.add('active');
                            }
                        });

                        // NOVO CÓDIGO A SER ADICIONADO PARA EXIBIR A RESPOSTA
                        const responseContainer = document.getElementById('response-container');
                        const responseText = document.getElementById('response-text');

                        if (responseContainer && responseText) {
                           if (manifest.resposta) {
    responseText.innerHTML = manifest.resposta;
    responseContainer.style.display = 'block';
} else {
    responseText.innerHTML = 'Sem resposta no momento.';
    responseContainer.style.display = 'block';
}
                        }
                        // FIM DO NOVO CÓDIGO
                        
                    } else {
                        showAlert(data.message || 'Protocolo não encontrado.', 'danger');
                    }
                })
                .catch(error => {
                    console.error('Erro na busca:', error);
                    showAlert('Erro ao buscar protocolo. Tente novamente.', 'danger');
                })
                .finally(() => {
                    buscarProtocoloBtn.disabled = false;
                    buscarProtocoloBtn.innerHTML = '<i class="bi bi-search me-1"></i> Consultar';
                });
        });

        enviarManifestacaoBtn.addEventListener('click', function() {
    const form = document.getElementById('ouvidoria-form');
    const formData = new FormData(form);
    
    // Adiciona o token do reCAPTCHA ao FormData
    var captchaResponse = grecaptcha.getResponse();

    if (captchaResponse.length === 0) {
        showAlert('Complete o reCAPTCHA para continuar.', 'danger');
        return;
    }

    formData.append('captchaResponse', captchaResponse);

    enviarManifestacaoBtn.disabled = true;
    enviarManifestacaoBtn.innerHTML =
        '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Enviando...';

    fetch(`${API_BASE_URL}/store-manifestacao`, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
        },
        body: formData,
        mode: 'cors'
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(errorData => {
                throw new Error(errorData.message || 'Erro na rede: ' + response.status);
            });
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
        if (data.status) {
            showAlert(
                `Manifestação enviada com sucesso! Seu protocolo é: ${data.data}`,
                'success'
            );
            form.reset();
            toggleCampos();
        } else {
            let errorMessage = 'Erro ao enviar manifestação.';
            if (data.errors) {
                errorMessage = Object.values(data.errors).join('<br>');
            } else if (data.message) {
                errorMessage = data.message;
            } else if (data.error) {
                errorMessage = data.error;
            }
            showAlert(errorMessage, 'danger');
        }
        grecaptcha.reset();
    })
    .catch(error => {
        console.error('Erro no envio:', error);
        showAlert('Erro ao enviar manifestação. Tente novamente.', 'danger');
        grecaptcha.reset();
    })
    .finally(() => {
        enviarManifestacaoBtn.disabled = false;
        enviarManifestacaoBtn.innerHTML =
            '<i class="bi bi-send me-2"></i>Enviar Manifestação';
    });
});


        document.getElementById('busca-protocolo-form').addEventListener('submit', function(e) {
            e.preventDefault();
        });

        document.getElementById('ouvidoria-form').addEventListener('submit', function(e) {
            e.preventDefault();
        });

        toggleCampos();
        anonimoCheckbox.addEventListener('change', toggleCampos);
        loadAssemblymen();
    });
</script>
<style>
    body {
        font-family: 'Segoe UI', Arial, sans-serif;
        color: #333;
    }

    .card {
        border-radius: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .card-header {
        border-radius: 0;
        font-weight: 500;
    }

    .btn-dark {
        background-color: #343a40;
        border-color: #343a40;
    }

    .btn-dark:hover {
        background-color: #23272b;
        border-color: #1d2124;
    }

    .form-control,
    .form-select {
        border-radius: 0;
        border: 1px solid #ced4da;
        padding: 10px 12px;
    }

    .form-control:focus,
    .form-select:focus {
        box-shadow: 0 0 0 2px rgba(52, 58, 64, 0.2);
        border-color: #343a40;
    }

    .progress {
        background-color: 'e9ecef';
        border-radius: 0;
    }

    .progress-bar {
        border-radius: 0;
    }

    .bg-gray-700 {
        background-color: #495057 !important;
    }

    .bg-gray-600 {
        background-color: #6c757d !important;
    }

    .status-timeline {
        position: relative;
        padding: 20px 0;
    }

    .timeline-progress {
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .timeline-progress::before {
        content: '';
        position: absolute;
        top: 15px;
        left: 0;
        right: 0;
        height: 2px;
        background: #dee2e6;
        z-index: 1;
    }

    .timeline-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    .timeline-dot {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: white;
        border: 2px solid #dee2e6;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
    }

    .timeline-step.completed .timeline-dot {
        border-color: #343a40;
        background: #343a40;
        color: white;
        font-size: 12px;
    }

    .timeline-step.active .timeline-dot {
        border-color: #495057;
        background: #495057;
        color: white;
    }

    .timeline-label {
        font-size: 0.8rem;
        color: #6c757d;
        text-align: center;
    }

    @media (max-width: 768px) {
        .timeline-progress {
            flex-direction: column;
            align-items: flex-start;
        }

        .timeline-progress::before {
            width: 2px;
            height: 100%;
            top: 0;
            left: 11px;
        }

        .timeline-step {
            flex-direction: row;
            margin-bottom: 20px;
        }

        .timeline-dot {
            margin-right: 15px;
            margin-bottom: 0;
        }
    }

    .alert {
        border-radius: 0;
        border: none;
    }

    .spinner-border-sm {
        width: 1rem;
        height: 1rem;
    }

    .form-label {
        font-size: 0.875rem;
        white-space: nowrap;
    }
</style>
@endsection