#logs-wrapper {
    text-align: left;
    max-width: 900px;
    padding-left: 15px;
    padding-right: 15px;
}

#logs-wrapper .log-entry {
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    line-height: 1.4;
}

#logs-wrapper .log-entry::before {
    content: '\2022';
    position: absolute;
    left: 0;
    top: 0;
    color: #28a745;
    font-size: 1.1em;
    line-height: 1.2;
}

#logs-wrapper .log-time {
    color: #28a745;
    font-weight: 600;
    margin-right: 6px;
}

#logs-wrapper .log-message {
    display: inline;
}

#logs-wrapper .log-entry.log-recent {
    font-weight: 700;
}

/* Estilos para móviles - project_view.php */
@media (max-width: 768px) {
    /* Asegurar que el contenedor use todo el ancho disponible en móviles */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Asegurar que la tarjeta use todo el ancho */
    .card {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ajustar el padding del card-header y card-body en móviles */
    .card-header,
    .card-body {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Permitir que el badge del título se ajuste correctamente */
    .card-header h4 {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .card-header h4 .badge {
        display: inline-block !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important; /* Permite que el texto largo se ajuste */
        box-sizing: border-box !important;
    }

    /* Sobrescribir TODOS los divs con max-width inline - usar todo el ancho */
    .card-header div[style*="max-width"],
    .card-body div[style*="max-width"],
    .card-header > div,
    .card-body > div,
    .card-header > div > div,
    .card-body > div > div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Asegurar que los divs con d-flex también usen todo el ancho */
    .card-header .d-flex,
    .card-body .d-flex {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Asegurar que row y col también usen todo el ancho */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ajustar logs-wrapper para que también use todo el ancho en móviles */
    #logs-wrapper {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Asegurar que los mensajes de log se ajusten correctamente */
    #logs-wrapper .log-entry,
    #logs-container .log-entry {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #logs-wrapper .log-message,
    #logs-container .log-message {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        display: block !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Asegurar que los enlaces dentro de los logs también se ajusten */
    #logs-wrapper .log-link,
    #logs-container .log-link {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
        display: inline-block !important;
    }
}

/* Estilos adicionales para pantallas muy pequeñas */
@media (max-width: 576px) {
    .container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .card-header,
    .card-body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .card-header h4 {
        font-size: 1.1rem !important;
    }

    /* Asegurar que logs-wrapper también use menos padding en pantallas muy pequeñas */
    #logs-wrapper {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}